任务描述

本关任务：按照要求绘制大屏图。

相关知识

本关我们将学习Echarts中大屏图的绘制。

所谓大屏图，指的是将多个可视化图表绘制在一个页面上，这种页面一般需要较大的屏幕来展示，所以被称为大屏图。

大屏图多用在年度总结、监控、数据汇总等场景，比如公安部交通局日常用来监控全国公路、铁路、民航、水运的监控中心就需要使用这种大图。

本关我们将学习绘制的大图如下所示（看不清楚请点击图片）：

图 1


图 1 大屏图

构建布局

这张大图由六张子图组成，分为上下两层。

上层中，考虑到折线图需要宽一点才能展示完全，所以中间的图较宽。

下层所有的图一样宽，在使用Echarts之前，我们先要使用html和css对图片的分布进行布局，控制好每一张图的位置和大小，这样呈现起来才更加美观。

我们布局的html程序如下所示：

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ECharts</title>
  6. <!-- 引入 echarts.js -->
  7. <script type="text/JavaScript" src="../static/echarts.min.js"></script>
  8. <script type="text/JavaScript" src="../static/echarts-wordcloud.min.js"></script>
  9. <link rel="stylesheet" type="text/css" href="../static/main.css">
  10. </head>
  11. <body>
  12. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  13. <div id="title">
  14. 中美两国综合国力对比
  15. </div>
  16. <div id="up">
  17. <div id="up-left">
  18. </div>
  19. <div id="up-middle">
  20. </div>
  21. <div id="up-right">
  22. </div>
  23. </div>
  24. <div id="down">
  25. <div id="down-left">
  26. </div>
  27. <div id="down-middle">
  28. </div>
  29. <div id="down-right">
  30. </div>
  31. </div> 
  32. </body>
  33. </html>
 

其用来布局的样式文件如下（即main.css）：
 

 

  1. body{
  2. width:100%;
  3. height:100%;
  4. }
  6. #title{
  7. margin-top:10px;
  8. float:left;
  9. margin-left:48%;
  10. width:52%;
  11. height:30px;
  12. background-color:#ffffff;
  13. font-size:26px;
  14. }
  16. #up{
  17. margin-top:10px;
  18. float:left;
  19. margin-left:5%;
  20. width:90%;
  21. height:400px;
  22. background-color:#ffffff;
  23. }
  25. #up-left{
  26. float:left;
  27. width:20%;
  28. height:100%;
  29. background-color:#ffffff;
  30. }
  32. #up-middle{
  33. float:left;
  34. margin-left:5%;
  35. width:50%;
  36. height:100%;
  37. background-color:#ffffff;
  38. }
  40. #up-right{
  41. float:left;
  42. margin-left:5%;
  43. width:20%;
  44. height:100%;
  45. background-color:#ffffff;
  46. }
  49. #down{
  50. margin-top:10px;
  51. float:left;
  52. margin-left:5%;
  53. width:90%;
  54. height:400px;
  55. background-color:#ffffff;
  56. }
  58. #down-left{
  59. float:left;
  60. width:30%;
  61. height:100%;
  62. background-color:#ffffff;
  63. }
  65. #down-middle{
  66. float:left;
  67. margin-left:5%;
  68. width:30%;
  69. height:100%;
  70. background-color:#ffffff;
  71. }
  73. #down-right{
  74. float:left;
  75. margin-left:5%;
  76. width:30%;
  77. height:100%;
  78. background-color:#ffffff;
  79. }
 

因为Echarts会控制每一张图内部的样式，所以我们的css只需要控制图的整体样式即可，重点是图和图之间的相对位置要布局合理。比如留足合适的间距。
 

折线图、柱状图的绘制
 

