<!-- * @Author: zhp * @Date: 2024-05-23 15:50:44 * @LastEditTime: 2024-07-19 16:10:19 * @LastEditors: zhp * @Description: --> <template> <chart-container class="bar-chart-base"> <div class="legend"> <span v-for="(item,index) in legend" :key="index" class="legend-item" :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span> </div> <div ref="oeeChart" style="height:94%;width:100%"></div> </chart-container> </template> <script> import screenfull from "screenfull"; import ChartContainer from "../../../../components/ChartContainer.vue"; // import chartMixin from "@/mixins/chart.js"; import { debounce } from "@/utils/debounce"; import * as echarts from "echarts"; export default { name: "barChartBaseoee", components: { ChartContainer, }, // mixins: [chartMixin], props: { vHeight: { type: Number, default: 36, }, legend: { type: Array, required: true, }, xAxis: { type: Array, required: true, }, series: { type: Array, required: true, }, in: { type: String, default: "", }, }, data() { return { width: '100%', isFullscreen: false, actualOptions: null, options: { grid: { left: "5%", right: "0%", bottom: "3%", top: "15%", containLabel: true, }, tooltip: { trigger: "axis", axisPointer: { // type: "cross", crossStyle: { color: "rgba(237,237,237,0.5)", }, }, backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 extraCssText: 'padding:0;border-width:0', formatter: params => { console.log('params', params) var res = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${params[0].axisValueLabel}</span>`; for (var i = 0, l = params.length; i < l; i++) { let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' // console.log(item.color, color); res += "<br/>" + `${params[i].seriesType === "line" ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span> <span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span> <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>` : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span> <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>` }` + `<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`; } const htmlContent = ` <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> ${res} </div> `; return htmlContent; }, }, xAxis: { axisTick: { show: false, }, axisLine: { lineStyle: { color: "#4561AE", }, }, axisLabel: { color: "rgba(223,241,254,.8)", fontSize: 16, }, data: this.xAxis, }, yAxis: { name: "单位/%", nameTextStyle: { color: "rgba(223,241,254,.8)", fontSize: 16, }, axisTick: { show: false, }, axisLabel: { color: "rgba(223,241,254,.8)", fontSize: 16, }, axisLine: { show: true, lineStyle: { color: "#4561AE", }, }, splitLine: { lineStyle: { color: "#4561AE", }, }, }, series: [ { name: "", // this.series[0].name, type: "bar", barWidth: 16, itemStyle: { borderRadius: [10, 10, 0, 0], color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#12f7f1", // 0% 处的颜色 }, { offset: 0.35, color: "#12f7f177", // 100% 处的颜色 }, { offset: 0.75, color: "#12f7f133", // 100% 处的颜色 }, { offset: 1, color: "transparent", // 100% 处的颜色 }, ], global: false, // 缺省为 false }, }, data: [], // this.series[0].data, }, { name: "", // this.series[1].name, type: "bar", barWidth: 16, // tooltip: { // valueFormatter: function (value) { // return value + " ml"; // }, // }, itemStyle: { borderRadius: [10, 10, 0, 0], color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#57abf8", // 0% 处的颜色 }, { offset: 1, color: "#364BFE66", // 100% 处的颜色 }, ], global: false, // 缺省为 false }, }, data: [], // this.series[1].data, }, { name: "", // "2024年目标值", type: "line", lineStyle: { color: "#f3c000", }, itemStyle: { color: "#f3c000", }, // areaStyle: { // color: { // type: "linear", // x: 0, // y: 0, // x2: 0, // y2: 1, // colorStops: [ // { // offset: 0, // color: "#f3c000", // 0% 处的颜色 // }, // { // offset: 0.55, // color: "#f3c00033", // }, // { // offset: 1, // color: "transparent", // 100% 处的颜色 // }, // ], // global: false, // 缺省为 false // }, // }, data: [], // this.series[0].data, }, ], }, }; }, computed: { isOpen() { return this.$store.getters.sidebar.opened }, }, watch: { isOpen(val) { this.canvasReset() }, /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ isFullscreen(val) { // this.actualOptions.series.map((item) => { // item.barWidth = val ? 18 : 16; // }); // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // if (val === false && this.isOpen === true) { // console.log(val) // this.width = 97 + '%' // this.canvasReset() // } else if (val === false && this.isOpen === false) { // this.width = 100 + '%' // this.canvasReset() // } // this.actualOptions.series.map((item) => { // item.barWidth = val ? 18 : 16; // }); // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; this.initChart(this.options) this.canvasReset() }, series(val) { if (!val) { this.initChart(this.options); return; } console.log(val) // const actualOptions = JSON.parse(JSON.stringify(this.options)) this.options.series[0].data = val[0].data; this.options.series[0].name = val[0].name; this.options.series[1].data = val?.[1]?.data || []; this.options.series[1].name = val?.[1]?.name || ""; this.options.series[2].data = val?.[2]?.data || []; this.options.series[2].name = val?.[2]?.name || ""; // this.actualOptions = actualOptions; this.initChart(this.options); }, }, mounted() { // if (screenfull.isEnabled) { // screenfull.on("change", () => { // this.isFullscreen = screenfull.isFullscreen; // }); // } if (screenfull.isEnabled) { screenfull.on("change", () => { this.isFullscreen = screenfull.isFullscreen; }); } // this.actualOptions = this.options this.canvasReset(); window.addEventListener("resize", this.canvasReset); }, beforeDestroy() { if (this.chart) { this.chart.dispose(); } }, destroyed() { window.removeEventListener("resize", this.canvasReset); }, methods: { canvasReset() { debounce(() => { this.initChart(); }, 500)(); }, initChart() { if (this.chart) { this.chart.dispose(); } this.chart = echarts.init(this.$refs.oeeChart); this.chart.setOption(this.options); }, }, }; </script> <style scoped lang="scss"> .bar-chart-base { // position: relative; .legend { position: absolute; top: 5.2vh; right: 1vw; } .legend-item { position: relative; // font-size: 12px; margin-right:1.3vw; &::before { content: ""; display: inline-block; width: 0.531vw; height: 0.531vw; background-color: #ccc; border-radius: 2px; margin-right: 0.22vw; } } .legend-item:nth-child(1) { margin-left: 1vw; } .legend-item:nth-child(2):before { background-color: #12f7f1; } .legend-item:nth-child(3):before { background-color: #58adfa; } .legend-item:nth-child(1):before { // width: 12px; // height: 2px; width: 1vw; height: 0.1064vw; background-color: #f3c000; position: absolute; top: 50%; // left: -16px; left: -1.3vw; transform: translateY(-50%); } .legend-item:nth-child(1):after { background-color: #f3c000; content: ""; display: inline-block; position: absolute; // width: 6px; // height: 6px; width: 0.3191vw; height: 0.3191vw; border-radius: 100%; top: 50%; left: -1.13vw; // left: -16px; transform: translateY(-50%) translateX(50%); } } </style>