项目总结之echarts 使用

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

渐变使用

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

 

{
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        1, 0, 0, 0,
                        [
                            {offset: 0, color: 'green'},
                            {offset: 0.5, color: '#0055FF'},
                            {offset: 1, color: '#FF6600'}
                        ]
                    )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
        }

View Code

效果如图：

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

渐变还有另一种写法：

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, (右下左上)范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}
// 纹理填充
color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

View Code

环形图

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

上代码：

option = {
        legend: {
          bottom: 0,
          left: "center",
          type: "scroll",
          show: true,
          data: ["黄岛滚筒", "天津波轮"]
        },
        tooltip: {},
        dataset: {
          source: [
            ["product", "2012", "2013", "2014",],
            ["黄岛滚筒", 41.1, 30.4, 65.1],
            ["天津波轮", 86.5, 92.1, 85.7]
          ]
        },
        series: [
          {
            type: "pie",
            center: ["17%", "45%"],
            radius: ["60%", "30%"],
            label:{
              show: false,
            },
            labelLine: {
                show: false
            },
            itemStyle: {
              color: function(params) {
                //自定义颜色
                var colorList = ["#3770DA", "#FB7293"];
                return colorList[params.dataIndex];
              }
            }
          },
          {
            type: "pie",
            center: ["50%", "45%"],
            radius: ["60%", "30%"],
             label:{
              show: false,
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              color: function(params) {
                //自定义颜色
                var colorList = ["#3770DA", "#FB7293"];
                return colorList[params.dataIndex];
              }
            },
            encode: {
              itemName: "product",
              value: "2013"
            }
          },
          {
            type: "pie",
            center: ["83%", "45%"],
            radius: ["60%", "30%"],
             label:{
              show: false,
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              color: function(params) {
                //自定义颜色
                var colorList = ["#3770DA", "#FB7293"];
                return colorList[params.dataIndex];
              }
            },
            encode: {
              itemName: "product",
              value: "2014"
            }
          }
        ]
      }

View Code

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

一个环状图代码：

