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

这篇文章主要给大家介绍了关于Echarts折线图实现一条折线显示不同颜色的相关资料,Echarts的折线图可以通过设置series中的itemStyle属性来改变折线的颜色,文中通过代码介绍的非常详细,需要的朋友可以参考下

效果图文章源自设计学徒自学网-http://www.sx1c.com/48952.html

文章源自设计学徒自学网-http://www.sx1c.com/48952.html

在echarts中，如果想要实现折线图前半部分为蓝色，后半部分为红色，怎么处理呢？文章源自设计学徒自学网-http://www.sx1c.com/48952.html

这里介绍一种方法，通过markLine图表标线搭配visualMap觉映射组件配合实现，具体代码如下：文章源自设计学徒自学网-http://www.sx1c.com/48952.html

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>
);

到此这篇关于Echarts折线图实现一条折线显示不同颜色的文章就介绍到这了文章源自设计学徒自学网-http://www.sx1c.com/48952.html 文章源自设计学徒自学网-http://www.sx1c.com/48952.html