From 9c803f20cc05395bac2d3386accfe230210c07dc Mon Sep 17 00:00:00 2001 From: Surpriseplus <845948745@qq.com> Date: 星期一, 19 十二月 2022 20:58:31 +0800 Subject: [PATCH] 1 --- src/components/echart45.vue | 65 +++++++++++++++++--------------- 1 files changed, 34 insertions(+), 31 deletions(-) diff --git a/src/components/echart45.vue b/src/components/echart45.vue index 56e7845..bfc654f 100644 --- a/src/components/echart45.vue +++ b/src/components/echart45.vue @@ -10,106 +10,109 @@ components: {}, data() { //杩欓噷瀛樻斁鏁版嵁 - return {}; + return { myChart }; }, mounted() { this.lineChart(); + this.$bus.$on('resizeEchart', (res) => { + this.myChart.resize(); + }); }, //鏂规硶闆嗗悎 methods: { lineChart() { let option = { title: { - text: "璧勯噾浣跨敤鍜岄绠楀姣�", + text: '璧勯噾浣跨敤鍜岄绠楀姣�', textStyle: { - color: "#fff", + color: '#fff', }, }, tooltip: { - trigger: "axis", + trigger: 'axis', axisPointer: { - type: "shadow", + type: 'shadow', }, }, legend: { - data: ["鍓╀綑閲戦", "宸蹭娇鐢ㄩ噾棰�", "棰勭畻閲戦"], + data: ['鍓╀綑閲戦', '宸蹭娇鐢ㄩ噾棰�', '棰勭畻閲戦'], }, grid: { - left: "3%", - right: "4%", - bottom: "3%", + left: '3%', + right: '4%', + bottom: '3%', containLabel: true, }, xAxis: [ { - type: "value", + type: 'value', axisLabel: { show: true, textStyle: { - color: "#fff", + color: '#fff', }, }, }, ], yAxis: [ { - type: "category", + type: 'category', axisTick: { show: false, }, - data: ["A2", "A3", "A4", "A5", "A6", "A7"], + data: ['A2', 'A3', 'A4', 'A5', 'A6', 'A7'], axisLabel: { show: true, textStyle: { - color: "#fff", + color: '#fff', }, }, }, ], series: [ { - name: "鍓╀綑", - type: "bar", + name: '鍓╀綑', + type: 'bar', label: { show: true, - position: "inside", + position: 'inside', }, emphasis: { - focus: "series", + focus: 'series', }, data: [1200, 1440, 240, 350, 300, 630], }, { - name: "棰勭畻閲戦锛堜竾鍏�)", - type: "bar", - stack: "Total", + name: '棰勭畻閲戦锛堜竾鍏�)', + type: 'bar', + stack: 'Total', label: { show: true, }, emphasis: { - focus: "series", + focus: 'series', }, data: [2000, 1800, 800, 1000, 600, 700], }, { - name: "宸蹭娇鐢ㄩ噾棰濓紙涓囧厓锛�", - type: "bar", - stack: "Total", + name: '宸蹭娇鐢ㄩ噾棰濓紙涓囧厓锛�', + type: 'bar', + stack: 'Total', label: { show: true, - position: "left", + position: 'left', }, emphasis: { - focus: "series", + focus: 'series', }, data: [-800, -360, -560, -650, -300, -70], }, ], }; - let myChart = this.$echarts.init(document.getElementById("echart45")); - myChart.setOption(option); - window.addEventListener("resize", function () { - myChart.resize(); + this.myChart = this.$echarts.init(document.getElementById('echart45')); + this.myChart.setOption(option); + window.addEventListener('resize', function () { + this.myChart.resize(); }); }, }, -- Gitblit v1.9.3