您当前的位置: 首页 >  ar

漏刻有时

暂无认证

  • 0浏览

    0关注

    717博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

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

漏刻有时 发布时间:2020-06-19 09:49:39 ,浏览量:0

在这里插入图片描述 实现如图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!

关注
打赏
1661217259
查看更多评论
立即登录/注册

微信扫码登录

0.0439s