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/echart42.vue | 73 +++++++++++++++++++-----------------
1 files changed, 38 insertions(+), 35 deletions(-)
diff --git a/src/components/echart42.vue b/src/components/echart42.vue
index 99d9341..2fed85c 100644
--- a/src/components/echart42.vue
+++ b/src/components/echart42.vue
@@ -10,21 +10,24 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let dataAxis = [
- "涓縿涓滅嚎绠￠亾宸ョ▼鍗楁",
- "涓縿涓滅嚎绠￠亾宸ョ▼涓",
- "骞垮窞绔�",
- "鍞愬北LNG",
- "鏂扮枂杩炴湪娌佺珯鍦�",
- "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�",
+ '涓縿涓滅嚎绠￠亾宸ョ▼鍗楁',
+ '涓縿涓滅嚎绠￠亾宸ョ▼涓',
+ '骞垮窞绔�',
+ '鍞愬北LNG',
+ '鏂扮枂杩炴湪娌佺珯鍦�',
+ '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�',
];
// prettier-ignore
let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1];
@@ -35,33 +38,33 @@
}
let option = {
title: {
- text: "椤圭洰瀹屾垚杩涘害",
+ text: '椤圭洰瀹屾垚杩涘害',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
grid: {
- left: "0%",
- right: "0%",
- bottom: "0%",
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "category",
+ type: 'category',
data: dataAxis,
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
formatter: function (params) {
- var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -72,7 +75,7 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -81,7 +84,7 @@
tempStr = params.substring(start, paramsNameNumber);
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + "\n";
+ tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
@@ -105,32 +108,32 @@
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
dataZoom: [
{
- type: "inside",
+ type: 'inside',
},
],
series: [
{
- type: "bar",
+ type: 'bar',
showBackground: true,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#83bff6" },
- { offset: 0.5, color: "#188df0" },
- { offset: 1, color: "#188df0" },
+ { offset: 0, color: '#83bff6' },
+ { offset: 0.5, color: '#188df0' },
+ { offset: 1, color: '#188df0' },
]),
},
emphasis: {
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#2378f7" },
- { offset: 0.7, color: "#2378f7" },
- { offset: 1, color: "#83bff6" },
+ { offset: 0, color: '#2378f7' },
+ { offset: 0.7, color: '#2378f7' },
+ { offset: 1, color: '#83bff6' },
]),
},
},
@@ -139,11 +142,11 @@
],
};
const zoomSize = 6;
- let myChart = this.$echarts.init(document.getElementById("echart42"));
- myChart.on("click", function (params) {
+ this.myChart = this.$echarts.init(document.getElementById('echart42'));
+ this.myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
- myChart.dispatchAction({
- type: "dataZoom",
+ this.myChart.dispatchAction({
+ type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue:
dataAxis[
@@ -152,9 +155,9 @@
});
});
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
--
Gitblit v1.9.3