Echarts折線圖設置線條顏色及線條以下代碼示例
一、展示效果
二、設置折線顏色
在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, }, },
總結(jié)
到此這篇關(guān)于Echarts折線圖設置線條顏色及線條以下區(qū)域漸變顏色的文章就介紹到這了,更多相關(guān)Echarts折線圖設置線條顏色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實現(xiàn)一個可以兼容PC端和移動端的div拖動效果實例
這篇文章主要介紹了js實現(xiàn)一個可以兼容PC端和移動端的div拖動效果實例,具有一定的參考價值,有需要的可以了解一下。2016-12-12Layui table field初始化加載時進行隱藏的方法
今天小編就為大家分享一篇Layui table field初始化加載時進行隱藏的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09如何使用require.context實現(xiàn)優(yōu)雅的預加載
這篇文章主要介紹了使用require.context實現(xiàn)優(yōu)雅的預加載?,需要的朋友可以參考下2023-05-05JS/jQuery實現(xiàn)簡單的開關(guān)燈效果【案例】
這篇文章主要介紹了JS/jQuery實現(xiàn)簡單的開關(guān)燈效果,結(jié)合具體實例形式分析了javascript/jQuery事件響應及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-02-02