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/echart43.vue | 73 +++++++++++++++++++-----------------
1 files changed, 38 insertions(+), 35 deletions(-)
diff --git a/src/components/echart43.vue b/src/components/echart43.vue
index 8e9e2c2..7aa3926 100644
--- a/src/components/echart43.vue
+++ b/src/components/echart43.vue
@@ -8,21 +8,21 @@
export default {
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
//鏂规硶闆嗗悎
methods: {
gaugeChart1() {
- var legendData = ["浜哄憳", "鍙樻洿鍚庝汉鍛�"]; //鍥句緥
+ var legendData = ['浜哄憳', '鍙樻洿鍚庝汉鍛�']; //鍥句緥
var indicator = [
- { name: "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�", max: 80 },
- { name: "鍞愬北LNG", max: 80 },
- { name: "涓縿涓滅嚎绠￠亾宸ョ▼鍗楁", max: 160 },
+ { name: '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�', max: 80 },
+ { name: '鍞愬北LNG', max: 80 },
+ { name: '涓縿涓滅嚎绠￠亾宸ョ▼鍗楁', max: 160 },
- { name: "涓縿涓滅嚎绠￠亾宸ョ▼涓", max: 100 },
- { name: "鏂扮枂杩炴湪娌佺珯鍦�", max: 40 },
- { name: "骞垮窞绔�", max: 40 },
+ { name: '涓縿涓滅嚎绠￠亾宸ョ▼涓', max: 100 },
+ { name: '鏂扮枂杩炴湪娌佺珯鍦�', max: 40 },
+ { name: '骞垮窞绔�', max: 40 },
];
var dataArr = [
{
@@ -31,11 +31,11 @@
itemStyle: {
normal: {
lineStyle: {
- color: "#4A99FF",
+ color: '#4A99FF',
// shadowColor: '#4A99FF',
// shadowBlur: 10,
},
- shadowColor: "#4A99FF",
+ shadowColor: '#4A99FF',
shadowBlur: 10,
},
},
@@ -43,7 +43,7 @@
normal: {
// 鍗曢」鍖哄煙濉厖鏍峰紡
color: {
- type: "linear",
+ type: 'linear',
x: 0, //鍙�
y: 0, //涓�
x2: 1, //宸�
@@ -51,15 +51,15 @@
colorStops: [
{
offset: 0,
- color: "#4A99FF",
+ color: '#4A99FF',
},
{
offset: 0.5,
- color: "rgba(0,0,0,0)",
+ color: 'rgba(0,0,0,0)',
},
{
offset: 1,
- color: "#4A99FF",
+ color: '#4A99FF',
},
],
globalCoord: false,
@@ -81,11 +81,11 @@
itemStyle: {
normal: {
lineStyle: {
- color: "#4BFFFC",
+ color: '#4BFFFC',
// shadowColor: '#4BFFFC',
// shadowBlur: 10,
},
- shadowColor: "#4BFFFC",
+ shadowColor: '#4BFFFC',
shadowBlur: 10,
},
},
@@ -93,7 +93,7 @@
normal: {
// 鍗曢」鍖哄煙濉厖鏍峰紡
color: {
- type: "linear",
+ type: 'linear',
x: 0, //鍙�
y: 0, //涓�
x2: 1, //宸�
@@ -101,15 +101,15 @@
colorStops: [
{
offset: 0,
- color: "#4BFFFC",
+ color: '#4BFFFC',
},
{
offset: 0.5,
- color: "rgba(0,0,0,0)",
+ color: 'rgba(0,0,0,0)',
},
{
offset: 1,
- color: "#4BFFFC",
+ color: '#4BFFFC',
},
],
globalCoord: false,
@@ -126,14 +126,14 @@
},
},
];
- var colorArr = ["#4A99FF", "#4BFFFC"]; //棰滆壊
+ var colorArr = ['#4A99FF', '#4BFFFC']; //棰滆壊
let option = {
title: {
// show: false,
- text: "浜哄憳鍙樺姩",
+ text: '浜哄憳鍙樺姩',
// x: "4%",
textStyle: {
- color: "#fff",
+ color: '#fff',
// fontSize: "22",
},
// subtextStyle: {
@@ -148,8 +148,8 @@
color: colorArr,
legend: {
- orient: "vertical",
- icon: "circle", //鍥句緥褰㈢姸
+ orient: 'vertical',
+ icon: 'circle', //鍥句緥褰㈢姸
data: legendData,
top: 0,
right: 0,
@@ -158,14 +158,14 @@
itemGap: 21, // 鍥句緥姣忛」涔嬮棿鐨勯棿闅斻�俒 default: 10 ]妯悜甯冨眬鏃朵负姘村钩闂撮殧锛岀旱鍚戝竷灞�鏃朵负绾靛悜闂撮殧銆�
textStyle: {
fontSize: 12,
- color: "#00E4FF",
+ color: '#00E4FF',
},
},
radar: {
// shape: 'circle',
name: {
textStyle: {
- color: "#fff",
+ color: '#fff',
fontSize: 12,
},
},
@@ -180,25 +180,25 @@
show: true,
areaStyle: {
// 鍒嗛殧鍖哄煙鐨勬牱寮忚缃��
- color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
+ color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
},
},
axisLine: {
//鎸囧悜澶栧湀鏂囨湰鐨勫垎闅旂嚎鏍峰紡
lineStyle: {
- color: "#153269",
+ color: '#153269',
},
},
splitLine: {
lineStyle: {
- color: "#113865", // 鍒嗛殧绾块鑹�
+ color: '#113865', // 鍒嗛殧绾块鑹�
width: 1, // 鍒嗛殧绾跨嚎瀹�
},
},
},
series: [
{
- type: "radar",
+ type: 'radar',
symbolSize: 4,
// symbol: 'angle',
data: dataArr,
@@ -206,15 +206,18 @@
],
};
- let myChart = this.$echarts.init(document.getElementById("echart43"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart43'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
mounted() {
this.gaugeChart1();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
};
</script>
--
Gitblit v1.9.3