From 4c780a22ab9a3e70abf117d767544ac5d469c6af Mon Sep 17 00:00:00 2001 From: wangzenghua <1048523306@qq.com> Date: Wed, 5 Mar 2025 08:41:12 +0000 Subject: [PATCH] =?UTF-8?q?feat:=E6=8A=98=E6=9F=B1=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/custom-echart-bar/index.vue | 64 +++++++++----- .../index.vue | 2 +- .../components/custom-echart-mixin/index.vue | 85 +++++++++++++++++++ main/src/components/index.js | 5 +- .../views/statisticAnalysis/land/index.vue | 18 ++-- 5 files changed, 138 insertions(+), 36 deletions(-) rename main/src/components/{custom-echart-multi-line => custom-echart-line}/index.vue (99%) create mode 100644 main/src/components/custom-echart-mixin/index.vue diff --git a/main/src/components/custom-echart-bar/index.vue b/main/src/components/custom-echart-bar/index.vue index 8945969..8592346 100644 --- a/main/src/components/custom-echart-bar/index.vue +++ b/main/src/components/custom-echart-bar/index.vue @@ -5,18 +5,22 @@ import { ref, reactive, watchEffect } from 'vue'; import { cloneDeep } from 'lodash'; import { useEcharts } from '../../hooks/useEcharts'; - export default { name: 'CustomEchartBar', props: { chartData: { type: Array, default: () => [], + required: true, }, option: { type: Object, default: () => ({}), }, + type: { + type: String, + default: 'bar', + }, width: { type: String, default: '100%', @@ -25,14 +29,11 @@ export default { type: String, default: 'calc(100vh - 78px)', }, - seriesColor: { - type: String, - default: '#1890ff', - }, }, - setup(props) { + emits: ['click'], + setup(props, { emit }) { const chartRef = ref(null); - const { setOptions } = useEcharts(chartRef); + const { setOptions, getInstance } = useEcharts(chartRef); const option = reactive({ tooltip: { trigger: 'axis', @@ -44,6 +45,12 @@ export default { }, }, }, + legend: { + top: 30, + }, + grid: { + top: 60, + }, xAxis: { type: 'category', data: [], @@ -51,14 +58,7 @@ export default { yAxis: { type: 'value', }, - series: [ - { - name: 'bar', - type: 'bar', - data: [], - color: props.seriesColor, - }, - ], + series: [], }); watchEffect(() => { @@ -69,16 +69,36 @@ export default { if (props.option) { Object.assign(option, cloneDeep(props.option)); } - let seriesData = props.chartData.map((item) => { - return item.value; + let typeArr = Array.from(new Set(props.chartData.map((item) => item.type))); + let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name))); + let seriesData = []; + typeArr.forEach((type, index) => { + const barStyle = props.option?.barStyle ?? {}; + let obj = { name: type, type: props.type, ...barStyle }; + let data = []; + xAxisData.forEach((x) => { + let dataArr = props.chartData.filter((item) => type === item.type && item.name == x); + if (dataArr && dataArr.length > 0) { + data.push(dataArr[0].value); + } else { + data.push(null); + } + }); + obj['data'] = data; + if (props.option?.color) { + obj.color = props.option?.color[index]; + } + seriesData.push(obj); }); - let xAxisData = props.chartData.map((item) => { - return item.name; - }); - option.series[0].data = seriesData; - option.series[0].color = props.seriesColor; + option.series = seriesData; option.xAxis.data = xAxisData; setOptions(option); + getInstance()?.off('click', onClick); + getInstance()?.on('click', onClick); + } + + function onClick(params) { + emit('click', params); } return { chartRef }; }, diff --git a/main/src/components/custom-echart-multi-line/index.vue b/main/src/components/custom-echart-line/index.vue similarity index 99% rename from main/src/components/custom-echart-multi-line/index.vue rename to main/src/components/custom-echart-line/index.vue index 6029f70..00d47fd 100644 --- a/main/src/components/custom-echart-multi-line/index.vue +++ b/main/src/components/custom-echart-line/index.vue @@ -7,7 +7,7 @@ import { cloneDeep } from 'lodash'; import { useEcharts } from '../../hooks/useEcharts'; export default { - name: 'CustomEchartMultiLine', + name: 'CustomEchartLine', props: { chartData: { type: Array, diff --git a/main/src/components/custom-echart-mixin/index.vue b/main/src/components/custom-echart-mixin/index.vue new file mode 100644 index 0000000..1d00039 --- /dev/null +++ b/main/src/components/custom-echart-mixin/index.vue @@ -0,0 +1,85 @@ + + + diff --git a/main/src/components/index.js b/main/src/components/index.js index b2b5fc8..b95d513 100644 --- a/main/src/components/index.js +++ b/main/src/components/index.js @@ -4,6 +4,7 @@ import CustomImportExcel from './custom-import-excel'; import CustomRichEditor from './custom-rich-editor'; import CustomEchartBar from './custom-echart-bar'; import CustomEchartPie from './custom-echart-pie'; -import CustomEchartMultiLine from './custom-echart-multi-line'; +import CustomEchartLine from './custom-echart-line'; +import CustomEchartMixin from './custom-echart-mixin'; -export { SvgIcon, CustomTableOperate, CustomImportExcel, CustomRichEditor, CustomEchartBar, CustomEchartPie, CustomEchartMultiLine }; +export { SvgIcon, CustomTableOperate, CustomImportExcel, CustomRichEditor, CustomEchartBar, CustomEchartPie, CustomEchartLine, CustomEchartMixin }; diff --git a/sub-government-affairs-service/src/views/statisticAnalysis/land/index.vue b/sub-government-affairs-service/src/views/statisticAnalysis/land/index.vue index 86d364e..13b17af 100644 --- a/sub-government-affairs-service/src/views/statisticAnalysis/land/index.vue +++ b/sub-government-affairs-service/src/views/statisticAnalysis/land/index.vue @@ -16,7 +16,7 @@ - + @@ -75,17 +75,13 @@ const state = reactive({ // show: false, // }, }, - series: [ - { - name: 'bar', - type: 'bar', - barWidth: 50, - data: [], - itemStyle: { - borderRadius: 25, - }, + barStyle: { + // barWidth: 50, + showBackground: true, + itemStyle: { + borderRadius: 10, }, - ], + }, }, cropData: [ { value: 230, name: '土豆' },