ECharts柱状图双Y轴

柱状图双Y轴"/>

ECharts柱状图双Y轴

ECharts官方文档：/
ECharts 按需引入模块文档：.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}}
};

绘制出的表格形状