Echarts折線圖實(shí)現(xiàn)一條折線顯示不同顏色的方法
更新時(shí)間：2024年02月17日 09:36:30 作者：阿琰a_
這篇文章主要給大家介紹了關(guān)于Echarts折線圖實(shí)現(xiàn)一條折線顯示不同顏色的相關(guān)資料,Echarts的折線圖可以通過設(shè)置series中的itemStyle屬性來改變折線的顏色,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
效果圖
在echarts中，如果想要實(shí)現(xiàn)折線圖前半部分為藍(lán)色，后半部分為紅色，怎么處理呢？
這里介紹一種方法，通過markLine圖表標(biāo)線搭配visualMap覺映射組件配合實(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", //取消折線上的圓點(diǎn)
color:'#1d36d2',
markLine: {
silent: true,
symbol: ["none", "none"],
lineStyle: {
color: "#ccc",
},
animation: false, //關(guān)閉動(dòng)畫
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折線圖實(shí)現(xiàn)一條折線顯示不同顏色的文章就介紹到這了,更多相關(guān)Echarts折線圖顯示不同顏色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)猜數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片輪播效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片輪播效果，點(diǎn)擊下標(biāo)切換到該圖片上，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了JS與jQuery判斷文本框還剩多少字符可以輸入的方法,簡(jiǎn)單分析了js字符個(gè)數(shù)統(tǒng)計(jì)的方法,并給出了jQuery字符統(tǒng)計(jì)插件textlimit的相關(guān)使用方法示例,需要的朋友可以參考下2018-09-09
在進(jìn)入正題前，我們看一下瀏覽器對(duì)于鍵盤的一些默認(rèn)事件，這有助于我們用javascript截獲鍵盤事件。2009-12-12
這篇文章主要介紹了js文本框跑馬燈效果，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
JavaScript?雙位非運(yùn)算(~~?操作符)使用場(chǎng)景實(shí)例探索
本文為大家介紹JavaScript中雙位非運(yùn)算?~~，?~~?操作符是一個(gè)強(qiáng)大且經(jīng)常被忽視的特性，它提供了一種快速、簡(jiǎn)潔的方式來處理數(shù)字和執(zhí)行類型轉(zhuǎn)換，通?？梢员挥糜跀?shù)學(xué)計(jì)算和類型轉(zhuǎn)換，我們先了解一下?~~?的基本概念和它的一些應(yīng)用場(chǎng)景2024-01-01
這篇文章主要為大家詳細(xì)介紹了javascript拖拽應(yīng)用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
js保留兩位小數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法
JS數(shù)據(jù)格式化是在進(jìn)行web前端開發(fā)時(shí)常碰到的事情,特別是在數(shù)據(jù)類型為Float的數(shù)據(jù)就需要特殊處理,如保留兩位小數(shù)、小數(shù)點(diǎn)后的數(shù)據(jù)是否需要四舍五入等等,下面這篇文章主要給大家介紹了關(guān)于js保留兩位小數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05
使用JavaScript獲取當(dāng)前日期時(shí)間及其它操作
在 JavaScript 中,處理“當(dāng)前日期和時(shí)間”是非常常見的需求,本文為大家詳細(xì)介紹了JavaScript 獲取當(dāng)前日期時(shí)間及其它操作,包括格式化,加減時(shí)間,時(shí)間戳轉(zhuǎn)換等2025-08-08
下面小編就為大家分享一篇純js代碼生成可搜索選擇下拉列表的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01