首页 前端知识 Echarts 折线图实现一条折线显示不同颜色

Echarts 折线图实现一条折线显示不同颜色

2024-03-10 11:03:07 前端知识 前端哥 235 55 我要收藏

在echarts中,如果想要实现折线图前半部分为蓝色,后半部分为红色,怎么处理呢?

这里介绍一种方法,通过markLine图表标线搭配visualMap觉映射组件配合实现,具体代码如下:

    const charts1 = useRef();
    const time = [...];
    const data = [...];
    const option1 ={
        xAxis: {
            type: 'category',
            data: time
        },
        yAxis: {
            type: 'value',

        },
        visualMap: {
            type: "piecewise",
            show: false,
            dimension: 0,
            seriesIndex: 0,
            pieces: [
                {
                    gt: 0,
                    lt: 12,
                    color: "rgba(41,11,236,0.68)",//大于0小于12为蓝色
                },
                {
                    gt: 12,
                    color: "rgba(229,27,88,0.68)",//大于12区间为红色
                },
            ],
        },
        series: [
            {
                data: data,
                type: 'line',
                symbol: "none", //取消折线上的圆点
                color:'#1d36d2',
                markLine: {
                    silent: true,
                    symbol: ["none", "none"],
                    lineStyle: {
                        color: "#ccc",
                    },
                    animation: false, //关闭动画
                    label: {
                        show: false,
                    },
                    data: [
                        {
                            xAxis: 12,//在x轴12格处设置一条参考线
                        },
                    ],
                },
            },

        ]
    };
  
    useEffect(()=>{
        const chart1=echarts.init(charts1.current);
        chart1.setOption(option1)
    },[])

    return (
        <div className="App"}}>
             <div ref={charts1} style={{width:'100%',height:'100%'}}></div>
        </div>
    );

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3563.html
标签
评论
发布的文章

jQuery之宽高

2024-04-05 09:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!