From 9083fd270cd172f998eb2dd3dfae59187a70cb1a Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Sat, 07 Oct 2023 09:31:11 +0800
Subject: [PATCH] Merge branch 'feature_1.0'
---
src/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts.vue | 151 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 151 insertions(+), 0 deletions(-)
diff --git a/src/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts.vue b/src/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts.vue
new file mode 100644
index 0000000..f8a130b
--- /dev/null
+++ b/src/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts.vue
@@ -0,0 +1,151 @@
+<template>
+ <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+// import echarts from 'echarts'
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+// import resize from '@/components/Echarts/mixins/resize'
+export default {
+ // mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: 'chart'
+ },
+ width: {
+ type: String,
+ default: '100%'
+ },
+ height: {
+ type: String,
+ default: '290px'
+ },
+ chartData: {
+ type: Array,
+ required: false,
+ default: () => []
+ }
+ },
+ data() {
+ return {
+ chart: null,
+ seriesData: []
+ }
+ },
+ watch: {
+ 'chartData': {
+ handler(newVal) {
+ console.log('newVal', newVal)
+ this.seriesData = []
+ this.seriesData = newVal
+ this.$nextTick(() => {
+ this.initChart()
+ })
+ },
+ deep: true,
+ immediate: true
+ }
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initChart()
+ })
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(this.$el, 'macarons')
+ this.chart.clear()
+ this.setOptions()
+ },
+ setOptions() {
+ // function fontSize(res) {
+ // let clientWidth =
+ // window.innerWidth ||
+ // document.documentElement.clientWidth ||
+ // document.body.clientWidth
+ // if (!clientWidth) return
+ // let fontSize = 100 * (clientWidth / 1920)
+ // return res * fontSize
+ // }
+
+ this.chart.setOption(
+ {
+ color: ['#F56463', '#00C6FF', '#F09615', '#0079E6', '#a814ff', '#03b915'],
+ legend: {
+ itemHeight: 14,
+ itemWidth: 14,
+ icon: 'rect',
+ orient: 'vertical',
+ top: 'center',
+ right: '5%',
+ textStyle: {
+ align: 'left',
+ color: '#',
+ verticalAlign: 'middle',
+ rich: {
+ name: {
+ width: 80,
+ fontSize: 16
+ },
+ value: {
+ width: 20,
+ align: 'right',
+ fontFamily: 'Medium',
+ fontSize: 16
+ },
+ rate: {
+ width: 10,
+ align: 'right',
+ fontSize: 16
+ }
+ }
+ },
+ data: this.seriesData,
+ formatter: (name) => {
+ if (this.seriesData.length) {
+ const item = this.seriesData.filter((item) => item.name === name)[0]
+ return `{name|${name}}{value| ${item.value}}`
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'item',
+ backgroundColor: 'rgba(255,255,255,.8)', // ������������rgba������������������������������
+ color: 'gray'
+ },
+ series: [
+ {
+ name: '',
+ type: 'pie',
+ radius: ['30%', '80%'],
+ center: ['35%', '50%'],
+ roseType: 'radius',
+ label: {
+ formatter: '{d}%'
+ },
+ labelLine: {
+ length: 1,
+ length2: 20
+ },
+ data: this.seriesData
+ }
+ ]
+ },
+ true
+ )
+ this.chart.resize()
+ window.onresize = this.chart.resize
+ }
+ }
+}
+</script>
+
--
Gitblit v1.8.0