2022-4-6 前端達人
-
let myChart = this.$echarts.init(document.getElementById('plant-charts'));
-
// 繪制圖表
-
myChart.setOption({
-
tooltip: {
-
formatter: '{c}' //設置單位
-
},
-
//圖例樣式
-
legend: {
-
data: ['寬帶情況', '數據量'],
-
textStyle: {//圖例文字的樣式
-
color: '#fff',
-
fontSize: 12,
-
padding: [0, 20, 0, 0]
-
}
-
},
-
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)'
-
}])
-
}
-
},
-
}]
-
});
-
藍藍設計的小編 http://www.xintaizi.com