echarts折线图上需要自定义工具按钮,实现如下:
var option = { title: { text: "pv" }, tooltip: { trigger: "axis" }, legend: { "60%", fontSize: 10, textStyle: { fontSize: 10 }, data: legend//你的数据 }, toolbox: { feature: { myTool2: {//自定义工具按钮只能以 my 开头 show: true, title: "放大", iconStyle: { borderColor: "#39f" }, icon: "M1014.237213 1013.761259a28.517906 28.517906 0 0 1-22.344547 10.118285h-287.979654a32.011123 32.011123 0 0 1 0-63.962019l210.345905 0.963647-345.105808-345.135922 45.201031-45.261259 345.527403 345.527403v-212.062399a31.981009 31.981009 0 1 1 63.962019 0L1023.90379 990.965003c0 8.973956-3.764243 16.984265-9.666577 22.796256z m-22.344547-661.753938a31.981009 31.981009 0 0 1-32.011123-32.011123l1.023874-210.345904-345.196149 345.105807-45.201032-45.261259L915.975411 64.027667h-212.062399a32.011123 32.011123 0 0 1 0-64.022246h287.076236c8.913728 0 16.984265 3.764243 22.796256 9.666576a28.608248 28.608248 0 0 1 10.058058 22.344547v287.979654c0 17.676886-14.334238 32.011123-31.950896 32.011123z m-582.373579 101.393653L63.991685 107.873571v212.122627a32.011123 32.011123 0 1 1-63.962019 0V32.919962C0.029666 24.006235 3.733681 15.935697 9.636014 10.123706A28.578134 28.578134 0 0 1 32.040789 0.005421h287.919427a32.011123 32.011123 0 0 1 0 64.022246l-210.345905-1.023874 345.166036 345.196149-45.26126 45.201032zM32.040789 671.937871c17.616658 0 31.950895 14.334238 31.950896 32.011124l-0.963647 210.345904 345.135922-345.166035 45.261259 45.261259L107.897816 959.917525h212.0624a31.981009 31.981009 0 1 1 0 63.962019H32.944208c-8.973956 0-16.984265-3.704015-22.796257-9.606348A28.668475 28.668475 0 0 1 0.029666 991.868421v-287.919426c0-17.676886 14.334238-32.011123 32.011123-32.011124z", onclick: function(par) { console.log(par); } }, saveAsImage: {} } }, xAxis: { type: "category", boundaryGap: false, data: dateList,//你的横坐标数据 axisLabel: { textStyle: { fontSize: 12 } } }, grid: { left: "16%", //因旋转导致名字太长的类目造成遮蔽,可以配合这两个属性 bottom: "12%" // 分别表示:距离左边距和底部的距离,具体数值按实际情况调整 }, yAxis: { type: "value", min: 0, max: 0, name: "", splitNumber: 6, axisLabel: { show: true, textStyle: { // color: '#c3dbff', //更改坐标轴文字颜色 fontSize: 12 }, grid: { left: "50%", bottom: "35%" } } }, series: series//你的数据 };
其中option.toolbox.feature.myTool2.icon是图标svg绘制路径,可以在iconfont中获取,方法如下:
(1)图标加入购物车,购物车中下载素材
(2)选择导出svg
(3)得到path路径
最后上效果图: