echarts折線圖背景漸變以及常用配置項
阿新 • • 發佈:2019-01-03
let myChart = this.$echarts.init(document.getElementById('plant-charts')); // 繪製圖表 myChart.setOption({ tooltip: { formatter: '{c}' //設定單位 }, grid: { //設定圖示距離父級div的間距 top: "10", left: "0", right: "15", bottom: "10", containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: ['2015','2016','2017','2018','2019','2020','2021'], axisLabel: { interval: '0', //類目軸(category)中用數值表示顯示間隔,0為顯示所有,1為隔一個顯示一個,以此類推 textStyle: { //文字樣式 color: '#62799C', fontSize: '12' }, }, axisTick: { //y軸刻度線不顯示 show: false }, }, yAxis: { type: 'value', //show: false, axisLabel: { textStyle: { //文字樣式 color: '#62799C', fontSize: '12' }, }, // 控制網格線 splitLine: { // 改變軸線顏色 lineStyle: { color: '#2a2a2d' } }, axisTick: { //y軸刻度線 show: false }, }, series: [{ data: [5000,6000,7000,4400,3200,4500,6800], type: 'line', itemStyle: { normal: { color: 'rgba(62,139,222,1)'//線顏色 } }, areaStyle: { normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折線圖顏色漸變 offset: 0, color: 'rgba(62,139,222,0.6)' }, { offset: 1, color: 'rgba(62,139,222,0.01)' }]) } }, }] });