71 lines
1.7 KiB
Vue
71 lines
1.7 KiB
Vue
<template>
|
||
<div ref="chart" style="width: 600px; height: 350px;margin-left: -10%;margin-top: -10%;"></div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
|
||
export default {
|
||
name: 'BarChart',
|
||
mounted() {
|
||
this.initChart();
|
||
},
|
||
methods: {
|
||
initChart() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
const myChart = echarts.init(this.$refs.chart);
|
||
// 指定图表的配置项和数据
|
||
|
||
const option = {
|
||
grid:{
|
||
left:'14%',
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||
axisLabel: {
|
||
color: 'white'
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: 'white',
|
||
formatter: '{value}kg'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#3399FF'
|
||
}
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis' ,
|
||
formatter: (params) => {
|
||
console.log(params)
|
||
return `减碳量：${params[0].value}kg`;
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: [120, 200, 150, 80, 70, 110, 30, 0, 0, 0, 0, 0],
|
||
type: 'bar',
|
||
itemStyle: {
|
||
// 使用线性渐变填充颜色
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#6a99f8' // 起始颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#0b2149' // 结束颜色
|
||
}])
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
}
|
||
}
|
||
};
|
||
</script> |