【echarts】echarts图例支持自定义图标以及点击后方法调用

echarts官网：https://echarts.apache.org/handbook/zh/get-started/

以这个图为例，自带有图标和交互，但是如何在后面增加自定义图标呢？

首先我是在vue前端框架里面使用这个echarts的，会有一个vue-echarts工具，方便我们来使用它

因此首先需要下载echarts和vue-echarts的包，然后在main.js项目中引入它：

vue-echarts:https://gitcode.com/ecomfe/vue-echarts/blob/HEAD/README.zh-Hans.md?utm_source=csdn_github_accelerator&isLogin=1

我用的是版本是：

"echarts":"^5.5.0"

"vue-echarts":"^6.6.9"

javascript 复制代码

import ECharts from 'vue-echarts'
import 'echarts'
Vue.config.productionTip = false
// 全局注册组件（也可以使用局部注册）
Vue.component('v-chart', ECharts)

看上面的图列，可以知道我们要调整的部分就是这个部分toolbox

javascript 复制代码

toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },

在这个内部增加自定义的配置：

javascript 复制代码

toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            // saveAsImage: { show: true },
            // 自定义下载
            myTool: {
                show: true,
                title: '下载数据',
                icon: 'image://../icons/icon-download.png',
                onclick: this.myToolHandler
            },
          }
        },

其中icon: 'image://../icons/icon-download.png'就是指定自定义图标的地址:格式是image://+url

onclick方法是点击这个图标，对应相应方法

title：是鼠标停留在这个图标上的时候，显示的文字

javascript 复制代码

    myToolHandler() {
      alert("下载成功！")
    }

这样就实现了一个自定义图标，演示是这样的：

完整示例代码 ：基于https://echarts.apache.org/examples/zh/editor.html?c=mix-line-bar

javascript 复制代码

<template>
  <div>
    <!-- 图表 -->
    <v-chart ref="chart" :option="option" style="height: 400px"></v-chart>
  </div>
</template>
<script>
export default {
  name: "databoardMain",
  mounted() {
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            // saveAsImage: { show: true },
            // 自定义下载
            myTool: {
                show: true,
                title: '下载数据',
                icon: 'image://../icons/icon-download.png',
                onclick: this.myToolHandler
            },
          }
        },
        legend: {
          data: ["Evaporation", "Precipitation", "Temperature"]
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "Precipitation",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} ml"
            }
          },
          {
            type: "value",
            name: "Temperature",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} °C"
            }
          }
        ],
        series: [
          {
            name: "Evaporation",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " ml";
              }
            },
            data: []
          },
          {
            name: "Precipitation",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " ml";
              }
            },
            data: []
          },
          {
            name: "Temperature",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + " °C";
              }
            },
            data: []
          }
        ]
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      //初始化数据
      //data数据可以来自后台接口
      this.option.series[0].data = [11,22,11,23,12,22,11]
      this.option.series[1].data = [12,12,12,12,16,17,18];
      this.option.series[2].data = [11,11,12,21,22,25,15];
      this.option = { ...this.option };
    },
    handleResize() {
      this.$refs.chart.resize();
    },
    myToolHandler() {
      alert("下载成功！")
    }
  }
};
</script>