我们先来看下位于上方的正中间的折线图和柱状图的绘制，它的程序如下所示：
 

 

  1. var myChart = echarts.init(document.getElementById('up-middle'));
  2. myChart.setOption({
  3. grid:{
  4. width:"65%"
  5. },
  6. title : {
  7. x:"20%",
  8. text : "人口、人均GDP、GDP总量增长清空"//标题
  9. },
  10. tooltip : {
  11. },
  12. legend: {
  13. x:"80%",
  14. y:15,
  15. orient:"vertical",
  16. data:['中国总人口（百万）', '美国总人口（百万）', '中国GDP总量（亿美元）', '美国GDP总量（亿美元）', '中国人均GDP（美元）', '美国人均GDP（美元）']//图例
  17. },
  18. xAxis : [
  19. {
  20. name: "年份",
  21. type : 'category',//表示x轴的每一项由几组数据组成
  22. data : ['1980','1985','1990','1995','2000','2005','2010','2015', '2020']//x轴标题
  23. }
  24. ],
  25. yAxis : [
  26. {
  27. type : 'value'//每一项都是数据
  28. }
  29. ],
  30. series : [
  31. {
  32. /********* Begin *********/
  33. //作为本关题目，这里不给出
  34. /********* End *********/
  35. itemStyle : { color:'rgb(252,144,115)'},//柱子样式
  36. data:[98100,105100,113500,120500, 126300, 130400,133800, 137100, 140200]//数据
  37. },
  38. {
  39. /********* Begin *********/
  40. //作为本关题目，这里不给出
  41. /********* End *********/
  42. itemStyle : { color:'rgb(187,230,115)'},//柱子样式
  43. data:[22900,24000,25200,26600, 28200, 29600,30900, 32100, 33200]
  44. },
  45. {
  46. name:'中国人均GDP（美元）',//数据的名字
  47. type:'line',//表示柱状图
  48. itemStyle : { color:'rgb(118,102,79)', normal: {label : {show: true}}},//柱子样式
  49. data:[194, 294, 317, 609, 959, 1753, 4550, 8066, 10500]//数据
  50. },
  51. {
  52. name:'美国人均GDP（美元）',
  53. type:'line',
  54. itemStyle : { color:'rgb(67,74,80)', normal: {label : {show: true}}},//柱子样式
  55. data:[12574, 18236, 23888, 28690, 36334, 44114, 48466, 56863, 63543]
  56. },
  57. {
  58. name:'中国GDP总量（亿美元）',//数据的名字
  59. type:'line',//表示柱状图
  60. itemStyle : { color:'rgb(60,46,123)', normal: {label : {show: true}}},//柱子样式
  61. data:[1911, 3094, 3608, 7345, 12113, 22859, 60871, 110616, 147227]//数据
  62. },
  63. {
  64. name:'美国GDP总量（亿美元）',
  65. type:'line',
  66. itemStyle : { color:'rgb(8,117,78)', normal: {label : {show: true}}},//柱子样式
  67. data:[28573, 43389, 59631, 76397, 102523, 130366, 149921, 182383, 209366]
  68. },
  69. ]
  70. });
 

这里的程序细节我们在柱状图和折线图这两个课程中已经讲的很详细，这里不再赘述。
 

稍微需要提醒的是，柱状图需要堆积，折线图不需要使用堆积功能。
 

饼状图
 

上方左侧是饼图，绘制的是中美两国2020年的世界五百强企业数量的对比，它的程序如下所示：
 

 

  1. var myChart = echarts.init(document.getElementById('up-left'));
  2. myChart.setOption({
  3. grid:{
  4. width:"85%"
  5. },
  6. title : {
  7. x:"2%",
  8. text : "世界五百强企业数量对比（2020）"//标题
  9. },
  10. tooltip : {
  11. },
  12. color:["rgb(178,94,70)", "rgb(9,163,65)"],
  13. legend: {
  14. x:"80%",
  15. y:20,
  16. orient:"vertical",
  17. data:['中国', '美国']//图例
  18. },
  19. series : [
  20. {
  21. name:'世界五百强企业数量',//数据的名字
  22. type:'pie',//表示柱状图
  23. radius:'60%',//圆的半径
  24. itemStyle : {normal: {label : {show: true}}},
  25. /********* Begin *********/
  26. //作为本关题目，这里不给出
  27. /********* End *********/
  28. }
  29. ]
  30. });
 

这里的知识点请参考：饼状图，需要注意的是，输入的数据可以直接是数字，没有必要提前计算百分比。
 

雷达图
 

