<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>