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/bar1.vue | 214 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 214 insertions(+), 0 deletions(-)
diff --git a/src/components/echarts/bar1.vue b/src/components/echarts/bar1.vue
new file mode 100644
index 0000000..960ab16
--- /dev/null
+++ b/src/components/echarts/bar1.vue
@@ -0,0 +1,214 @@
+<script setup>
+ import { onMounted, ref, watchEffect, nextTick, onBeforeUnmount } from "vue";
+ import * as echarts from 'echarts';
+ import baseChart from "./BaseChart.vue";
+
+ const chart = ref(null);
+ const props = defineProps({
+ type: {
+ type: String,
+ default: '鐢垫祦'
+ },
+ title: {
+ type: String,
+ default: ''
+ },
+ unit: {
+ type: String,
+ default: ''
+ }
+ });
+
+ const barWidth = 60;
+
+ function createLinearColor(color) {
+ return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color,
+ }, {
+ offset: 0.5,
+ color: 'transparent'
+ }, {
+ offset: 1,
+ color
+ }
+ ], false)
+ }
+
+ const colors = ['#12E876', '#E87615', '#0AE3E5'];
+
+ function getMax(data) {
+ let max = Math.max.apply(null, data) * 1.2;
+ return max || 1;
+ }
+
+
+ function getOptions(xLabels, datas) {
+ xLabels = xLabels || [];
+ datas = datas || [];
+ const option = {
+ // title: {
+ // text: props.title,
+ // textStyle: {
+ // fontWeight: 'normal',
+ // fontSize: 14,
+ // color: '#fff'
+ // },
+ // left: '6%'
+ // },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ lineStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ top: 30,
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ // boundaryGap: false,
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ offset: 16,
+ data: xLabels
+ }],
+ yAxis: [{
+ type: 'value',
+ name: props.unit,
+ axisTick: {
+ show: true,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
+ margin: 10,
+ fontSize: 12,
+ color: '#fff'
+ },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,0.2)'
+ }
+ },
+ max: getMax(datas),
+ }],
+ series: [
+ {
+ type: 'bar',
+ barGap: "-100%",
+ barWidth,
+ tooltip: {
+ show: false
+ },
+ itemStyle: {
+ color: 'rgba(255,255,255,0.1)',
+ },
+ data: datas.map(v => getMax(datas)),
+ z: 0
+ },
+ {
+ type: 'bar',
+ smooth: true,
+ barWidth,
+ label: {
+ show: true,
+ position: "top",
+ offset: [0, -18],
+ fontSize: 20,
+ fontWeight: "bolder",
+ color: "#ebf006",
+ },
+ itemStyle: {
+ color: function (params) {
+ return colors.map(v => createLinearColor(v))[params.dataIndex % 3];
+ },
+ },
+ data: datas
+ }, { // 瀹炰綋鏌辩姸鍥鹃《閮�
+ z: 3,
+ type: 'pictorialBar',
+ symbolPosition: 'end',
+ data: datas,
+ barWidth,
+ tooltip: {
+ show: false,
+ },
+ symbolOffset: ['0%', '-50%'],
+ // symbolRepeat: 'true',
+ symbolSize: ['100%', 30],
+ // symbol: 'path://M 100 50 A 40,40 0 1,0 100,50.1 z',
+ // symbol: 'path://M0,10 L10,10 L10,0 L0,0 M14,10 L24,10 L24,0 L14,0',
+ itemStyle: {
+ borderWidth: 0,
+ color: function (params) {
+ return colors[params.dataIndex % 3];
+ },
+ },
+ },]
+ };
+
+ return option;
+ }
+
+ let myChart = null;
+ let chart_instance = null;
+
+ function initChart() {
+ if (chart.value) {
+ // myChart = chart.value.getChart();
+
+ let option = getOptions();
+ chart.value.setOption(option);
+ chart_instance = chart.value.getChart();
+ }
+ }
+
+ function updateChart(xLabels, datas) {
+ if (chart.value) {
+ let option = getOptions(xLabels, datas);
+ chart.value.setOption(option);
+ }
+ }
+
+ function getChart() {
+ return chart_instance;
+ }
+
+ defineExpose({
+ getChart,
+ updateChart
+ });
+
+ onMounted(() => {
+ // console.log('line mounted', '=============');
+
+ initChart();
+ });
+</script>
+
+<template>
+ <div class="line-chart">
+ <base-chart ref="chart"></base-chart>
+ </div>
+</template>
+
+<style scoped>
+.line-chart {
+ width: 100%;
+ height: 100%;
+}
+</style>
--
Gitblit v1.9.1