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/echart41.vue | 67 +++++++++++++++++----------------
1 files changed, 35 insertions(+), 32 deletions(-)
diff --git a/src/components/echart41.vue b/src/components/echart41.vue
index 0e9c2c9..5b89940 100644
--- a/src/components/echart41.vue
+++ b/src/components/echart41.vue
@@ -10,75 +10,78 @@
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: {},
grid: {
- left: "0%",
- right: "4%",
- bottom: "0%",
+ left: '0%',
+ right: '4%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "value",
+ type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
yAxis: {
- type: "category",
+ type: 'category',
data: [
- "闂瑙ｆ瀽",
- "闇�姹傚弽棣�",
- "涓撻鏈嶅姟",
- "鐜板満鏀寔",
- "鐗堟湰鍗囩骇",
- "鎶�鏈煿璁�",
+ '闂瑙ｆ瀽',
+ '闇�姹傚弽棣�',
+ '涓撻鏈嶅姟',
+ '鐜板満鏀寔',
+ '鐗堟湰鍗囩骇',
+ '鎶�鏈煿璁�',
],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
series: [
{
- name: "椤圭洰鏈嶅姟鍒嗙被",
- type: "bar",
+ name: '椤圭洰鏈嶅姟鍒嗙被',
+ type: 'bar',
barWidth: 20,
data: [120, 45, 5, 15, 4, 12],
itemStyle: {
@@ -87,12 +90,12 @@
barBorderRadius: [0, 90, 90, 0],
color: (params) => {
var colorList = [
- ["#00FCFF", "#008297"],
- ["#0091FF", "#005EA4"],
- ["#901698", "#F157EE"],
- ["#40FBCB", "#009871"],
- ["#FF515A", "#FFDD53"],
- ["#6574E2", "#261164"],
+ ['#00FCFF', '#008297'],
+ ['#0091FF', '#005EA4'],
+ ['#901698', '#F157EE'],
+ ['#40FBCB', '#009871'],
+ ['#FF515A', '#FFDD53'],
+ ['#6574E2', '#261164'],
];
var colorItem = colorList[params.dataIndex];
return new this.$echarts.graphic.LinearGradient(
@@ -118,10 +121,10 @@
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart41"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart41'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
--
Gitblit v1.9.3