javascript - vue-echarts-v3使用的過程中折線圖區域呈漸變色。
問題描述
這是我的圖表數據
我希望紅色部分是漸變色。我已經使用了visvisualMap的方法,并不能達到我想要的效果。當我使用new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: ’rgb(255, 158, 68)’}, { offset: 1, color: ’rgb(255, 70, 131)’}])。。。我找到的其中一種方法,。。但是不知道怎么獲取echarts對象,
由于不想在項目中引入過多的資源,所以引入zRender暫時不在考慮范圍之內。。。 求助希望解決vue-echarts-v3插件使用是,獲取new echarts.graphic.LinearGradient()的辦法
<IEcharts :option='bar' class='step_echarts'></IEcharts
import IEcharts from ’vue-echarts-v3’import ’echarts/lib/chart/line’
export defalut{data(){
return{ bar: { tooltip: {}, xAxis: {data: [’1泡’, ’2泡’, ’3泡’, ’4泡’, ’5泡’],axisTick:{ alignWithLabel:true} }, yAxis: {show:false }, series: [{name: ’Clouds’,type: ’line’,data: [5, 7, 13, 20, 30],areaStyle: {normal:{}} }]} }}
}}
問題解答
回答1:我隨便寫了三個顏色。
series: [{name: ’Clouds’,type: ’line’,data: [5, 7, 13, 20, 30],areaStyle: {normal:{}},itemStyle: {normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[ {offset: 0, color: ’red’}, {offset: 0.5, color: ’pink’}, {offset: 1, color: ’#ddd’}] )} }}]
樓上說的對,你要想要漸變,你就要給他設置圖例,告訴它從哪漸變到哪,要不然用的是默認的顏色
相關文章:
1. python 計算兩個時間相差的分鐘數,超過一天時計算不對2. javascript - 使用form進行頁面跳轉,但是很慢,如何加一個Loading?3. angular.js - 輸入郵箱地址之后, 如何使其自動在末尾添加分號?4. angular.js - angularjs 注入模塊報錯 很怪異... 求解惑5. javascript - JS 里面的 delete object.key 到底刪除了什么?6. javascript - ES6規范下 repeat 函數報錯 Invalid count value7. docker-compose中volumes的問題8. javascript - html5的data屬性怎么指定一個function函數呢?9. javascript - 后臺管理系統左側折疊導航欄數據較多,怎么樣直接通過搜索去定位到具體某一個菜單項位置,并展開當前菜單10. html5 - 為什么使使用vue cli 腳手架,post-css 沒有自動對css3屬性自動添加瀏覽器前綴呢?
