项目上需要使用echarts,对于一个新手前端来说，差点要爆炸了，自身前端基础就不好，echarts就更是不熟了，硬生生的逼着要一周做完一个系统。这算是个小总结吧，以后万一用的上捏。

渐变使用

项目中的echarts图，大多需要渐变，所以先了解一下渐变。echarts官方Demo里面有个例子[https://echarts.baidu.com/examples/editor.html?c=bar-gradient],可以在实例里面了解一下。有个echarts.graphic.LinearGradient这个类。示例中代码是这个样子的：（以下代码修改了一下）

  1. {
  2.             type: 'bar',
  3.             itemStyle: {
  4.                 normal: {
  5.                     color: new echarts.graphic.LinearGradient(
  6.                         1, 0, 0, 0,
  7.                         [
  8.                             {offset: 0, color: 'green'},
  9.                             {offset: 0.5, color: '#0055FF'},
  10.                             {offset: 1, color: '#FF6600'}
  11.                         ]
  12.                     )
  13.                 },
  14.                 emphasis: {
  15.                     color: new echarts.graphic.LinearGradient(
  16.                         0, 0, 0, 1,
  17.                         [
  18.                             {offset: 0, color: '#2378f7'},
  19.                             {offset: 0.7, color: '#2378f7'},
  20.                             {offset: 1, color: '#83bff6'}
  21.                         ]
  22.                     )
  23.                 }
  24.             },
  25.         }

效果如图：

echarts.graphic.LinearGradient中有五个参数，前四个参数分别代表变色的方位右下左上，0, 0, 0, 1,代表渐变色从正上方开始.1, 0, 0, 0,代表渐变色从右边开始渐变。0 1 0 0代表从正下方向正上方渐变，具体可以自己设置看下效果， 第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色.

渐变还有另一种写法：

  1. // 线性渐变，前四个参数分别是 x0, y0, x2, y2, (右下左上)范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
  2. color: {
  3.     type: 'linear',
  4.     x: 0,
  5.     y: 0,
  6.     x2: 0,
  7.     y2: 1,
  8.     colorStops: [{
  9.         offset: 0, color: 'red' // 0% 处的颜色
  10.     }, {
  11.         offset: 1, color: 'blue' // 100% 处的颜色
  12.     }],
  13.     global: false // 缺省为 false
  14. }
  15. // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
  16. color: {
  17.     type: 'radial',
  18.     x: 0.5,
  19.     y: 0.5,
  20.     r: 0.5,
  21.     colorStops: [{
  22.         offset: 0, color: 'red' // 0% 处的颜色
  23.     }, {
  24.         offset: 1, color: 'blue' // 100% 处的颜色
  25.     }],
  26.     global: false // 缺省为 false
  27. }
  28. // 纹理填充
  29. color: {
  30.     image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
  31.     repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
  32. }

环形图

在做环形图时，发生了一个很智障的问题，以下会说明一下，先说明在做环形图时，要一次性生产三个环形图，之前项目中搭建的框架使用的时echarts4，在这个项目中使用的时echarts3的版本，结果使用dataset属性时，没有效果，当初以为是自己代码写的有问题，弄了一小时，最后发现版本不对，啊~~~QAQ当然这是一个小插曲。

上代码：

  1. option = {
  2.         legend: {
  3.           bottom: 0,
  4.           left: "center",
  5.           type: "scroll",
  6.           show: true,
  7.           data: ["黄岛滚筒", "天津波轮"]
  8.         },
  9.         tooltip: {},
  10.         dataset: {
  11.           source: [
  12.             ["product", "2012", "2013", "2014",],
  13.             ["黄岛滚筒", 41.1, 30.4, 65.1],
  14.             ["天津波轮", 86.5, 92.1, 85.7]
  15.           ]
  16.         },
  17.         series: [
  18.           {
  19.             type: "pie",
  20.             center: ["17%", "45%"],
  21.             radius: ["60%", "30%"],
  22.             label:{
  23.               show: false,
  24.             },
  25.             labelLine: {
  26.                 show: false
  27.             },
  28.             itemStyle: {
  29.               color: function(params) {
  30.                 //自定义颜色
  31.                 var colorList = ["#3770DA", "#FB7293"];
  32.                 return colorList[params.dataIndex];
  33.               }
  34.             }
  35.           },
  36.           {
  37.             type: "pie",
  38.             center: ["50%", "45%"],
  39.             radius: ["60%", "30%"],
  40.              label:{
  41.               show: false,
  42.             },
  43.             labelLine: {
  44.               normal: {
  45.                 show: false
  46.               }
  47.             },
  48.             itemStyle: {
  49.               color: function(params) {
  50.                 //自定义颜色
  51.                 var colorList = ["#3770DA", "#FB7293"];
  52.                 return colorList[params.dataIndex];
  53.               }
  54.             },
  55.             encode: {
  56.               itemName: "product",
  57.               value: "2013"
  58.             }
  59.           },
  60.           {
  61.             type: "pie",
  62.             center: ["83%", "45%"],
  63.             radius: ["60%", "30%"],
  64.              label:{
  65.               show: false,
  66.             },
  67.             labelLine: {
  68.               normal: {
  69.                 show: false
  70.               }
  71.             },
  72.             itemStyle: {
  73.               color: function(params) {
  74.                 //自定义颜色
  75.                 var colorList = ["#3770DA", "#FB7293"];
  76.                 return colorList[params.dataIndex];
  77.               }
  78.             },
  79.             encode: {
  80.               itemName: "product",
  81.               value: "2014"
  82.             }
  83.           }
  84.         ]
  85.       }

接下来就是智障的一个问题了，在series.radius设置["60%", "30%"],时，导致环状图的牵引线在里面，然后这个问题困扰了很久，然后问了一个大佬，他说我这两个值设置反了，内心mmp，没救了.

一个环状图代码：

  1. option = {
  2.         legend: {
  3.           bottom: 0,
  4.           left: "center",
  5.           type: "scroll",
  6.           show: true,
  7.           data: ["黄岛滚筒", "天津波轮"]
  8.         },
  9.         tooltip: {},
  10.         graphic: [
  11.           {
  12.             type: "text",
  13.             left: "center",
  14.             top: "center",
  15.             style: {
  16.               text: `总开动率\n 89% `,
  17.               textAlign: "center",
  18.               fill: "#000",
  19.               width: 30,
  20.               height: 30
  21.             }
  22.           }
  23.         ],
  24.         dataset: {
  25.           source: [
  26.             ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
  27.             ["黄岛滚筒", 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
  28.             ["天津波轮", 86.5, 92.1, 85.7, 83.1, 73.4, 55.1]
  29.           ]
  30.         },
  31.         series: [
  32.           {
  33.             type: "pie",
  34.             center: ["50%", "45%"],
  35.             radius: ["30%", "60%"],
  36.             label:{
  37.               show: true,
  38.               position: 'outside',
  39.               formatter:function(params){
  40.                 return `${params.percent}% ${params.name}`
  41.               }
  42.             },
  43.             labelLine: {
  44.               normal: {
  45.                 show: true
  46.               }
  47.             },
  48.             itemStyle: {
  49.               color: function(params) {
  50.                 //自定义颜色
  51.                 var colorList = ["#3770DA", "#FB7293"];
  52.                 return colorList[params.dataIndex];
  53.               }
  54.             }
  55.           }
  56.         ]
  57.       };

柱状图

先看原型图：

这个需要背景渐变，这个时候渐变就派上用场了，一二三上代码：

  1. var option =
  2.     tooltip: {
  3.             trigger: "axis"
  4.           },
  5.           legend: {
  6.             show: false
  7.           },
  8.           grid: {
  9.             top: "15%",
  10.             left: "3%",
  11.             right: "12%",
  12.             bottom: "3%",
  13.             containLabel: true
  14.           },
  15.           color: ["#1A62E8"],
  16.           calculable: true,
  17.           xAxis: [
  18.             {
  19.               type: "category",
  20.               name: "时间",
  21.               data: Array.apply(null, Array(24)).map(function(item, i) {
  22.                 return i + 1;
  23.               })
  24.             }
  25.           ],
  26.           yAxis: [
  27.             {
  28.               splitLine: { show: false },
  29.               type: "value",
  30.               interval: 1000,
  31.               name: "单位:台",
  32.               splitArea: {
  33.                 show: true,
  34.                 areaStyle: {
  35.                   opacity: 0.3,
  36.                   color: [
  37.                     // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
  38.                     //   {
  39.                     //     offset: 0,
  40.                     //     color: "#FFFFFF"
  41.                     //   },
  42.                     //   {
  43.                     //     offset: 1,
  44.                     //     color: "#ff0500",
  45.                     //   }
  46.                     // ]),
  47.                     // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
  48.                     //   {
  49.                     //     offset: 0,
  50.                     //     color: "#FFFFFF"
  51.                     //   },
  52.                     //   {
  53.                     //     offset: 1,
  54.                     //     color: "#ff8400",
  55.                     //   }
  56.                     // ]),
  57.                     // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
  58.                     //   {
  59.                     //     offset: 0,
  60.                     //     color: "#FFFFFF"
  61.                     //   },
  62.                     //   {
  63.                     //     offset: 1,
  64.                     //     color: "#0fff01",
  65.                     //   }
  66.                     // ])
  67.                     {
  68.                       type: "linear",
  69.                       x: 0,
  70.                       y: 0,
  71.                       x2: 1,
  72.                       y2: 1,
  73.                       colorStops: [
  74.                         {
  75.                           offset: 0,
  76.                           color: "#FFFFFF" // 0% 处的颜色
  77.                         },
  78.                         {
  79.                           offset: 1,
  80.                           color: "#ff0500" // 100% 处的颜色
  81.                         }
  82.                       ],
  83.                       global: false // 缺省为 false
  84.                     },
  85.                      {
  86.                       type: "linear",
  87.                       x: 0,
  88.                       y: 0,
  89.                       x2: 0,
  90.                       y2: 1,
  91.                       colorStops: [
  92.                         {
  93.                           offset: 0,
  94.                           color: "#FFFFFF" // 0% 处的颜色
  95.                         },
  96.                         {
  97.                           offset: 1,
  98.                           color: "#0fff01" // 100% 处的颜色
  99.                         }
  100.                       ],
  101.                       global: false // 缺省为 false
  102.                     },
  103.                     {
  104.                       type: "linear",
  105.                       x: 0,
  106.                       y: 0,
  107.                       x2: 0,
  108.                       y2: 1,
  109.                       colorStops: [
  110.                         {
  111.                           offset: 0,
  112.                           color: "#FFFFFF" // 0% 处的颜色
  113.                         },
  114.                         {
  115.                           offset: 1,
  116.                           color: "#ff8400" // 100% 处的颜色
  117.                         }
  118.                       ],
  119.                       global: false // 缺省为 false
  120.                     },
  121.                   ]
  122.                 }
  123.               }
  124.             }
  125.           ],
  126.           series: [
  127.             {
  128.               name: "黄岛滚筒",
  129.               type: "bar",
  130.               stack: "总量",
  131.               data: [
  132.                 122.0,
  133.                 2234.9,
  134.                 732.0,
  135.                 2423.2,
  136.                 2325.6,
  137.                 762.7,
  138.                 1335.6,
  139.                 1262.2,
  140.                 332.6,
  141.                 220.0,
  142.                 62.4,
  143.                 33.3
  144.               ],
  145.               markPoint: {
  146.                 // data: [
  147.                 //   { type: "max", name: "最大值" },
  148.                 //   { type: "min", name: "最小值" }
  149.                 // ]
  150.               },
  151.               markLine: {
  152.                 data: [
  153.                   {
  154.                     type: "average",
  155.                     name: "平均值",
  156.                     lineStyle: { color: "#ff8400" }
  157.                   },
  158.                   {
  159.                     type: "min",
  160.                     name: "最小值",
  161.                     lineStyle: { color: "#ff0500" }
  162.                   },
  163.                   {
  164.                     type: "max",
  165.                     name: "最大值",
  166.                     lineStyle: { color: "#0fff01" }
  167.                   }
  168.                 ],
  169.                 label: {
  170.                   formatter: "{b}\n{c}/h"
  171.                 }
  172.               },
  173.             },
  174.             {
  175.               name: "天津波轮",
  176.               type: "bar",
  177.               stack: "总量",
  178.               data: [
  179.                 2.6,
  180.                 5.9,
  181.                 9.0,
  182.                 26.4,
  183.                 28.7,
  184.                 70.7,
  185.                 175.6,
  186.                 182.2,
  187.                 48.7,
  188.                 18.8,
  189.                 6.0,
  190.                 2.3
  191.               ],
  192.               markPoint: {
  193.                 data: []
  194.               },
  195.               markLine: {}
  196.             }
  197.           ]
  198.         };

效果就出来了。

折线图

折线图是面积渐变

项目中使用vue,所以加了loading，将echarts绑在vue的原型实例上。使用_this.$echarts就可以得到echarts实例。

  1. <div ref="powerLineChart" style="height:220px;width: 100%;"></div>
  2. var _this = this;
  3. _this.myChart = _this.$echarts.init(_this.$refs.powerLineChart);
  4.  _this.myChart.showLoading();
  5. var option = {
  6.         tooltip: {
  7.           trigger: "axis"
  8.         },
  9.         legend: {
  10.           data: ["总耗电", "生产耗电", "办公耗电"],
  11.           bottom:0,
  12.         },
  13.         color: ["#FF6600", "#5256B9", "#53C7C7"],
  14.         grid: {
  15.           left: "3%",
  16.           right: "4%",
  17.           bottom: "13%",
  18.           containLabel: true
  19.         },
  20.         xAxis: {
  21.           type: "category",
  22.           boundaryGap: false,
  23.           data: Array.from(new Array(24), (item, index) => index + 1)
  24.         },
  25.         yAxis: {
  26.           type: "value",
  27.           name: "单位：度"
  28.         },
  29.         series: [
  30.           {
  31.             name: "总耗电",
  32.             type: "line",
  33.             symbol: "none",
  34.             smooth: true,
  35.             data: [
  36.               120,
  37.               132,
  38.               101,
  39.               134,
  40.               90,
  41.               230,
  42.               210,
  43.               120,
  44.               132,
  45.               101,
  46.               134,
  47.               90,
  48.               230,
  49.               210,
  50.               90,
  51.               230,
  52.               210,
  53.               120,
  54.               132,
  55.               101,
  56.               134,
  57.               90
  58.             ],
  59.             markPoint: {
  60.               data: [
  61.                 { type: "max", name: "最大值" }
  62.                 // {type: 'min', name: '最小值'}
  63.               ]
  64.             },
  65.             markLine: {
  66.                 data: [
  67.                   {
  68.                     type: "average",
  69.                     name: "平均值",
  70.                     lineStyle: { color: "#FF6600" }
  71.                   },
  72.                   {
  73.                     type: "min",
  74.                     name: "最小值",
  75.                     lineStyle: { color: "#FE3824" }
  76.                   },
  77.                   {
  78.                     type: "max",
  79.                     name: "最大值",
  80.                     lineStyle: { color: "#07B211" }
  81.                   }
  82.                 ],
  83.                 label: {
  84.                   formatter: "{b}\n{c}/h"
  85.                 }
  86.               },
  87.             itemStyle: {
  88.               normal: {
  89.                 color: "#5256B9",
  90.                 shadowBlur: 8,
  91.                 shadowColor: "#25d5f0",
  92.                 borderColor: "#5256B9",
  93.                 borderWidth: 3,
  94.                 backgroundColor: "transparent"
  95.               }
  96.             },
  97.             areaStyle: {
  98.               normal: {
  99.                 color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
  100.                   {
  101.                     offset: 0,
  102.                     color: "#5256B9"
  103.                   },
  104.                   {
  105.                     offset: 1,
  106.                     color: "#FFFFFF"
  107.                   }
  108.                 ])
  109.               }
  110.             }
  111.           },
  112.           {
  113.             name: "生产耗电",
  114.             type: "line",
  115.             symbol: "none",
  116.             smooth: true,
  117.             data: [
  118.               220,
  119.               182,
  120.               191,
  121.               234,
  122.               290,
  123.               330,
  124.               310,
  125.               150,
  126.               232,
  127.               201,
  128.               154,
  129.               190,
  130.               330,
  131.               90,
  132.               230,
  133.               210,
  134.               120,
  135.               132,
  136.               101,
  137.               123,
  138.               32,
  139.               23
  140.             ],
  141.             markPoint: {
  142.               data: [
  143.                 // {type: 'max', name: '最大值'},
  144.                 // {type: 'min', name: '最小值'}
  145.               ]
  146.             },
  147.             markLine: {
  148.               data: [
  149.                 // {type: 'average', name: '平均值'}
  150.               ]
  151.             },
  152.             itemStyle: {
  153.               normal: {
  154.                 color: "#FF6600",
  155.                 shadowBlur: 8,
  156.                 shadowColor: "#25d5f0",
  157.                 borderColor: "#FF6600",
  158.                 borderWidth: 3,
  159.                 backgroundColor: "transparent"
  160.               }
  161.             },
  162.             areaStyle: {
  163.               normal: {
  164.                 color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
  165.                   {
  166.                     offset: 0,
  167.                     color: "#FF6600"
  168.                   },
  169.                   {
  170.                     offset: 1,
  171.                     color: "#FFFFFF"
  172.                   }
  173.                 ])
  174.               }
  175.             }
  176.           },
  177.           {
  178.             name: "办公耗电",
  179.             type: "line",
  180.             symbol: "none",
  181.             smooth: true,
  182.             data: [
  183.               150,
  184.               232,
  185.               201,
  186.               154,
  187.               190,
  188.               330,
  189.               410,
  190.               120,
  191.               132,
  192.               101,
  193.               134,
  194.               90,
  195.               230,
  196.               210,
  197.               150,
  198.               232,
  199.               201,
  200.               154,
  201.               190,
  202.               330,
  203.               23,
  204.               12
  205.             ],
  206.             markPoint: {
  207.               data: [
  208.                 // {type: 'max', name: '最大值'},
  209.                 // {type: 'min', name: '最小值'}
  210.               ]
  211.             },
  212.             markLine: {
  213.               data: [
  214.                 // {type: 'average', name: '平均值'}
  215.               ]
  216.             },
  217.             itemStyle: {
  218.               normal: {
  219.                 color: "#53C7C7",
  220.                 shadowBlur: 8,
  221.                 shadowColor: "#FFFFFF",
  222.                 borderColor: "#53C7C7",
  223.                 borderWidth: 3,
  224.                 backgroundColor: "transparent"
  225.               }
  226.             },
  227.             areaStyle: {
  228.               normal: {
  229.                 color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
  230.                   {
  231.                     offset: 0,
  232.                     color: "#53C7C7"
  233.                   },
  234.                   {
  235.                     offset: 1,
  236.                     color: "#FFFFFF"
  237.                   }
  238.                 ])
  239.               }
  240.             }
  241.           }
  242.         ]
  243.    };
  244.  _this.myChart.hideLoading();
  245.  _this.myChart.setOption(option, true);
  246.  window.addEventListener("resize", function() {
  247.       _this.myChart.resize();
  248. });

