toolbox里倒入SVG自定义图标,以path://的方式倒入的。用iconStyle在echarts在线编辑器里可以改变颜色,但是本地无效,echarts版本是3.8的。
配置项如下
var titleStyle = {
color: '#545963',
fontWeight: 'normal',
fontSize: 16,
}
var toolboxStyle = {
top: '6px',
right: '6px',
itemSize: 18,
feature: {
saveAsImage: {
icon: 'path://M162.22,183.33H33.7a20.06,20.06,0,0,1-20-20V34.81a20.06,20.06,0,0,1,20-20H162.22a20.06,20.06,0,0,1,20,20V163.33A20.06,20.06,0,0,1,162.22,183.33ZM54.82,44.7A18.16,18.16,0,1,0,73,62.86,18.16,18.16,0,0,0,54.82,44.7Zm79.51,138.63L89.64,139.7,64.33,115,13.7,163.33m168.52-40L140.33,83.67l-50.7,56'
}
},
iconStyle: {
borderColor: '#cdd4de',
}
}
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis'
},
title: {
text: '转评赞数',
textStyle: titleStyle,
left: '10',
top: '10',
},
legend: {
top: '10px',
right: '40px',
itemGap: 20,
itemWidth: 8,
itemHeight: 8,
icon: 'circle',
data: ['转发', '评论', '点赞']
},
toolbox: toolboxStyle,
grid: {
left: '3%',
right: '4%',
bottom: '5%',
containLabel: true
},
xAxis: [{
type: 'category',
axisLine: { //坐标轴轴线 默认 true,
show: false
},
axisTick: { //坐标轴刻度
show: false
},
axisLabel: { //坐标轴刻度标签
show: true,
//rotate: 30, //旋转角度
textStyle: {
color: '#545963'
}
},
boundaryGap: false,
data: ['5-1', '5-2', '5-3', '5-4', '5-5', '5-6', '5-7']
}],
yAxis: [{
type: 'value',
axisLine: { //坐标轴轴线 默认 true,
show: false
},
axisTick: { //坐标轴刻度
show: false
},
splitLine: { //坐标轴刻度
show: true,
lineStyle: {
color: '#ecf0f0',
width: 1,
type: 'dashed'
}
},
axisLabel: { //坐标轴刻度标签
show: true,
//rotate: 30, //旋转角度
textStyle: {
color: '#545963'
}
},
}],
series: [{
name: '转发',
type: 'line',
symbol: 'circle',
//symbol: 'emptyCircle',//圆圈
symbolSize: 8,
itemStyle: {
normal: {
color: '#7540ee'
}
},
lineStyle: {
normal: {
color: '#7540ee',
width: 2,
type: 'solid'
}
},
areaStyle: {
normal: {
color: 'rgba(0,0,0,0.5)',
opacity: 0
}
},
smooth: false,
data: [220, 332, 101, 134, 90, 230, 310]
},
{
name: '评论',
type: 'line',
symbol: 'circle',
//symbol: 'emptyCircle',//圆圈
symbolSize: 8,
itemStyle: {
normal: {
color: '#1e88e5'
}
},
lineStyle: {
normal: {
color: '#1e88e5',
width: 2,
type: 'solid'
}
},
areaStyle: {
normal: {
color: 'rgba(0,0,0,0.5)',
opacity: 0
}
},
smooth: false,
data: [420, 182, 191, 234, 290, 330, 110]
},
{
name: '点赞',
type: 'line',
symbol: 'circle',
//symbol: 'emptyCircle',//圆圈
symbolSize: 8,
itemStyle: {
normal: {
color: '#2dc76d'
}
},
lineStyle: {
normal: {
color: '#2dc76d',
width: 2,
type: 'solid'
}
},
areaStyle: {
normal: {
color: 'rgba(0,0,0,0.5)',
opacity: 0
}
},
smooth: false,
data: [320, 282, 391, 134, 190, 230, 210]
}
]
};