Echarts渐变折线图的设置解决方案

在这里插入图片描述
实现如图Echarts渐变折线图的方式,提供两种解决方案:

1.series组件属性:

{
            type: 'line',
            name: "总收入",
            lineStyle: {
                normal: {
                    width: 3
                },
            },
            itemStyle: {
                "color": {
                    "type": "linear",
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [
                        {
                            "offset": 0,
                            "color": "#2c86e1"
                        },
                        {
                            "offset": 0.5,
                            "color": "#d4f170"
                        },
                        {
                            "offset": 1,
                            "color": "#ff943c"
                        }
                    ],
                    "globalCoord": false
                }
            },
            smooth: true,
        }

2.视觉映射组件:

 visualMap: {
        min: 0,
        max: 300,
        left: 'left',
        top: 'bottom',
        color: ["#2c86e1","#d4f170","#ff943c"],
        calculable: true
    },

必须注意series.data的取值范围在min,max之间。

Done!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章