Echarts折線圖實現(xiàn)一條折線顯示不同顏色的方法

更新時間：2024年02月17日 09:36:30 作者：阿琰a_

這篇文章主要給大家介紹了關于Echarts折線圖實現(xiàn)一條折線顯示不同顏色的相關資料,Echarts的折線圖可以通過設置series中的itemStyle屬性來改變折線的顏色,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

效果圖

在echarts中，如果想要實現(xiàn)折線圖前半部分為藍色，后半部分為紅色，怎么處理呢？

這里介紹一種方法，通過markLine圖表標線搭配visualMap覺映射組件配合實現(xiàn)，具體代碼如下：

    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區(qū)間為紅色
                },
            ],
        },
        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折線圖實現(xiàn)一條折線顯示不同顏色的文章就介紹到這了,更多相關Echarts折線圖顯示不同顏色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: