Echarts 折线图实现一条折线显示不同颜色-Toy模板网

这篇具有很好参考价值的文章主要介绍了Echarts 折线图实现一条折线显示不同颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Echarts 折线图实现一条折线显示不同颜色,echarts,前端,javascript

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

这里介绍一种方法，通过markLine图表标线搭配visualMap觉映射组件配合实现，具体代码如下：文章来源地址https://www.toymoban.com/news/detail-565278.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 折线图实现一条折线显示不同颜色的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！