需求

选择每条线的颜色、粗细绘制折线图。

解决

动态修改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即对当前折线对应的所有颜色一并修改。

包括折线颜色、宽度、数值点（圈圈）颜色、标注点（最大最小值）颜色、图例颜色。