需求
选择每条线的颜色、粗细绘制折线图。
解决
动态修改option中对应的样式属性即可。查看echarts官方文档,进行了如下修改。
修改一(明显有问题可跳过,仅做记录。)
效果一:

配置一:
option = {
……
"series": [
{
……,
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
],
// 仅仅修改标注点颜色
itemStyle: {
color: '4EC43E'
}
},
// 仅仅修改折线段的颜色
"lineStyle": {
"color": "#4EC43E",
"width": 2
}
},
{
……,
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
],
// 仅仅修改标注点颜色
itemStyle: {
color: 'DE1919'
}
},
// 仅仅修改折线段的颜色
"lineStyle": {
"color": "#DE1919",
"width": 6
}
}
]
};
问题一:
很明显,拐点处、图例处的颜色都没改到。
修改二(正解)
效果二:

配置二:
option = {
……
"series": [
{
……,
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"itemStyle": {
"normal": {
"color": "#4EC43E",
"lineStyle": {
"color": "#4EC43E",
"width": 2
}
}
}
},
{
……,
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"itemStyle": {
"normal": {
"color": "#DE1919",
"lineStyle": {
"color": "#DE1919",
"width": 6
}
}
}
}
]
};
说明二:
设置series[i].itemStyle.normal即对当前折线对应的所有颜色一并修改。
包括折线颜色、宽度、数值点(圈圈)颜色、标注点(最大最小值)颜色、图例颜色。
本文介绍如何在Echarts中动态修改折线图的线条颜色、线宽、数值点颜色以及图例颜色。通过调整series.itemStyle.normal属性,实现包括拐点、图例在内的整体样式更新,确保样式一致。
480

被折叠的 条评论
为什么被折叠?



