ECharts柱状图双Y轴

ECharts官方文档：https://echarts.baidu.com/
ECharts 按需引入模块文档：https://github.com/apache/incubator-echarts/blob/master/index.js

// 按需引入 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框、标题、legend组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend")

//全部引入
var echarts = require('echarts')

/* 
仓库state的中 Energy_percentum对象格式，(提取X轴和两个Y轴动态数据,组成对象Energy_percentum)

 Energy_percentum: {
    energy_saving: [1000, 2000, 2500, 3000, 3600, 2000, 800, 2500, 3000, 2500, 2500, 4500],
    percentage: [25, 35, 60, 50, 80, 30, 50, 52, 75, 20, 51, 30],
    month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  },
*/

<template>
    <div id="bottom_data_bar"></div>
</template>

export default {
  data() {
    return {
      Energy_percentum: {},
    };
  },
  methods: {
    initCharts() {
      this.chart = echarts.init(document.getElementById("bottom_data_bar"));//初始化echarts实例
      this.setOption(); 	//使用指定的配置项和数据显示图表。
    },
    
    setOption() {
      this.chart.setOption({
        grid: {
          left: "40",
          right: "50"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["月节能量", "节能百分比"],
          textStyle: {
            color: "#B3B6BD"
          }
        },
        xAxis: [
          {
            type: "category",
            //x轴显示及刻度颜色
            axisLabel: {
              show: true,
              textStyle: {
                color: "#B8BBC2"
              }
            },
            //x轴颜色及宽度
            axisLine: {
              lineStyle: {
                color: "#71747D",
                width: 1
              }
            },
            //x轴网格样式
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#626671"],
                width: 1,
                type: "solid"
              }
            },
            data: this.Energy_percentum.month   //x轴使用动态数据
          }
        ],
        yAxis: [
        //第一个Y轴配置
          {
            name: "月节能量(Kwh)",
            type: "value",
            // y轴显示及刻度颜色
            axisLabel: {
              show: true,
              textStyle: {
                color: "#B8BBC2"
              }
            },
            //y轴颜色及宽度
            axisLine: {
              lineStyle: {
                color: "#71747D",
                width: 1
              }
            }
          },
          
  		//第二Y轴配置（百分比形式）
          {
            name: "节能百分比",
            type: "value",
            min: 0,
            max: 100,
            axisLabel: {
              formatter: "{value} %"
            },
            //y轴颜色及宽度
            axisLine: {
              lineStyle: {
                color: "#71747D",
                width: 1
              }
            },
            //去除分割线
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "月节能量",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#57C181" //月节能量柱状图颜色
              }
            },
            data: this.Energy_percentum.energy_saving  	//第一个Y轴使用动态数据
          },
          {
            name: "节能百分比",
            type: "bar",
            yAxisIndex: 1,//选用那个坐标轴显示，默认为0	 	//第二个Y轴使用动态数据
            itemStyle: {
              normal: {
                color: "#2E9ED0" //节能百分比柱状图颜色
              }
            },
            data: this.Energy_percentum.percentage
          }
        ]
      });
    }
  },
  
  //因为 ECharts 初始化必须绑定 dom，所以我们只能在 vue 的 mounted 生命周期里进行初始化。
  mounted() {
    this.initCharts();
  },
  
  computed:{
  	//使用计算属性获取仓库Energy_percentum对象
    get_Energy_percentum(){
      return this.$store.state.Energy_percentum;
    }
  },
  
  watch:{
  	//监听仓库的Energy_percentum对象的值，保证该组件获取最新的值
    get_Energy_percentum(val){
      this.Energy_percentum = val;
    },
    
    //深度监听Energy_percentum对象，Energy_percentum数据一有变化就重新执行setOption函数，重绘表格
    Energy_percentum: {
      handler(newName, oldName) {
        this.setOption();
      },
      deep: true
    }
  }
};

绘制出的表格形状