From d0f98ad8e1047e3161a458399ad3005404ed87b8 Mon Sep 17 00:00:00 2001
From: whychdw <496960745@qq.com>
Date: 星期五, 06 六月 2025 15:52:15 +0800
Subject: [PATCH] 标准参数管理
---
src/components/echarts/BaseChart.vue | 242 +++--------------------------------------------
1 files changed, 19 insertions(+), 223 deletions(-)
diff --git a/src/components/echarts/BaseChart.vue b/src/components/echarts/BaseChart.vue
index daa57a5..f0a5e3e 100644
--- a/src/components/echarts/BaseChart.vue
+++ b/src/components/echarts/BaseChart.vue
@@ -3,8 +3,8 @@
import "./transparent";
import { onMounted, onBeforeUnmount, ref, nextTick } from "vue";
-const chart_instance = ref(null);
-let exportChart_instance = ref(null);
+let chart_instance = null;
+let exportChart_instance = null;
const chart = ref(null);
const exportChart = ref(null);
@@ -15,14 +15,12 @@
onMounted(() => {
console.log('base mounted',chart.value, '=============');
- chart_instance.value = echarts.init(chart.value, "transparent");
- exportChart_instance.value = echarts.init(exportChart.value, "transparent");
-
- let option = getOptions();
+ // chart_instance.value = echarts.init(chart.value, "transparent");
+ chart_instance = echarts.init(chart.value, "transparent");
+ exportChart_instance = echarts.init(exportChart.value, "transparent");
nextTick(() => {
- chart_instance.value.resize();
- chart_instance.value.setOption(option);
+ chart_instance.resize();
});
window.addEventListener("resize", resize);
@@ -33,213 +31,13 @@
dispose();
});
- function getOptions() {
-
- const option = {
- // title: {
- // text: '璇锋眰鏁�',
- // textStyle: {
- // fontWeight: 'normal',
- // fontSize: 16,
- // color: '#F1F1F3'
- // },
- // left: '6%'
- // },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- lineStyle: {
- color: '#57617B'
- }
- }
- },
- // legend: {
- // icon: 'rect',
- // itemWidth: 14,
- // itemHeight: 5,
- // itemGap: 13,
- // data: ['绉诲姩', '鐢典俊', '鑱旈��'],
- // right: '4%',
- // textStyle: {
- // fontSize: 12,
- // color: '#F1F1F3'
- // }
- // },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- boundaryGap: false,
- axisLine: {
- lineStyle: {
- color: '#57617B'
- }
- },
- data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
- }, {
- axisPointer: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#57617B'
- }
- },
- axisTick: {
- show: false
- },
-
- position: 'bottom',
- offset: 20,
- data: ['', '', '', '', '', '', '', '', '', '', {
- value: '鍛ㄥ叚',
- textStyle: {
- align: 'left'
- }
- }, '鍛ㄦ棩']
- }],
- yAxis: [{
- type: 'value',
- name: '鍗曚綅锛�%锛�',
- axisTick: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#57617B'
- }
- },
- axisLabel: {
- margin: 10,
- textStyle: {
- fontSize: 14
- }
- },
- splitLine: {
- lineStyle: {
- color: '#57617B'
- }
- }
- }],
- series: [{
- name: '绉诲姩',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
- normal: {
- width: 1
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(137, 189, 27, 0.3)'
- }, {
- offset: 0.8,
- color: 'rgba(137, 189, 27, 0)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- shadowBlur: 10
- }
- },
- itemStyle: {
- normal: {
- color: 'rgb(137,189,27)',
- borderColor: 'rgba(137,189,2,0.27)',
- borderWidth: 12
-
- }
- },
- data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
- }, {
- name: '鐢典俊',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
- normal: {
- width: 1
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(0, 136, 212, 0.3)'
- }, {
- offset: 0.8,
- color: 'rgba(0, 136, 212, 0)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- shadowBlur: 10
- }
- },
- itemStyle: {
- normal: {
- color: 'rgb(0,136,212)',
- borderColor: 'rgba(0,136,212,0.2)',
- borderWidth: 12
-
- }
- },
- data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
- }, {
- name: '鑱旈��',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
- normal: {
- width: 1
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(219, 50, 51, 0.3)'
- }, {
- offset: 0.8,
- color: 'rgba(219, 50, 51, 0)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- shadowBlur: 10
- }
- },
- itemStyle: {
- normal: {
-
- color: 'rgb(219,50,51)',
- borderColor: 'rgba(219,50,51,0.2)',
- borderWidth: 12
- }
- },
- data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
- },]
- };
-
- return option;
- }
-
function getChart() {
- return chart_instance.value;
+ return chart_instance;
}
function setOption(option) {
- if (chart_instance.value) {
- chart_instance.value.setOption(option);
+ if (chart_instance) {
+ chart_instance.setOption(option);
}
}
@@ -252,8 +50,8 @@
function getDataURL() {
let base64 = "";
- if (exportChart_instance.value) {
- let option = chart_instance.value.getOption();
+ if (exportChart_instance) {
+ let option = chart_instance.getOption();
option.xAxis[0].axisLine.lineStyle = {
color: "#000",
};
@@ -263,8 +61,8 @@
color: "#000",
};
option.yAxis[0].axisLabel.textStyle.color = "#000";
- exportChart_instance.value.setOption(option);
- base64 = exportChart_instance.value.getDataURL({
+ exportChart_instance.setOption(option);
+ base64 = exportChart_instance.getDataURL({
pixelRatio: 1,
backgroundColor: "#fff",
});
@@ -273,16 +71,14 @@
}
function resize() {
- if (chart_instance.value) {
- chart_instance.value.resize();
- console.log('resize', '=============');
-
+ if (chart_instance) {
+ chart_instance.resize();
}
}
function dispose() {
- disposeChart(chart_instance.value);
- disposeChart(exportChart_instance.value);
+ disposeChart(chart_instance);
+ disposeChart(exportChart_instance);
}
function disposeChart(chart) {
@@ -306,9 +102,9 @@
<div
class="e-chart-root"
:class="{ 'full-screen': fullScreenFlag }"
+ @click="handleClick"
+ @dblclick="fullScreen"
>
- <!-- @click="handleClick"
- @dblclick="fullScreen" -->
<div class="e-chart-container">
<div class="e-chart" ref="chart"></div>
<slot name="tools"></slot>
--
Gitblit v1.9.1