<template> <div class="chart" :id="id"></div> </template> <script> import util from "@/helper/util.js"; import partten from "@/helper/partten.js"; import * as echarts from "echarts"; export default { name: "multiple-bar-chart", componentName: "multiple-bar-chart", props: { width: { type: String, default: "100%", }, height: { type: String, default: "13.889vh", }, // 传入数据 list: { type: Array, default: () => [ { title: "日发电量", yAxisIndex: 0, value: [ { text: "1日", value: 1, }, ], }, { title: "上网电量", yAxisIndex: 0, value: [ { text: "1日", value: 1, }, { text: "2日", value: 2, }, { text: "3日", value: 1, }, { text: "4日", value: 3, }, { text: "5日", value: 3, }, { text: "6日", value: 3, }, { text: "7日", value: 3, }, ], }, { title: "购网电量", yAxisIndex: 0, value: [ { text: "1日", value: 1, }, { text: "2日", value: 2, }, { text: "3日", value: 1, }, { text: "4日", value: 3, }, { text: "5日", value: 3, }, { text: "6日", value: 3, }, { text: "7日", value: 3, }, ], }, { title: "风速", yAxisIndex: 1, value: [ { text: "1日", value: 1, }, { text: "2日", value: 2, }, { text: "3日", value: 1, }, { text: "4日", value: 3, }, { text: "5日", value: 3, }, { text: "6日", value: 3, }, { text: "7日", value: 3, }, ], }, ], }, // 单位 units: { type: Array, default: () => ["(万KWh)", "(风速)"], }, // 显示 legend showLegend: { type: Boolean, default: true, }, // 颜色# color: { type: Array, default: () => [ // "#05bb4c", "#ba3237", "#e17e23", "#4b55ae", "#c531c7", "#ccf0d3", ], }, showAnimation: { type: Boolean, default: true, }, // 柱子最大宽度 barMaxWidth: { type: Number || String, default: 0, }, // 柱子间距 barGap: { type: Number || String, default: 0, }, }, data() { return { id: "", chart: null, firstAnimation: true, }; }, computed: { legend() { return this.list.map((t) => { return t.title; }); }, xdata() { let result = []; if (this.list && this.list.length > 0 && this.list[0].value.length > 0) { result = this.list[0].value.map((t) => { return t.text; }); } return result; }, ydata() { let result = []; this.units.forEach((value, index) => { let data = null; if (index == 0) { data = { type: "value", name: value, axisLabel: { formatter: "{value} ", fontSize: 12, textStyle: { color: this.$store.state.themeName === "dark" ? "rgb(116,124,128)" : "#000", }, }, //分格线 splitLine: { lineStyle: { color: this.$store.state.themeName === "dark" ? "#5a6162" : "#000", type: "dashed", }, }, }; } else { data = { type: "value", name: value, axisLabel: { formatter: "{value}", fontSize: 12, textStyle: { color: this.$store.state.themeName === "dark" ? "rgb(116,124,128)" : "#000", }, }, //分格线 splitLine: { show: false, }, }; } result.push(data); }); return result; }, series() { let result = []; if (this.list && this.list.length > 0) { this.list.forEach((value, index) => { let seriesItem = { name: value.title, type: "bar", barWidth: "8%", animation: this.firstAnimation && this.showAnimation, yAxisIndex: value.yAxisIndex, data: value.value.map((t) => { return t.value; }), }; if (this.barMaxWidth) { seriesItem.barMaxWidth = this.barMaxWidth; } else { seriesItem.barWidth = "8%"; } if (this.barGap) { seriesItem.barGap = this.barGap; } result.push(seriesItem); }); } return result; }, }, methods: { resize() { this.initChart(); }, initChart() { let chart = echarts.init(this.$el); let option = { color: this.color, tooltip: { trigger: "axis", backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)", borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000", textStyle: { color: this.$store.state.themeName === "dark" ? "#fff" : "#000", fontSize: 12, }, }, legend: { show: this.showLegend, data: this.legend, right: 56, icon: "ract", itemWidth: 8, itemHeight: 8, inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000", textStyle: { fontSize: 12, color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000", }, }, grid: { top: 32, left: 8, right: 8, bottom: 0, containLabel: true, }, xAxis: [ { type: "category", data: this.xdata, nameLocation: "center", axisPointer: { type: "shadow", }, axisLabel: { interval: 0, fontSize: 12, textStyle: { color: this.$store.state.themeName === "dark" ? "rgb(116,124,128)" : "#000", }, }, }, ], yAxis: this.ydata, series: this.series, }; chart.clear(); chart.setOption(option); this.resize = function () { chart.resize(); }; window.addEventListener("resize", this.resize); }, }, created() { this.$nextTick(() => { this.id = "pie-chart-" + util.newGUID(); }); }, mounted() { this.$nextTick(() => { this.$el.style.width = this.width; this.$el.style.height = this.height; this.initChart(); this.firstAnimation = false; }); }, updated() { this.$nextTick(() => { this.initChart(); }); }, unmounted() { window.removeEventListener("resize", this.resize); }, watch: { "$store.state.themeName"() { this.initChart(); }, }, }; </script> <style lang="less"> .chart { width: 100%; height: 100%; display: inline-block; } </style>