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/echart25.vue | 67 +++++++++++++++++---------------- 1 files changed, 35 insertions(+), 32 deletions(-) diff --git a/src/components/echart25.vue b/src/components/echart25.vue index fdf7d9b..8410821 100644 --- a/src/components/echart25.vue +++ b/src/components/echart25.vue @@ -10,64 +10,67 @@ 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: "item", - formatter: "{a} <br/>{b} : {c} ({d}%)", + trigger: 'item', + formatter: '{a} <br/>{b} : {c} ({d}%)', }, graphic: [ { - type: "text", - left: "center", - top: "40%", + type: 'text', + left: 'center', + top: '40%', style: { - fill: "#fff", - text: "鎬荤敤鎴烽噺", + fill: '#fff', + text: '鎬荤敤鎴烽噺', }, }, { - type: "text", - left: "center", - top: "50%", + type: 'text', + left: 'center', + top: '50%', z: 10, style: { - fill: "#fff", + fill: '#fff', - text: "400", - font: "30px Microsoft YaHei", + text: '400', + font: '30px Microsoft YaHei', }, }, ], grid: { - left: "3%", - right: "4%", - bottom: "3%", + left: '3%', + right: '4%', + bottom: '3%', // containLabel: true, }, series: [ { - name: "鐢ㄦ埛閲�", - type: "pie", - radius: ["40%", "70%"], + name: '鐢ㄦ埛閲�', + type: 'pie', + radius: ['40%', '70%'], labelLine: { normal: { length: 15, // 鎸囩ず绾垮搴� lineStyle: { - color: "#fff", // 鎸囩ず绾块鑹� + color: '#fff', // 鎸囩ず绾块鑹� }, }, }, @@ -76,33 +79,33 @@ // 鍚勫垎鍖虹殑鎻愮ず鍐呭 // params: 鍗充笅闈紶鍏ョ殑data鏁扮粍,閫氳繃鑷畾涔夊嚱鏁帮紝灞曠ず浣犳兂瑕佺殑鍐呭鍜屾牸寮� formatter: function (params) { - return params.name + "\n\n" + params.percent + "%"; + return params.name + '\n\n' + params.percent + '%'; }, textStyle: { // 鎻愮ず鏂囧瓧鐨勬牱寮� - color: "#fff", + color: '#fff', fontSize: 14, }, }, }, data: [ - { value: 280, name: "寰�骞寸敤鎴烽噺" }, - { value: 120, name: "浠婂勾鏂板鐢ㄦ埛閲�" }, + { value: 280, name: '寰�骞寸敤鎴烽噺' }, + { value: 120, name: '浠婂勾鏂板鐢ㄦ埛閲�' }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, - shadowColor: "rgba(0, 0, 0, 0.5)", + shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, }, ], }; - let myChart = this.$echarts.init(document.getElementById("echart25")); - myChart.setOption(option); - window.addEventListener("resize", function () { - myChart.resize(); + this.myChart = this.$echarts.init(document.getElementById('echart25')); + this.myChart.setOption(option); + window.addEventListener('resize', function () { + this.myChart.resize(); }); }, }, -- Gitblit v1.9.3