我们用雷达图来展示中美军队之间的对比，程序如下：
 

 

  1. //右侧
  2. var myChart = echarts.init(document.getElementById('up-right'));
  3. myChart.setOption({
  4. grid:{
  5. width:"95%"
  6. },
  7. title : {
  8. x:"12%",
  9. text : "中美军力对比（2020）"//标题
  10. },
  11. tooltip : {
  12. },
  13. color:["rgb(237,223,174)", "rgb(9,163,65)"],
  14. legend: {
  15. x:"80%",
  16. y:20,
  17. orient:"vertical",
  18. data:['中国', '美国']//图例
  19. },
  20. radar: [{ //配置雷达图坐标系组件，只适用于雷达图
  21. center: ['50%', '56%'], //设置中心坐标，数组的第1项是横坐标，第2项是纵坐标
  22. radius: '60%', //设置圆的半径，数组的第一项是内半径，第二项是外半径
  23. name: { //设置（圆外的标签）雷达图每个指示器名称
  24. formatter: '{value}',
  25. textStyle: {color: '#000' }
  26. },
  27. splitNumber: 2, //设置指示器轴的分割段数，default
  28. //设置坐标轴轴线设置
  29. axisLine: { lineStyle: { color: '#fff', width: 1, type: 'solid', } },
  30. //设置坐标轴在grid区域中的分隔线
  31. splitLine: { lineStyle: { color: '#fff', width: 1, } },
  32. splitArea: {
  33. show: true,
  34. areaStyle: { color: ['#abc', '#abc', '#abc', '#abc'] }
  35. }, //设置分隔区域的样式
  36. indicator: [ //配置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
  37. //设置指示器的名称，最大值，标签的颜色
  38. { name: '军费开支', max: 10300 },
  39. { name: '军队数量', max: 340 },
  40. { name: '航母数量', max: 14 },
  41. { name: '五代机数量', max: 400 },
  42. { name: '洲际导弹数量', max: 4100 }]
  43. }],
  44. series: [{
  45. name: '雷达图', //系列名称，用于tooltip的显示，图例筛选
  46. type: 'radar', //系列类型: 雷达图
  47. data: [ //设置雷达图的数据是多变量(维度)
  48. { //设置第1个数据项
  49. name: '中国', //数据项名称
  50. value: [2520, 200, 3, 150, 350], //value是具体数据
  51. symbol: 'triangle',
  52. //设置拐点标志样式
  53. itemStyle: { normal: { borderColor: 'blue', borderWidth: 3 } },
  54. },
  55. { //设置第2个数据项
  56. name: '美国',
  57. value: [7780, 140, 11, 250, 3750],
  58. symbol: 'circle',
  59. //设置拐点标志样式
  60. itemStyle: { normal: { borderColor: 'rgba(51,0,255,1)', borderWidth: 3, } },
  61. }
  62. ]
  63. },]
  64. });
 

雷达图的知识点请参考：雷达图
 

仪表盘
 

我们使用仪表盘来展示中美两国的人类发展指数，如下：
 

 

  1. //下方左侧
  2. var myChart = echarts.init(document.getElementById('down-left'));
  3. myChart.setOption({
  4. grid:{
  5. x:'left'
  6. },
  7. title : {
  8. x:"10%",
  9. text : "人类发展指数对比（2020）"//标题
  10. },
  11. tooltip : {
  12. },
  13. color:["rgb(178,94,70)", "rgb(9,163,65)"],
  15. series: [
  16. {
  17. name: "",
  18. center:['35%', '50%'],
  19. type: 'gauge',//仪表盘
  20. min: 0,//示数的最小值
  21. max: 1,//示数的最大值
  22. radius: "80%",//仪表的半径
  23. splitNumber: 1, //刻度数量
  24. startAngle: 180,//起始的角度
  25. endAngle: 0,//结束的角度
  26. axisLine: { // 坐标轴线
  27. lineStyle: { // 属性lineStyle控制线条样式
  28. width: 40,//圆环的半径
  29. color: [ //渐变的颜色
  30. [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
  31. offset: 0,
  32. color: '#3aa600'
  33. }, {
  34. offset: 1,
  35. color: '#f70700'
  36. }])]
  37. ],
  38. }
  39. },
  40. axisLabel: {
  41. show: true,//不显示刻度标签
  42. },
  43. detail: {
  44. offsetCenter: [20, '-45%'],//数值的位置
  45. },
  46. data: [{
  47. value: 0.761, //指针数值
  48. }]
  49. },
  50. {
  51. name: "",
  52. center:['35%', '50%'],
  53. z:3,
  54. type: 'gauge',//仪表盘
  55. min: 0,//示数的最小值
  56. max: 1,//示数的最大值
  57. radius: "80%",//仪表的半径
  58. splitNumber: 1, //刻度数量
  59. startAngle: 180,//起始的角度
  60. endAngle: 0,//结束的角度
  61. axisLine: { // 坐标轴线
  62. show:false
  63. },
  64. axisLabel: {
  65. show: false,//不显示刻度标签
  66. },
  67. detail: {
  68. offsetCenter: [80, '-5%'],//数值的位置
  69. },
  70. data: [{
  71. value: 0.926, //指针数值
  72. }]
  73. }
  74. ]
  75. });
 

