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

本文主要是介绍【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”

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

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

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

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

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：是鼠标停留在这个图标上的时候，显示的文字

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

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

在这里插入图片描述

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

<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>