vue + Echarts + 替换（自定义）图例（legend）icon图标 + 图例点击切换icon图标 + 修改折线图的圆点样式 + 线条颜色

vue + Echarts + 替换（自定义）图例（legend）icon图标 + 图例点击切换icon图标 + 修改折线图的圆点样式 + 线条颜色

整体效果图：

点击图例切换icon图标效果图：

html：

<template>
  <div>
    <div id="myChart"
         class="pie"></div>
  </div>
</template>

js：

<script>
import echarts from "echarts"; //引入echarts
export default {
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      let option = {
        title: {
          text: '季度展现趋势',
          textStyle: {
            color: '#8a9198',
            fontSize: 16,
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          /*
          官网文档：
          图例项的 icon。
          ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。 
          URL 为图片链接例如：
          'image://http://xxx.xxx.xxx/a/b.png'
          URL 为 dataURI 例如：
          'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
         
         注意：
         自定义图标
         icon:'image://' +'图片路径' (image:// 一定不能少)
         在vue项目中： icon: ('image://' + require("图片路径"))
         */

          // icon: 'circle',//ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          // data: ['直接访问', '邮件营销', '联盟广告'],
          data: [
            {
              name: '直接访问',
              icon: 'image://' + require("./img/circle_02.png"),
            },
            {
              name: '邮件营销',
              icon: 'image://' + require("./img/circle_01.png"),
            },
            {
              name: '联盟广告',
              icon: 'circle',
              icon: 'image://' + require("./img/circle_03.png"),
            }
          ],
          // 通过itemWidth和itemHeight来修改icon的大小。
          itemWidth: 16,
          itemHeight: 16,
          textStyle: {
            color: '#80878f',
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '直接访问',
          type: 'line',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210],
          color: '#ff5900',
          // 圆点样式 (官方文档有径向渐变样式，但不符合UI图，所有这里没有使用)
          symbol: 'circle',//拐点设置为实心
          symbolSize: 10,//拐点大小
          itemStyle: {
            color: '#3de6ae',//线条颜色
            normal: {
              color: '#ff5900',//拐点颜色
              borderColor: '#ffa372',//拐点边框颜色
              borderWidth: 3//拐点边框大小
            },
            emphasis: {
              color: '#ff5900',//hover拐点颜色定义
              borderWidth: 6//拐点边框大小
            }
          },
        },
        {
          name: '邮件营销',
          type: 'line',
          stack: '总量',
          data: [220, 182, 191, 234, 290, 330, 310],
          color: '#2c60e1',
          // 圆点样式
          symbol: 'circle',//拐点设置为实心
          symbolSize: 10,//拐点大小
          itemStyle: {
            color: '#3de6ae',//线条颜色
            normal: {
              color: '#2c60e1',//拐点颜色
              borderColor: '#97b2f6',//拐点边框颜色
              borderWidth: 3//拐点边框大小
            },
            emphasis: {
              color: '#2c60e1',//hover拐点颜色定义
              borderWidth: 6//拐点边框大小
            }
          },
        },
        {
          name: '联盟广告',
          type: 'line',
          stack: '总量',
          data: [150, 232, 201, 154, 190, 330, 410],
          color: '#00e59a',
          // 圆点样式
          symbol: 'circle',//拐点设置为实心
          symbolSize: 10,//拐点大小
          itemStyle: {
            color: '#3de6ae',//线条颜色
            normal: {
              color: '#00e59a',//拐点颜色
              borderColor: '#7df7cf',//拐点边框颜色
              borderWidth: 3//拐点边框大小
            },
            emphasis: {
              color: '#00e59a',//hover拐点颜色定义
              borderWidth: 6//拐点边框大小
            }
          },
        }]
      }
      //点击切换icon
      myChart.on('legendselectchanged', function (obj) {
        var selected = obj.selected;
        if (selected.直接访问) {
          option.legend.data[0].icon = 'image://' + require("./img/circle_02.png");
        } else {
          option.legend.data[0].icon = 'image://' + require("./img/circle_04.png");
        }
        if (selected.邮件营销) {
          option.legend.data[1].icon = 'image://' + require("./img/circle_01.png");
        } else {
          option.legend.data[1].icon = 'image://' + require("./img/circle_04.png");
        }
        if (selected.联盟广告) {
          option.legend.data[2].icon = 'image://' + require("./img/circle_03.png");
        } else {
          option.legend.data[2].icon = 'image://' + require("./img/circle_04.png");
        }
        myChart.setOption(option);
      })
      myChart.setOption(option)
    },

  },
  mounted () {
    this.drawLine();
  },
}
</script>

css：

<style lang="scss" scoped>
.pie {
  margin-top: 40px;
  height: 400px;
}
</style>

dataURL:

icon:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlFNDY4QUI4RjY2ODExRUE5MjM3RkQ2MjJBQkY1MTZGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlFNDY4QUI5RjY2ODExRUE5MjM3RkQ2MjJBQkY1MTZGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUU0NjhBQjZGNjY4MTFFQTkyMzdGRDYyMkFCRjUxNkYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUU0NjhBQjdGNjY4MTFFQTkyMzdGRDYyMkFCRjUxNkYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4LgOJSAAABGElEQVR42mL8f3gxAxowBWIXILYBYluo2GEgPgLEe4D4NLJiRjQD6oG4gQE/AMk3wjhMSBKbiNAMM2ATugEgE30ZiAe+MFeAvADy8ykU6Y8vGBiOr2RgeHIVwpfRZmCwDGdg4JdAN8iMBRpgCPDhOQPDWqArf35DiN07w8Dw9BoDQzBQXEASWbUbEzS0EeDEKlTNMAASA8mhAhsmpKiCAJizsYHHV9BFbJkYKARM0ESCAKAAwwVkddBFDjNBUxgCmIcyMLBzYWoGiYHkUMER7NEIiglQgMH8DLLZIgw9BsDRCEvKTUBcS6L3m4G4DhaIdUC8mQTNm6F6UPKCH9QlhEATVC0YsKBJgnLjFiB2xZGdd6NnZ4AAAwCFJkldpVkZCwAAAABJRU5ErkJggg==';
icon:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlFQ0ZBMUFCRjY2ODExRUE4RUE0QjA4REJENzhDRkVCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlFQ0ZBMUFDRjY2ODExRUE4RUE0QjA4REJENzhDRkVCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUVDRkExQTlGNjY4MTFFQThFQTRCMDhEQkQ3OENGRUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUVDRkExQUFGNjY4MTFFQThFQTRCMDhEQkQ3OENGRUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7N/uYwAAABNElEQVR42mKcs/8/AxowBWIXILYBYluo2GEgPgLEe4D4NLJiRjQD6oG4gQE/AMk3wjhMSBKbiNAMM2ATugEgE30ZiAe+MFewQP1chyz74dMfhiPnPjA8evYDzJeT4mCwMRJgEOBjQVYG0rOFBRpgcPD+42+GFdteMvz89Q8udufhN4bHz38wRHiJMwjysyIrd2OChjYcHD3/EUUzDIDEQHJowIYJKarAAOZsbODh0+/oQrZMDBQCJmgigQNQgOEC8tKc6EKHmaApDA6sDPkZ2NkwHQYSA8mhgSNM0OQJB0LAUAaFtoo8FwMbKxMYg9ggMSHUGACBXSzQtN0MxLUwUVBU+TiIEPI+SM9pJqREsZmEsNsMS3zInvUD4iYiNDdB1TLAkjJ6btwCxK44svNu9OwMEGAA3A9PdHvxpBQAAAAASUVORK5CYII=';
icon:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlGRDI3NjRCRjY2ODExRUE5NEYzRTkwNDZDNjExQjFFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlGRDI3NjRDRjY2ODExRUE5NEYzRTkwNDZDNjExQjFFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUZEMjc2NDlGNjY4MTFFQTk0RjNFOTA0NkM2MTFCMUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUZEMjc2NEFGNjY4MTFFQTk0RjNFOTA0NkM2MTFCMUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4+2ad2AAABNklEQVR42mJc+u8hAxowBWIXILYBYluo2GEgPgLEe4D4NLJiRjQD6oG4gQE/AMk3wjhMSBKbiNAMM2ATugEgE30ZiAe+MFeAvADy8ylk2Rd/vjGs+HyL4crPt2C+DrswQwSvGoMECxe6QWYs0ACDg+d/vjLUvT3B8O3fH7jY6R8vGa7+esvQJGzBIMnCjazcjQka2nCw8vNtFM0wABIDyaEBGyakqAIDmLOxgcs/36AL2TIxUAiYoIkEDkABhgvosougCx1mgqYwOAjjVWXgYmLB0AwSA8mhgSNM0OQJB1LAUAaFtimHOAMHIwsYg9ggMSnUGACBXSzQtN0MxLUwUVBUFQgaEPI+SM9pWCDWAfFmEsJuM1QPSl7wA+ImIjQ3QdWCAXpogXLjFiB2xZGdd6NnZ4AAAwDvXFHb248s6wAAAABJRU5ErkJggg==';
icon:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRFQjcxQjNBRjY2QjExRUFCRkJDQzg2RjY4RkQxMzk2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRFQjcxQjNCRjY2QjExRUFCRkJDQzg2RjY4RkQxMzk2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEVCNzFCMzhGNjZCMTFFQUJGQkNDODZGNjhGRDEzOTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEVCNzFCMzlGNjZCMTFFQUJGQkNDODZGNjhGRDEzOTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4lrlJdAAABIElEQVR42mK8fechAxowBWIXILYBYluo2GEgPgLEe4D4NLJiRjQD6oG4gQE/AMk3wjhMSBKbiNAMM2ATugEgE30ZiAe+MFeAvADy8ylk2c9fvjCcv3SF4cWr12C+hJgog6GeDgMvDw+6QWYs0ACDg0+fPzPs3HuA4dfv33Cxx0+fMbwEGubu7MDAx8uLrNyNCRracHDh8lUUzTAAEgPJoQEbJqSoAgOYs7GB5y9foQvZMjFQCJigiQQOQAGGC0iKi6ELHWaCpjA4MNDVZmBjZcXQDBIDyaGBI1ijERQToAB7AfWzBNBmkGa0GABHIywpNwFxLYnebwbiOlgg1gHxZhI0b4bqQckLflCXEAJNULVYcyMsO7viyM670bMzQIABAI5iXP+yHo5tAAAAAElFTkSuQmCC';