仪表盘知识点请参考：仪表盘，这里的仪表盘是将两个仪表盘叠加起来的效果，其中的上层仪表盘我们只保留了指针。这样最终就会显示一个仪表，两个指针。
 

散点图
 

我们用散点图来表示两国在近年来的出口总额情况对比：
 

 

  1. //下方中间
  2. var myChart = echarts.init(document.getElementById('down-middle'));
  3. myChart.setOption({
  4. grid:{
  5. x:'13%',
  6. width:"75%"
  7. },
  8. title : {
  9. x:"2%",
  10. text : "中美出口总额对比"//标题
  11. },
  12. tooltip : {
  13. },
  14. color:["rgb(178,94,70)", "rgb(9,163,65)"],
  15. legend: {
  16. x:"80%",
  17. y:10,
  18. orient:"vertical",
  19. data:['中国', '美国']//图例
  20. },
  21. xAxis : [
  22. {
  23. scale:true,
  24. name:'年份'
  25. }
  26. ],
  27. yAxis : [
  28. {
  29. scale:true,
  30. name:'出口总额（亿美元）'
  31. }
  32. ],
  33. series : [
  34. {
  35. name:'中国',
  36. type:'scatter',
  37. symbolSize:10,
  38. symbol:'diamond',
  39. data: [
  40. [2014, 43030.38], [2015, 39586.44], [2016, 36849.25],
  41. [2017, 41044.70], [2018, 46230.40], [2019, 45753.00], [2020, 46462.60]
  42. ]
  43. },
  44. {
  45. name:'美国',
  46. type:'scatter',
  47. symbolSize:10,
  48. symbol:'rect',
  49. data: [
  50. [2014, 28424.00], [2015, 27980.44], [2016, 29854.25],
  51. [2017, 31058.70], [2018, 32156.40], [2019, 34025.00], [2020, 29560.60]
  52. ]
  53. }
  54. ]
  55. });
 

散点图的知识点请参考：散点图
 

词云图
 

最后是词云图，展示了2020年的中美两国的关键词：
 

 

  1. var myChart = echarts.init(document.getElementById('down-right'));
  2. myChart.setOption({
  3. title: { //配置标题组件
  4. text: '中美2020关键词',
  5. x: 'center', y: 15,
  6. textStyle: {
  7. color: 'green', fontSize: 22,
  8. }
  9. },
  10. tooltip: { show: true }, //配置提示框组件
  11. series: [{ //数据系列及其配置
  12. name: '中美2020关键词', //设置名称
  13. type: 'wordCloud', //设置图表类型为字云图
  14. sizeRange: [15, 100], //设置数据大小范围
  15. size: ['80%', '80%'], //设置显示的字云图的大小
  16. textRotation: [0, 45, 90, 135, -45, -90], //设置文字倾斜角度
  17. textPadding: 3, //设置文字之间的间距
  18. autoSize: { enable: true, minSize: 5 }, //设置文字的自动大小
  19. textStyle: {
  20. normal: {
  21. color: function () {
  22. return 'rgb(' + [
  23. Math.round(Math.random() * 255),
  24. Math.round(Math.random() * 255),
  25. Math.round(Math.random() * 255)
  26. ].join(',') + ')';
  27. }
  28. },
  29. emphasis: {
  30. shadowBlur: 26,
  31. color: '#333',
  32. shadowColor: '#ccc',
  33. fontSize: 20
  34. }
  35. },
  36. data: [ //设置具体的数据
  37. { name: "新冠", value: 15884 }, { name: "疫情", value: 16180 },
  38. { name: "抗疫", value: 9089 }, { name: "武汉", value: 6229 },
  39. { name: "湖北", value: 3860 }, { name: "口罩", value: 3745 },
  40. { name: "复工", value: 1318 }, { name: "复产", value: 1307 },
  41. { name: "复课", value: 1261 }, { name: "疫苗", value: 1046 },
  42. { name: "病毒", value: 1234 }, { name: "隔离", value: 1100 },
  43. { name: "防护", value: 1046 }, { name: "居家办公", value: 915 },
  44. { name: "消毒", value: 1023 }, { name: "停工", value: 924 },
  45. { name: "COVID-19", value: 15822 }, { name: "virus", value: 12814 },
  46. { name: "mask", value: 5193 }, { name: "Trump", value: 8447 },
  47. { name: "BLM", value: 5524 }, { name: "Biden", value: 3448 },
  48. { name: "fraud", value: 1447 }, { name: "vaccine", value: 1442 },
  49. { name: "New York", value: 1439 }, { name: "race", value: 2169 },
  50. { name: "MAGA", value: 2409 }
  51. ] //data结束
  52. }] //series结束
  53. });
 

