国产精品亚洲综合一区在线观看,久久精品中文字幕一区,大香伊人久久精品一区二区

發(fā)表評(píng)論

A+

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

效果圖

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

這里介紹一種方法，通過(guò)markLine圖表標(biāo)線(xiàn)搭配visualMap覺(jué)映射組件配合實(shí)現(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為藍(lán)色
            },
            {
                gt: 12,
                color: "rgba(229,27,88,0.68)",//大于12區(qū)間為紅色
            },
        ],
    },
    series: [
        {
            data: data,
            type: 'line',
            symbol: "none", //取消折線(xiàn)上的圓點(diǎn)
            color:'#1d36d2',
            markLine: {
                silent: true,
                symbol: ["none", "none"],
                lineStyle: {
                    color: "#ccc",
                },
                animation: false, //關(guān)閉動(dòng)畫(huà)
                label: {
                    show: false,
                },
                data: [
                    {
                        xAxis: 12,//在x軸12格處設(shè)置一條參考線(xiàn)
                    },
                ],
            },
        },
 
    ]
};
 
useEffect(()=>{
    const chart1=echarts.init(charts1.current);
    chart1.setOption(option1)
},[])
 
return (
    <div className="App"}}>
         <div ref={charts1} style={{width:'100%',height:'100%'}}></div>
    </div>
);

到此這篇關(guān)于Echarts折線(xiàn)圖實(shí)現(xiàn)一條折線(xiàn)顯示不同顏色的文章就介紹到這了