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/echart24.vue | 51 +++++++++++++++++++++++++++------------------------ 1 files changed, 27 insertions(+), 24 deletions(-) diff --git a/src/components/echart24.vue b/src/components/echart24.vue index 53ad639..1911204 100644 --- a/src/components/echart24.vue +++ b/src/components/echart24.vue @@ -10,27 +10,30 @@ components: {}, data() { //杩欓噷瀛樻斁鏁版嵁 - return {}; + return { myChart }; }, mounted() { this.lineChart(); + this.$bus.$on('resizeEchart', (res) => { + this.myChart.resize(); + }); }, //鏂规硶闆嗗悎 methods: { lineChart() { let option = { title: { - text: "1-12鏈堟暟鎹洿鏂伴噺", + text: '1-12鏈堟暟鎹洿鏂伴噺', textStyle: { - color: "#fff", + color: '#fff', }, }, tooltip: { - trigger: "axis", + trigger: 'axis', axisPointer: { - type: "cross", + type: 'cross', label: { - backgroundColor: "#FFFFFF", + backgroundColor: '#FFFFFF', }, }, }, @@ -43,25 +46,25 @@ }, }, grid: { - left: "3%", - right: "4%", - bottom: "3%", + left: '3%', + right: '4%', + bottom: '3%', containLabel: true, }, xAxis: [ { axisLine: { lineStyle: { - color: "#ccc", + color: '#ccc', }, }, axisLabel: { show: true, textStyle: { - color: "#fff", + color: '#fff', }, }, - type: "category", + type: 'category', boundaryGap: false, data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], }, @@ -70,39 +73,39 @@ { axisLine: { lineStyle: { - color: "#ccc", + color: '#ccc', }, }, axisLabel: { show: true, textStyle: { - color: "#fff", + color: '#fff', }, }, - type: "value", + type: 'value', boundaryGap: false, }, ], series: [ { - name: "澧為噺", - type: "line", - stack: "Total", + name: '澧為噺', + type: 'line', + stack: 'Total', areaStyle: { - color: "#8F595A", + color: '#8F595A', opacity: 0.5, }, emphasis: { - focus: "series", + focus: 'series', }, data: [200, 300, 100, 500, 2000, 500, 200, 400, 100, 100, 80, 300], }, ], }; - let myChart = this.$echarts.init(document.getElementById("echart24")); - myChart.setOption(option); - window.addEventListener("resize", function () { - myChart.resize(); + this.myChart = this.$echarts.init(document.getElementById('echart24')); + this.myChart.setOption(option); + window.addEventListener('resize', function () { + this.myChart.resize(); }); }, }, -- Gitblit v1.9.3