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
}
}
};
绘制出的表格形状