效果图：

桑基图

直接上代码：可以直接使用，其实就是自己组装了一个data对象是 energylist数组 ，links 为组装好的data数组

  1.   var energy = {
  2.         水: "#0055FF",
  3.         电: "#FF6600",
  4.         气: "#9BCF58",
  5.         办公1: "#53C7C7",
  6.         办公2: "#53C7C7",
  7.         生产1: "#5256BA",
  8.         生产2: "#5256BA",
  9.         黄岛滚筒: "#3770DA",
  10.         天津波轮: "#FB7293"
  11.       };
  12.       var tempData = [
  13.         {
  14.           source: "电",
  15.           target: "黄岛滚筒",
  16.           value: 5
  17.         },
  18.         {
  19.           source: "电",
  20.           target: "黄岛滚筒",
  21.           value: 3
  22.         },
  23.         {
  24.           source: "水",
  25.           target: "黄岛滚筒",
  26.           value: 8
  27.         },
  28.         {
  29.           source: "水",
  30.           target: "黄岛滚筒",
  31.           value: 3
  32.         },
  33.         {
  34.           source: "气",
  35.           target: "黄岛滚筒",
  36.           value: 1
  37.         },
  38.         {
  39.           source: "气",
  40.           target: "黄岛滚筒",
  41.           value: 2
  42.         },
  43.         {
  44.           source: "气",
  45.           target: "黄岛滚筒",
  46.           value: 8
  47.         },
  48.         {
  49.           source: "黄岛滚筒",
  50.           target: "办公1",
  51.           value: 10
  52.         },
  53.         {
  54.           source: "黄岛滚筒",
  55.           target: "生产1",
  56.           value: 8
  57.         },
  58.         {
  59.           source: "电",
  60.           target: "天津波轮",
  61.           value: 8
  62.         },
  63.         {
  64.           source: "电",
  65.           target: "天津波轮",
  66.           value: 4
  67.         },
  68.         {
  69.           source: "水",
  70.           target: "天津波轮",
  71.           value: 8
  72.         },
  73.         {
  74.           source: "水",
  75.           target: "天津波轮",
  76.           value: 2
  77.         },
  78.         {
  79.           source: "气",
  80.           target: "天津波轮",
  81.           value: 7
  82.         },
  83.         {
  84.           source: "气",
  85.           target: "天津波轮",
  86.           value: 5
  87.         },
  88.         {
  89.           source: "天津波轮",
  90.           target: "办公2",
  91.           value: 20
  92.         },
  93.         {
  94.           source: "气",
  95.           target: "生产2",
  96.           value: 13
  97.         }
  98.       ];
  99.       //数据
  100.       var data = [];
  101.       var energylist = [];
  102.       for (var key in energy) {
  103.         energylist.push({ name: key, itemStyle: { color: energy[key] } });
  104.       }
  105.       for (var i = 0; i < tempData.length; i++) {
  106.         var color = new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
  107.           {
  108.             offset: 0,
  109.             color: energy[tempData[i].source]
  110.           },
  111.           {
  112.             offset: 1,
  113.             color: energy[tempData[i].target]
  114.           }
  115.         ]);
  116.         data.push({
  117.           source: tempData[i].source,
  118.           target: tempData[i].target,
  119.           value: tempData[i].value,
  120.           lineStyle: {
  121.             color: color
  122.           }
  123.         });
  124.       }
  125.       var option = {
  126.         title: {
  127.           text: "",
  128.           top: "top",
  129.           left: "35%"
  130.         },
  131.         tooltip: {
  132.           trigger: "item",
  133.           triggerOn: "mousemove"
  134.         },
  135.         series: [
  136.           {
  137.             type: "sankey",
  138.             data: energylist,
  139.             links: data,
  140.             focusNodeAdjacency: "allEdges",
  141.             itemStyle: {
  142.               borderWidth: 1,
  143.               color: "#1b6199",
  144.               borderColor: "#fff"
  145.             },
  146.             lineStyle: {
  147.               curveness: 0.5,
  148.               opaenergy: 0.5
  149.             }
  150.           }
  151.         ]
  152.       };

