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