改變背景,字體,折線顏色,x,y軸顏色,title字體顏色,lenend字體顏色,y軸添加單位後的效果圖
原圖
代碼
js
mounted(){
this.powerChart = this.$echarts.init(document.getElementById("Echart"));
this.electricChart = this.$echarts.init(document.getElementById("Pchart"));
// 調用方法
this.drawChart();
},
// 折線圖
methods:{
drawChart(){
let option = {
// 背景圖顏色
backgroundColor:"#0E1F31",
title: {
text: '水 燃氣費走勢圖',
textStyle: {
fontWeight: 'normal',
color: '#A3FFFC' //標題顏色
},
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['水費','燃氣費'],
top:'9%',
textStyle: {
fontWeight: 'normal',
color: '#62B4BB' //legend顏色
},
},
grid: {
// top:'1%',
left: '5%',
right: '5%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['1月','2月','3月','4月','5月','6月','7月'],
// 改變x軸顏色
axisLine:{
lineStyle:{
color:'#2A5D75',
}
},
// 改變x軸字體顏色和大小
axisLabel: {
textStyle: {
color: '#62B4BB',
fontSize:'16'
},
},
}],
yAxis: [{
type: 'value',
// 改變y軸顏色
axisLine:{
lineStyle:{
color:'#2A5D75',
}
},
// 改變y軸字體顏色和大小
axisLabel: {
formatter: '{value} m³ ', // 給y軸添加單位
textStyle: {
color: '#62B4BB',
fontSize:'16',
},
},
}],
series: [
{
name:'水費',
type:'line',
stack: '總量',
data:[120, 132, 101, 134, 90, 230, 210],
itemStyle:{
normal:{
color:'#4e76b5' // 給折線添加顏色
},
},
},
{
name:'燃氣費',
type:'line',
stack: '總量',
data:[220, 182, 191, 234, 290, 330, 310]
}
]
};
//展示圖
this.electricChart.setOption(option_power);
}
}
html
<template>
<div style="height: 100%;">
<div id="Echart" class="Echar" :style="{width: '100%', height: '30%'}"></div>
</div>
</template>