Echarts折線(xiàn)圖設(shè)置線(xiàn)條顏色及線(xiàn)條以下代碼示例
更新時(shí)間：2024年02月17日 09:48:38 作者：小任同學(xué)`
最近項(xiàng)目需要,一直在使用Echarts視圖,現(xiàn)在遇到一個(gè)要修改echarts折線(xiàn)圖顏色的需求,下面這篇文章主要給大家介紹了關(guān)于Echarts折線(xiàn)圖設(shè)置線(xiàn)條顏色及線(xiàn)條以下區(qū)域漸變顏色的相關(guān)資料,需要的朋友可以參考下
一、展示效果
二、設(shè)置折線(xiàn)顏色
在series中，設(shè)置lineStyle屬性。
lineStyle: {
color: '#556FFD'
},三、設(shè)置折線(xiàn)拐點(diǎn)大小
在series中使用symbol屬性、symbolSize屬性
symbol: 'circle', // 拐點(diǎn)的形狀 symbolSize: 6, // 拐點(diǎn)大小
三、設(shè)置折線(xiàn)拐點(diǎn)顏色（hover折現(xiàn)點(diǎn)顏色）
在series中，使用itemStyle屬性、emphasis屬性。
itemStyle: {
// 設(shè)置線(xiàn)條上點(diǎn)的顏色（和圖例的顏色）
normal: {
color: '#556FFD',
},
},
emphasis: {
// 鼠標(biāo)hover上去的時(shí)候，拐點(diǎn)的顏色和樣式
itemStyle: {
color: '#556FFD', // 顏色
borderColor: '#556FFD', // 圖形的描邊顏色
borderWidth: 1 // 描邊的線(xiàn)寬
}
},四、設(shè)置折線(xiàn)漸變顏色
在series中，使用areaStyle屬性。
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 漸變顏色
{
offset: 0,
color: 'rgba(85,111,253,0.50)',
},
{
offset: 1,
color: 'rgba(85,111,253,0.00)',
},
],
global: false,
},
},總結(jié)
到此這篇關(guān)于Echarts折線(xiàn)圖設(shè)置線(xiàn)條顏色及線(xiàn)條以下區(qū)域漸變顏色的文章就介紹到這了,更多相關(guān)Echarts折線(xiàn)圖設(shè)置線(xiàn)條顏色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js實(shí)現(xiàn)一個(gè)可以兼容PC端和移動(dòng)端的div拖動(dòng)效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)一個(gè)可以兼容PC端和移動(dòng)端的div拖動(dòng)效果實(shí)例，具有一定的參考價(jià)值，有需要的可以了解一下。2016-12-12
JS獲取節(jié)點(diǎn)的兄弟,父級(jí),子級(jí)元素的方法
本篇文章主要是對(duì)JS獲取節(jié)點(diǎn)的兄弟,父級(jí),子級(jí)元素的方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
Layui table field初始化加載時(shí)進(jìn)行隱藏的方法
今天小編就為大家分享一篇Layui table field初始化加載時(shí)進(jìn)行隱藏的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
本文為大家詳細(xì)介紹下js中自動(dòng)清除ie緩存的幾種方法，大家可以根據(jù)自己的需求自由選擇適合自己的，希望對(duì)大家學(xué)習(xí)js有所幫助2013-07-07
如何使用require.context實(shí)現(xiàn)優(yōu)雅的預(yù)加載
這篇文章主要介紹了使用require.context實(shí)現(xiàn)優(yōu)雅的預(yù)加載?,需要的朋友可以參考下2023-05-05
js實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器，可拖動(dòng)進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
為了減輕后臺(tái)壓力，可以利用JavaScript在表單提交前對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證，本文整理了常用的幾種方式，有需求的朋友可以參考下2013-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制圓弧與圓形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了js原型和繼承，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JS/jQuery實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)燈效果【案例】
這篇文章主要介紹了JS/jQuery實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)燈效果,結(jié)合具體實(shí)例形式分析了javascript/jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02