Echarts折線圖實現(xiàn)一條折線顯示不同顏色的方法
更新時間：2024年02月17日 09:36:30 作者：阿琰a_
這篇文章主要給大家介紹了關(guān)于Echarts折線圖實現(xiàn)一條折線顯示不同顏色的相關(guān)資料,Echarts的折線圖可以通過設(shè)置series中的itemStyle屬性來改變折線的顏色,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
效果圖
在echarts中，如果想要實現(xiàn)折線圖前半部分為藍(lán)色，后半部分為紅色，怎么處理呢？
這里介紹一種方法，通過markLine圖表標(biāo)線搭配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為藍(lán)色
},
{
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, //關(guān)閉動畫
label: {
show: false,
},
data: [
{
xAxis: 12,//在x軸12格處設(shè)置一條參考線
},
],
},
},
]
};
useEffect(()=>{
const chart1=echarts.init(charts1.current);
chart1.setOption(option1)
},[])
return (
<div className="App"}}>
<div ref={charts1} style={{width:'100%',height:'100%'}}></div>
</div>
);總結(jié)
到此這篇關(guān)于Echarts折線圖實現(xiàn)一條折線顯示不同顏色的文章就介紹到這了,更多相關(guān)Echarts折線圖顯示不同顏色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本教程旨在實現(xiàn)lightBox時的樣式與行為分離，減少JS在各方面（全屏遮蔽、ie6中遮蔽select、雙向居中、高度自適應(yīng)內(nèi)容等）的工作。2009-07-07
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)秒表計時器功能，可以開始、暫停、清除，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
下面小編就為大家?guī)硪黄猨s字符串傳引用的兩種方式(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JavaScript 核心參考教程RegExp對象,學(xué)習(xí)正則表達式的朋友可以參考下。2009-10-10
這篇文章主要介紹了js簡單實現(xiàn)自動生成表格功能,結(jié)合實例形式分析了JavaScript針對數(shù)組元素遍歷與頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2020-06-06
JavaScript中將字符串轉(zhuǎn)換為數(shù)字的七種方法總結(jié)
在js的使用中往往伴隨著有格式帶來的問題,下面這篇文章主要給大家介紹了關(guān)于JavaScript中將字符串轉(zhuǎn)換為數(shù)字的七種方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap實現(xiàn)圖片輪播效果的具體代碼，對圖片輪播效果感興趣的小伙伴們可以參考一下2016-05-05
一般網(wǎng)頁的下方都會放置一個置頂按鈕, 尤其是頁面底部沒有導(dǎo)航的網(wǎng)頁, 這樣可以幫助訪客重新找到導(dǎo)航或者重溫一遍廣告 (想得真美).2011-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)前端界面導(dǎo)航欄下拉列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript中如何跳出forEach循環(huán)代碼示例
循環(huán)遍歷一個元素是開發(fā)中最常見的需求之一,下面這篇文章主要給大家介紹了關(guān)于JavaScript中如何跳出forEach循環(huán)的相關(guān)資料,文章通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06