词云图的教程链接时：词云图
 

最终画出来的效果就是图1。
 

编程要求
 

根据提示，在右侧编辑器Begin和End之间补充代码，绘制如下的大屏图（这个图是我们把例子中的图的下半部分去掉了，因为下半部分的词云图词语的位置是随机的，无法测评）：
 

 

 

图  1
 


 图 2 结果图
 

 

 

要求（以图片为准，这里仅为提示作用）：
 

  • 你需要补充的有三个地方；
  • 前两个地方需要补充name、type、statck属性；
  • 第三个地方需要补充data属性，其中中国是124、美国是121。
  • 最后的图片必须和结果图一模一样。
 

测试说明
 

我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！”
 

同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。
 

测试输入： 预期输出：图像对比一致，恭喜通关！
 

 

开始你的任务吧，祝你成功！
 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
	<script type="text/JavaScript" src="../static/echarts.min.js"></script>
    <script type="text/JavaScript" src="../static/echarts-wordcloud.min.js"></script>
     <link rel="stylesheet" type="text/css" href="../static/main.css">
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="title">
        中美两国综合国力对比
    </div>
    <div id="up">
        <div id="up-left">

        </div>
        <div id="up-middle">

        </div>
        <div id="up-right">

        </div>
    </div>

    <script type="text/javascript">
    //中间大图
var myChart = echarts.init(document.getElementById('up-middle'));
myChart.setOption({
    grid:{
        width:"65%"
    },
    title : {
        x:"20%",
        text : "人口、人均GDP、GDP总量增长清空"//标题
    },
    tooltip : {
    },
    legend: {
        x:"80%",
        y:15,
        orient:"vertical",
        data:['中国总人口（百万）', '美国总人口（百万）', '中国GDP总量（亿美元）', '美国GDP总量（亿美元）', '中国人均GDP（美元）', '美国人均GDP（美元）']//图例
    },
    xAxis : [
      {
          name: "年份",
          type : 'category',//表示x轴的每一项由几组数据组成
          data : ['1980','1985','1990','1995','2000','2005','2010','2015', '2020']//x轴标题
      }
    ],
    yAxis : [
      {
          type : 'value'//每一项都是数据
      }
    ],
    series : [
         {
             /********* Begin *********/
                stack:'1',
                name:"中国总人口（百万）",
                type:'bar',

             /********* End *********/
             itemStyle : { color:'rgb(252,144,115)'},//柱子样式
             data:[98100,105100,113500,120500, 126300, 130400,133800, 137100, 140200]//数据
         },
         {
             /********* Begin *********/
            stack:'1',
                name:"美国总人口（百万）",
                type:'bar',

             /********* End *********/
             itemStyle : { color:'rgb(187,230,115)'},//柱子样式
             data:[22900,24000,25200,26600, 28200, 29600,30900, 32100, 33200]
         },
         {
             name:'中国人均GDP（美元）',//数据的名字
             type:'line',//表示柱状图
             itemStyle : { color:'rgb(118,102,79)', normal: {label : {show: true}}},//柱子样式
             data:[194, 294, 317, 609, 959, 1753, 4550, 8066, 10500]//数据
         },
         {
             name:'美国人均GDP（美元）',
             type:'line',
             itemStyle : { color:'rgb(67,74,80)', normal: {label : {show: true}}},//柱子样式
             data:[12574, 18236, 23888, 28690, 36334, 44114, 48466, 56863, 63543]
         },
         {
             name:'中国GDP总量（亿美元）',//数据的名字
             type:'line',//表示柱状图
             itemStyle : { color:'rgb(60,46,123)', normal: {label : {show: true}}},//柱子样式
             data:[1911, 3094, 3608, 7345, 12113, 22859, 60871, 110616, 147227]//数据
         },
         {
             name:'美国GDP总量（亿美元）',
             type:'line',
             itemStyle : { color:'rgb(8,117,78)', normal: {label : {show: true}}},//柱子样式
             data:[28573, 43389, 59631, 76397, 102523, 130366, 149921, 182383, 209366]
         },
    ]
});
    //左侧
    var myChart = echarts.init(document.getElementById('up-left'));
    myChart.setOption({
        grid:{
            width:"85%"
        },
        title : {
            x:"2%",
            text : "世界五百强企业数量对比（2020）"//标题
        },
        tooltip : {
        },
        color:["rgb(178,94,70)", "rgb(9,163,65)"],
        legend: {
            x:"80%",
            y:20,
            orient:"vertical",
            data:['中国', '美国']//图例
        },
        series : [
             {
                 name:'世界五百强企业数量',//数据的名字
                 type:'pie',//表示柱状图
                 radius:'60%',//圆的半径
                 itemStyle : {normal: {label : {show: true}}},
                 /********* Begin *********/
                data:[{value:124,name:'中国'},{value:121,name:'美国'}]

                 /********* End *********/
             }
        ]
    });
 //右侧
