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