2022-4-6 前端達人
let myChart = this.$echarts.init(document.getElementById('plant-charts')); // 繪制圖表 myChart.setOption({ tooltip: { formatter: '{c}' //設(shè)置單位 }, //圖例樣式 legend: { data: ['寬帶情況', '數(shù)據(jù)量'], textStyle: {//圖例文字的樣式 color: '#fff', fontSize: 12, padding: [0, 20, 0, 0] } }, grid: { //設(shè)置圖標(biāo)距離父級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)中用數(shù)值表示顯示間隔，0為顯示所有，1為隔一個顯示一個，以此類推 textStyle: { //文字樣式 color: '#62799C', fontSize: '12' }, }, axisTick: { //y軸刻度線不顯示 show: false }, }, yAxis: { type: 'value', //show: false, axisLabel: { textStyle: { //文字樣式 color: '#62799C', fontSize: '12' }, }, // 控制網(wǎng)格線 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)' }]) } }, }] });
藍(lán)藍(lán)設(shè)計的小編 http://www.ocunn.cn