var myChart = echarts.init(document.getElementById('up-right'));
myChart.setOption({
    grid:{
        width:"95%"
    },
    title : {
        x:"12%",
        text : "中美军力对比（2020）"//标题
    },
    tooltip : {
    },
    color:["rgb(237,223,174)", "rgb(9,163,65)"],
    legend: {
        x:"80%",
        y:20,
        orient:"vertical",
        data:['中国', '美国']//图例
    },
    radar: [{  //配置雷达图坐标系组件，只适用于雷达图
        center: ['50%', '56%'],  //设置中心坐标，数组的第1项是横坐标，第2项是纵坐标
        radius: '60%',  //设置圆的半径，数组的第一项是内半径，第二项是外半径
        name: {  //设置（圆外的标签）雷达图每个指示器名称
            formatter: '{value}',
            textStyle: {color: '#000' }
        },
        splitNumber: 2,  //设置指示器轴的分割段数，default
        //设置坐标轴轴线设置
        axisLine: { lineStyle: { color: '#fff', width: 1, type: 'solid', } },
        //设置坐标轴在grid区域中的分隔线
        splitLine: { lineStyle: { color: '#fff', width: 1, } },
        splitArea: {
            show: true,
            areaStyle: { color: ['#abc', '#abc', '#abc', '#abc'] }
        },  //设置分隔区域的样式
        indicator: [  //配置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
            //设置指示器的名称，最大值，标签的颜色
            { name: '军费开支', max: 10300 },
             { name: '军队数量', max: 340 },
            { name: '航母数量', max: 14 },
             { name: '五代机数量', max: 400 },
            { name: '洲际导弹数量', max: 4100 }]
    }],
    series: [{
        name: '雷达图',  //系列名称，用于tooltip的显示，图例筛选
        type: 'radar',  //系列类型: 雷达图
        data: [  //设置雷达图的数据是多变量(维度)
            {   //设置第1个数据项
                name: '中国',  //数据项名称
                value: [2520, 200, 3, 150, 350],  //value是具体数据
                symbol: 'triangle',
                //设置拐点标志样式
                itemStyle: { normal: { borderColor: 'blue', borderWidth: 3 } },
            },
            {   //设置第2个数据项
                name: '美国',
                value: [7780, 140, 11, 250, 3750],
                symbol: 'circle',
                //设置拐点标志样式
                itemStyle: { normal: { borderColor: 'rgba(51,0,255,1)', borderWidth: 3, } },
            }
        ]
    },]
});
    </script>
</body>
</html>
 

 
  

        # echarts
      
  
 
 Logo 
开放原子开发者工作坊
 
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
 
 
  
更多推荐
  
cover
 
赛项征集 | 第二届开放原子开源大赛——汽车软件开源赛火热进行中
 
 
avatar 开放原子开发者工作坊
 
 
开放原子校源行启动优质开源课程征集，助力高校开源人才培养

 
校源行启动优质开源课程征集，助力高校开源人才培养
 
avatar 开放原子开发者工作坊
 
cover
 
第二届Open Source Congress在北京成功举办

 
 
avatar 开放原子开发者工作坊