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/echart12.vue | 77 ++++++++++++++++++++------------------
1 files changed, 41 insertions(+), 36 deletions(-)
diff --git a/src/components/echart12.vue b/src/components/echart12.vue
index 3b011c0..ede383e 100644
--- a/src/components/echart12.vue
+++ b/src/components/echart12.vue
@@ -8,21 +8,21 @@
export default {
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
//鏂规硶闆嗗悎
methods: {
gaugeChart1() {
- var legendData = ["鎻愪氦鏁版嵁閲�", "鎻愪緵闆嗘垚鏈嶅姟閲�"]; //鍥句緥
+ var legendData = ['鎻愪氦鏁版嵁閲�', '鎻愪緵闆嗘垚鏈嶅姟閲�']; //鍥句緥
var indicator = [
- { name: "绠￠亾璁捐閮�", max: 12288 },
- { name: "绔欏満璁捐閮�", max: 12288 },
- { name: "鎬诲浘瀹�", max: 12288 },
- { name: "鍕樺療瀹�", max: 12288 },
- { name: "鍦熼槻瀹�", max: 12288 },
- { name: "娴嬮噺閮�", max: 12288 },
- { name: "椤圭洰閮�", max: 12288 },
+ { name: '绠￠亾璁捐閮�', max: 12288 },
+ { name: '绔欏満璁捐閮�', max: 12288 },
+ { name: '鎬诲浘瀹�', max: 12288 },
+ { name: '鍕樺療瀹�', max: 12288 },
+ { name: '鍦熼槻瀹�', max: 12288 },
+ { name: '娴嬮噺閮�', max: 12288 },
+ { name: '椤圭洰閮�', max: 12288 },
];
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: "#BB857A",
+ color: '#BB857A',
},
{
offset: 0.5,
- color: "rgba(0,0,0,0)",
+ color: 'rgba(0,0,0,0)',
},
{
offset: 1,
- color: "#BB857A",
+ color: '#BB857A',
},
],
globalCoord: false,
@@ -81,11 +81,11 @@
itemStyle: {
normal: {
lineStyle: {
- color: "#03CCDB",
+ color: '#03CCDB',
// shadowColor: '#03CCDB',
// shadowBlur: 10,
},
- shadowColor: "#03CCDB",
+ shadowColor: '#03CCDB',
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: "#03CCDB",
+ color: '#03CCDB',
},
{
offset: 0.5,
- color: "rgba(0,0,0,0)",
+ color: 'rgba(0,0,0,0)',
},
{
offset: 1,
- color: "#03CCDB",
+ color: '#03CCDB',
},
],
globalCoord: false,
@@ -126,14 +126,14 @@
},
},
];
- var colorArr = ["#BB857A", "#03CCDB"]; //棰滆壊
+ var colorArr = ['#BB857A', '#03CCDB']; //棰滆壊
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: "#03CCDB",
+ color: '#03CCDB',
},
},
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,20 @@
],
};
- let myChart = this.$echarts.init(document.getElementById("gauge_chart1"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(
+ document.getElementById('gauge_chart1')
+ );
+ 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