效果图：

仪表盘

可以设置刻度标签和刻度样式，设置渐变时也是一样的，可以有两种方法，这里使用了第一种。

  1.  mounted() {
  2.     var _this = this;
  3.     _this.myChart = _this.$echarts.init(_this.$refs.voltageGauge);
  4.     _this.myChart.showLoading();
  5.     var option = {
  6.       tooltip: {
  7.         formatter: "{a} <br/>{b} : {c}%"
  8.       },
  9.       series: [
  10.         {
  11.           name: "电压",
  12.           type: "gauge",
  13.           center: ["20%", "55%"],
  14.           max: 220,
  15.           startAngle: 180,
  16.           endAngle: -0,
  17.           center: ["27%", "50%"], // 默认全局居中
  18.           // radius: '35%',
  19.           detail: { formatter: "{value}V" },
  20.           data: [{ value: 170, name: "V" }],
  21.           axisLine: {
  22.             show: true,
  23.             lineStyle: {
  24.               color: [
  25.                 [
  26.                   1,
  27.                   new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
  28.                     {
  29.                       offset: 0.7,
  30.                       color: "#0055FF"
  31.                     },
  32.                     {
  33.                       offset: 0.1,
  34.                       color: "#01058A"
  35.                     }
  36.                   ])
  37.                 ]
  38.               ]
  39.             }
  40.           }
  41.         },
  42.         {
  43.           name: "电流",
  44.           type: "gauge",
  45.           center: ["20%", "55%"],
  46.           max: 80,
  47.           startAngle: 180,
  48.           endAngle: -0,
  49.           center: ["75%", "50%"], // 默认全局居中
  50.           // radius: '35%',
  51.           detail: { formatter: "{value}A" },
  52.           data: [{ value: 36, name: "A" }],
  53.           axisLine: {
  54.             show: true,
  55.             lineStyle: {
  56.               color: [
  57.                 [
  58.                   1,
  59.                   new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
  60.                     {
  61.                       offset: 0.1,
  62.                       color: "#E7BCF3"
  63.                     },
  64.                     {
  65.                       offset: 0.7,
  66.                       color: "#E062AE"
  67.                     }
  68.                   ])
  69.                 ]
  70.               ]
  71.             }
  72.           }
  73.         }
  74.       ]
  75.     };
  76.     setInterval(function() {
  77.       option.series[0].data[0].value = (Math.random() * 220).toFixed(2) - 0;
  78.       option.series[1].data[0].value = (Math.random() * 88).toFixed(2) - 0;
  79.       _this.myChart.setOption(option, true);
  80.     }, 2000);
  81.     _this.myChart.hideLoading();
  82.     _this.myChart.setOption(option, true);
  83.     window.addEventListener("resize", function() {
  84.       _this.myChart.resize();
  85.     });
  86.   }

