init

src/views/indexs/right-center.vue

@@ -0,0 +1,71 @@
+<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>