option = {
        legend: {
          bottom: 0,
          left: "center",
          type: "scroll",
          show: true,
          data: ["黄岛滚筒", "天津波轮"]
        },
        tooltip: {},
        graphic: [
          {
            type: "text",
            left: "center",
            top: "center",
            style: {
              text: `总开动率\n 89% `,
              textAlign: "center",
              fill: "#000",
              width: 30,
              height: 30
            }
          }
        ],
        dataset: {
          source: [
            ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
            ["黄岛滚筒", 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
            ["天津波轮", 86.5, 92.1, 85.7, 83.1, 73.4, 55.1]
          ]
        },
        series: [
          {
            type: "pie",
            center: ["50%", "45%"],
            radius: ["30%", "60%"],
            label:{
              show: true,
              position: 'outside',
              formatter:function(params){
                return `${params.percent}% ${params.name}`
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              color: function(params) {
                //自定义颜色
                var colorList = ["#3770DA", "#FB7293"];
                return colorList[params.dataIndex];
              }
            }
          }
        ]
      };

View Code

柱状图

先看原型图：

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

var option = 
    tooltip: {
            trigger: "axis"
          },
          legend: {
            show: false
          },
          grid: {
            top: "15%",
            left: "3%",
            right: "12%",
            bottom: "3%",
            containLabel: true
          },
          color: ["#1A62E8"],
          calculable: true,
          xAxis: [
            {
              type: "category",
              name: "时间",
              data: Array.apply(null, Array(24)).map(function(item, i) {
                return i + 1;
              })
            }
          ],
          yAxis: [
            {
              splitLine: { show: false },
              type: "value",
              interval: 1000,
              name: "单位:台",
              splitArea: {
                show: true,
                areaStyle: {
                  opacity: 0.3,
                  color: [
                    // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //   {
                    //     offset: 0,
                    //     color: "#FFFFFF"
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: "#ff0500",
                    //   }
                    // ]),
                    // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //   {
                    //     offset: 0,
                    //     color: "#FFFFFF"
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: "#ff8400",
                    //   }
                    // ]),
                    // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //   {
                    //     offset: 0,
                    //     color: "#FFFFFF"
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: "#0fff01",
                    //   }
                    // ])
                    {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#FFFFFF" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#ff0500" // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                     {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#FFFFFF" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#0fff01" // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                    {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#FFFFFF" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#ff8400" // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                  ]
                }
              }
            }
          ],
          series: [
            {
              name: "黄岛滚筒",
              type: "bar",
              stack: "总量",
              data: [
                122.0,
                2234.9,
                732.0,
                2423.2,
                2325.6,
                762.7,
                1335.6,
                1262.2,
                332.6,
                220.0,
                62.4,
                33.3
              ],
              markPoint: {
                // data: [
                //   { type: "max", name: "最大值" },
                //   { type: "min", name: "最小值" }
                // ]
              },
              markLine: {
                data: [
                  {
                    type: "average",
                    name: "平均值",
                    lineStyle: { color: "#ff8400" }
                  },
                  {
                    type: "min",
                    name: "最小值",
                    lineStyle: { color: "#ff0500" }
                  },
                  {
                    type: "max",
                    name: "最大值",
                    lineStyle: { color: "#0fff01" }
                  }
                ],
                label: {
                  formatter: "{b}\n{c}/h"
                }
              },
            },
            {
              name: "天津波轮",
              type: "bar",
              stack: "总量",
              data: [
                2.6,
                5.9,
                9.0,
                26.4,
                28.7,
                70.7,
                175.6,
                182.2,
                48.7,
                18.8,
                6.0,
                2.3
              ],
              markPoint: {
                data: []
              },
              markLine: {}
            }
          ]
        };

View Code

效果就出来了。

折线图

折线图是面积渐变

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

<div ref="powerLineChart" style="height:220px;width: 100%;"></div>     
var _this = this;
_this.myChart = _this.$echarts.init(_this.$refs.powerLineChart);
 _this.myChart.showLoading();
var option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["总耗电", "生产耗电", "办公耗电"],
          bottom:0,
        },
        color: ["#FF6600", "#5256B9", "#53C7C7"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "13%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: Array.from(new Array(24), (item, index) => index + 1)
        },
        yAxis: {
          type: "value",
          name: "单位：度"
        },
        series: [
          {
            name: "总耗电",
            type: "line",
            symbol: "none",
            smooth: true,
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" }
                // {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
                data: [
                  {
                    type: "average",
                    name: "平均值",
                    lineStyle: { color: "#FF6600" }
                  },
                  {
                    type: "min",
                    name: "最小值",
                    lineStyle: { color: "#FE3824" }
                  },
                  {
                    type: "max",
                    name: "最大值",
                    lineStyle: { color: "#07B211" }
                  }
                ],
                label: {
                  formatter: "{b}\n{c}/h"
                }
              },
            itemStyle: {
              normal: {
                color: "#5256B9",
                shadowBlur: 8,
                shadowColor: "#25d5f0",
                borderColor: "#5256B9",
                borderWidth: 3,
                backgroundColor: "transparent"
              }
            },
            areaStyle: {
              normal: {
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#5256B9"
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF"
                  }
                ])
              }
            }
          },
          {
            name: "生产耗电",
            type: "line",
            symbol: "none",
            smooth: true,
            data: [
              220,
              182,
              191,
              234,
              290,
              330,
              310,
              150,
              232,
              201,
              154,
              190,
              330,
              90,
              230,
              210,
              120,
              132,
              101,
              123,
              32,
              23
            ],
            markPoint: {
              data: [
                // {type: 'max', name: '最大值'},
                // {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                // {type: 'average', name: '平均值'}
              ]
            },
            itemStyle: {
              normal: {
                color: "#FF6600",
                shadowBlur: 8,
                shadowColor: "#25d5f0",
                borderColor: "#FF6600",
                borderWidth: 3,
                backgroundColor: "transparent"
              }
            },
            areaStyle: {
              normal: {
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#FF6600"
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF"
                  }
                ])
              }
            }
          },
          {
            name: "办公耗电",
            type: "line",
            symbol: "none",
            smooth: true,
            data: [
              150,
              232,
              201,
              154,
              190,
              330,
              410,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              150,
              232,
              201,
              154,
              190,
              330,
              23,
              12
            ],
            markPoint: {
              data: [
                // {type: 'max', name: '最大值'},
                // {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                // {type: 'average', name: '平均值'}
              ]
            },
            itemStyle: {
              normal: {
                color: "#53C7C7",
                shadowBlur: 8,
                shadowColor: "#FFFFFF",
                borderColor: "#53C7C7",
                borderWidth: 3,
                backgroundColor: "transparent"
              }
            },
            areaStyle: {
              normal: {
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#53C7C7"
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF"
                  }
                ])
              }
            }
          }
        ]
   };
 _this.myChart.hideLoading();
 _this.myChart.setOption(option, true);
 window.addEventListener("resize", function() {
      _this.myChart.resize();
});

View Code

效果图：