效果图：

总结

感觉做渐变时就是想好要哪块区域渐变，然后将color的值设置为渐变的效果，就ok了，这里还绑定了resize，当浏览器窗口变小时，图表也在变小。不过图表设置变色真的好好看。

项目总结之echarts 使用的更多相关文章

  1. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  2. 在react项目中使用ECharts

    这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...

  3. 在ASP.NET MVC 项目中 使用 echarts 画统计图

    echarts 官方地址:http://echarts.baidu.com/ 一.根据图中的数据怎么从数据库中获取并组装成对应格式: 从数据库中获取对应数据,然后在项目中引用Newtonsoft.Js ...

  4. AngularJS 项目里使用echarts 2.0 实现地图功能

    项目中有一页是显示全国地图, echarts官网的地图实例里,有一个模拟迁徙的实例,比较符合项目需求.所以大部分配置项是参考此实例. angular 就不过多介绍了, Google出品的mvc(或者说 ...

  5. angular6项目中使用echarts图表的方法（有一个坑，引用报错）

    1.安装相关依赖(采用的webpack) npm install ecahrts --save npm install ngx-echarts --save 2.angular.json 配置echa ...

  6. vue项目中引用echarts的几种方式

    准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或   ...

  7. 在vue项目中封装echarts的正确姿势

    为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...

  8. 在vue-cli项目中使用echarts

    这个示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --regist ...

  9. Vue系列——在vue项目中使用echarts

    该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像安装 npm install -g cnpm --registry= ...

随机推荐

  1. 字符串匹配：从机器到后缀自己主动KMP

    后缀自己主动机(sam)对字符串匹配 ==== 我们已经配置了一个相对较短的模式字符串sam. 为P="abcabcacab", T[1..i]后缀.因此,它是sam最长前缀长度: ...

  2. Java 阅读TXT文件

    public class GenCategoryAttrItemHandler { private final static String INPUT_FILE_PATH = "input/ ...

  3. Http请求格式（在Linux下使用telnet亲测，通过这篇我才明白）

    命令行窗口中用telnet测试HTTP协议请求消息格式响应消息格式1. 命令行窗口中用telnet测试HTTP协议 HTTP消息是由普通ASCII文本组成.消息包括消息头和数据体部分.消息头以行为单位 ...

  4. abp.message

    abp.message.success(app.localize('SomeMessage'), app.localize('Title')) .done(function() { //do some ...

  5. WPF 数据库增删改查

    <Window x:Class="DataBindingExam.MainWindow"        xmlns="http://schemas.microsof ...

  6. windows下的getopt/getoptlong函数（拷贝GNU C的库函数）

    http://www.cnblogs.com/oloroso/p/4856104.html

  7. linux自动挂载远程网盘到本地

    sudo vim /etc/fstab  添加如下内容 //192.168.1.110/MyFiles /path/to/mount cifs username=adminz,password=pas ...

  8. 2015元旦第一弹——WP8.1应用程序栏（C#后台代码编写）

    //第一次写博文,以后还请各位道友互相关照哈.废话不多说,直接进入正题. 相信大家对于如何在XAML添加应用程序栏应该很清楚,不清楚的话,可以打开新建个Pviot应用 就有系统自带的菜单栏. 本文主要 ...

  9. QSqlQueryModel 居然默认是只读的！

    The model is read-only by default. To make it read-write, you must subclass it and reimplement setDa ...

  10. Qt浅谈之二十七进程间通信之QtDBus good

    一.简介 DBus的出现,使得Linux进程间通信更加便捷,不仅可以和用户空间应用程序进行通信,而且还可以和内核的程序进行通信,DBus使得Linux变得更加智能,更加具有交互性.        DB ...