桑基图

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

  var energy = {
        水: "#0055FF",
        电: "#FF6600",
        气: "#9BCF58",
        办公1: "#53C7C7",
        办公2: "#53C7C7",
        生产1: "#5256BA",
        生产2: "#5256BA",
        黄岛滚筒: "#3770DA",
        天津波轮: "#FB7293"
      };
      var tempData = [
        {
          source: "电",
          target: "黄岛滚筒",
          value: 5
        },
        {
          source: "电",
          target: "黄岛滚筒",
          value: 3
        },
        {
          source: "水",
          target: "黄岛滚筒",
          value: 8
        },
        {
          source: "水",
          target: "黄岛滚筒",
          value: 3
        },
        {
          source: "气",
          target: "黄岛滚筒",
          value: 1
        },
        {
          source: "气",
          target: "黄岛滚筒",
          value: 2
        },
        {
          source: "气",
          target: "黄岛滚筒",
          value: 8
        },
        {
          source: "黄岛滚筒",
          target: "办公1",
          value: 10
        },
        {
          source: "黄岛滚筒",
          target: "生产1",
          value: 8
        },
        {
          source: "电",
          target: "天津波轮",
          value: 8
        },
        {
          source: "电",
          target: "天津波轮",
          value: 4
        },
        {
          source: "水",
          target: "天津波轮",
          value: 8
        },
        {
          source: "水",
          target: "天津波轮",
          value: 2
        },
        {
          source: "气",
          target: "天津波轮",
          value: 7
        },
        {
          source: "气",
          target: "天津波轮",
          value: 5
        },
        {
          source: "天津波轮",
          target: "办公2",
          value: 20
        },
        {
          source: "气",
          target: "生产2",
          value: 13
        }
      ];
      //数据
      var data = [];
      var energylist = [];
      for (var key in energy) {
        energylist.push({ name: key, itemStyle: { color: energy[key] } });
      }
      for (var i = 0; i < tempData.length; i++) {
        var color = new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: energy[tempData[i].source]
          },
          {
            offset: 1,
            color: energy[tempData[i].target]
          }
        ]);
        data.push({
          source: tempData[i].source,
          target: tempData[i].target,
          value: tempData[i].value,
          lineStyle: {
            color: color
          }
        });
      }
      var option = {
        title: {
          text: "",
          top: "top",
          left: "35%"
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove"
        },
        series: [
          {
            type: "sankey",
            data: energylist,
            links: data,
            focusNodeAdjacency: "allEdges",
            itemStyle: {
              borderWidth: 1,
              color: "#1b6199",
              borderColor: "#fff"
            },
            lineStyle: {
              curveness: 0.5,
              opaenergy: 0.5
            }
          }
        ]
      };

View Code

效果图：

仪表盘

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

 mounted() {
    var _this = this;
    _this.myChart = _this.$echarts.init(_this.$refs.voltageGauge);
    _this.myChart.showLoading();
    var option = {
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
      },
      series: [
        {
          name: "电压",
          type: "gauge",
          center: ["20%", "55%"],
          max: 220,
          startAngle: 180,
          endAngle: -0,
          center: ["27%", "50%"], // 默认全局居中
          // radius: '35%',
          detail: { formatter: "{value}V" },
          data: [{ value: 170, name: "V" }],
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [
                  1,
                  new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0.7,
                      color: "#0055FF"
                    },
                    {
                      offset: 0.1,
                      color: "#01058A"
                    }
                  ])
                ]
              ]
            }
          }
        },
        {
          name: "电流",
          type: "gauge",
          center: ["20%", "55%"],
          max: 80,
          startAngle: 180,
          endAngle: -0,
          center: ["75%", "50%"], // 默认全局居中
          // radius: '35%',
          detail: { formatter: "{value}A" },
          data: [{ value: 36, name: "A" }],
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [
                  1,
                  new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0.1,
                      color: "#E7BCF3"
                    },
                    {
                      offset: 0.7,
                      color: "#E062AE"
                    }
                  ])
                ]
              ]
            }
          }
        }
      ]
    };
    setInterval(function() {
      option.series[0].data[0].value = (Math.random() * 220).toFixed(2) - 0;
      option.series[1].data[0].value = (Math.random() * 88).toFixed(2) - 0;
      _this.myChart.setOption(option, true);
    }, 2000);
    _this.myChart.hideLoading();
    _this.myChart.setOption(option, true);
    window.addEventListener("resize", function() {
      _this.myChart.resize();
    });
  }

View Code

效果图：

总结

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

 

posted on 2019-07-08 15:10 ichthyo-plu 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为ichthyo-plu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ichthyo-plu/p/11151325.html