echarts替换vue-echarts解决版本报错问题

src/views/platform/examination/exam/statistics.vue

@@ -5,25 +5,18 @@
             append-to-body
             title="数据统计"
             :visible.sync="dialogVisible"
-            width="70%"
+            width="80%"
             top
             :close-on-click-modal="false"
             :close-on-press-escape="false"
         >
             <div class="chart">
                 <div class="chart1">
-                    <v-chart
-                        :options="joinChartOptions"
-                        :autoresize="true"
-                        style="width: 80%"
-                    />
+                    <div id="echart1" style="width: 1000px;height:420px;" />
+
                 </div>
                 <div class="chart2">
-                    <v-chart
-                        :options="scoreChartOptions"
-                        :autoresize="true"
-                        style="width: 80%"
-                    />
+                    <div id="echart2" style="width: 1000px;height:420px;" />
                 </div>
             </div>
 
@@ -35,6 +28,7 @@
 </template>
 
 <script>
+import * as echarts from 'echarts'
 export default {
     props: {
         departmentData: {
@@ -44,24 +38,26 @@ export default {
     },
     data () {
         return {
-            dialogVisible: false,
-            joinChartOptions: {},
-            scoreChartOptions: {}
-            //   departmentData:[ { "department": "检验科", "plannedAttendees": 6, "actualAttendees": 0, "joinRate": "0.00%" }, { "department": "综合/质量管理组", "plannedAttendees": 4, "actualAttendees": 0, "joinRate": "0.00%" }, { "department": "微生物组", "plannedAttendees": 4, "actualAttendees": 0, "joinRate": "0.00%" }, { "department": "生化组", "plannedAttendees": 4, "actualAttendees": 0, "joinRate": "0.00%" }, { "department": "临检组", "plannedAttendees": 8, "actualAttendees": 0, "joinRate": "0.00%" }, { "department": "免疫组", "plannedAttendees": 1, "actualAttendees": 0, "joinRate": "0.00%" } ]
+            dialogVisible: false
         }
     },
-    computed: {},
     watch: {
-    // 解决echart渲染问题
         departmentData () {
-            this.joinChartOptions = this.generateChartOptions('join')
-            this.scoreChartOptions = this.generateChartOptions('score')
+            if (this.departmentData.length) {
+                this.$nextTick(() => {
+                    console.log(this.departmentData)
+                    const echart1 = echarts.init(document.getElementById('echart1'))
+                    const echart2 = echarts.init(document.getElementById('echart2'))
+                    const option1 = this.formatData1()
+                    const option2 = this.formatData2()
+                    echart1.setOption(option1)
+                    echart2.setOption(option2)
+                    echart1.resize({ width: 1000, height: 420 })
+                    echart2.resize({ width: 1000, height: 420 })
+                })
+            }
         }
     },
-    created () {
-        this.joinChartOptions = this.generateChartOptions('join')
-        this.scoreChartOptions = this.generateChartOptions('score')
-    },
     methods: {
         open () {
             this.dialogVisible = true
@@ -69,113 +65,45 @@ export default {
         close () {
             this.dialogVisible = false
         },
-        transformData (type) {
-            const xAxisData = []
-            const plannedAttendeesData = []
-            const actualAttendeesData = []
-            const joinRateData = []
-            const avgScoreData = []
-            if (type === 'join') {
-                this.departmentData.forEach((department) => {
-                    xAxisData.push(department.department)
-                    plannedAttendeesData.push(department.plannedAttendees)
-                    actualAttendeesData.push(department.actualAttendees)
-                    joinRateData.push((department.joinRate * 100).toFixed(2))
-                })
-            }
-            if (type === 'score') {
-                this.departmentData.forEach((department) => {
-                    xAxisData.push(department.department)
-                    plannedAttendeesData.push(department.minScore.toFixed(2))
-                    actualAttendeesData.push(department.maxScore.toFixed(2))
-                    joinRateData.push((department.passRate * 100).toFixed(2))
-                    avgScoreData.push(department.avgScore.toFixed(2))
-                })
-            }
+        formatData1 () {
+            const xAxisData = this.departmentData.map(item => item.department)
+            const seriesData = [
+                {
+                    name: '应参考人数',
+                    type: 'bar',
+                    data: this.departmentData.map(item => item.plannedAttendees)
+                },
+                {
+                    name: '实参考人数',
+                    type: 'bar',
+                    data: this.departmentData.map(item => item.actualAttendees)
+                },
+                {
+                    name: '参考率',
+                    type: 'line',
+                    yAxisIndex: 1,
+                    data: this.departmentData.map(item => (item.joinRate * 100).toFixed(2)),
+                    label: {
+                        show: true,
+                        color: '#1f1f1f',
+                        fontSize: 12,
+                        formatter: '{c}%'
+                    }
+                }
+            ]
 
             return {
-                xAxisData,
-                plannedAttendeesData,
-                actualAttendeesData,
-                joinRateData,
-                avgScoreData
-            }
-        },
-        generateChartOptions (type) {
-            const {
-                xAxisData,
-                plannedAttendeesData,
-                actualAttendeesData,
-                joinRateData,
-                avgScoreData
-            } = this.transformData(type)
-
-            let text = ''
-            let legendText = []
-            let series = []
-            let llable = ''
-            if (type === 'join') {
-                text = '各部门参考人数信息统计'
-                llable = '人数'
-                legendText = ['应参考人数', '实参考人数', '参考率']
-                series = [
-                    {
-                        name: legendText[0],
-                        type: 'bar',
-                        data: plannedAttendeesData
-                    },
-                    {
-                        name: legendText[1],
-                        type: 'bar',
-                        data: actualAttendeesData
-                    },
-                    {
-                        name: legendText[2],
-                        type: 'line',
-                        yAxisIndex: 1,
-                        data: joinRateData,
-                        label: {
-                            show: true,
-                            position: 'top'
-                        }
-                    }
-                ]
-            }
-            if (type === 'score') {
-                text = '各部门成绩信息统计'
-                llable = '分数'
-                legendText = ['最高分', '最低分', '平均分', '合格率']
-                series = [
-                    {
-                        name: legendText[0],
-                        type: 'bar',
-                        data: plannedAttendeesData
-                    },
-                    {
-                        name: legendText[1],
-                        type: 'bar',
-                        data: actualAttendeesData
-                    },
-                    {
-                        name: legendText[2],
-                        type: 'bar',
-                        data: avgScoreData
-                    },
+                dataZoom: [
                     {
-                        name: legendText[3],
-                        type: 'line',
-                        yAxisIndex: 1,
-                        data: joinRateData,
-                        label: {
-                            show: true,
-                            position: 'top'
-                        }
+                        type: 'slider',
+                        show: true,
+                        xAxisIndex: [0],
+                        start: 0,
+                        end: 200
                     }
-                ]
-            }
-            return {
+                ],
                 title: {
-                    text
+                    text: '各部门参考人数信息统计'
                 },
                 tooltip: {
                     trigger: 'axis',
@@ -184,11 +112,7 @@ export default {
                     }
                 },
                 legend: {
-                    data: legendText
-                },
-                grid: {
-                    // top: 0,
-                    // left: 10,
+                    data: ['应参考人数', '实参考人数', '参考率']
                 },
                 xAxis: {
                     type: 'category',
@@ -200,34 +124,100 @@ export default {
                 yAxis: [
                     {
                         type: 'value',
-                        name: llable,
+                        name: '人数',
                         axisLabel: {
                             formatter: '{value}'
                         }
                     },
                     {
                         type: 'value',
-                        name: legendText[legendText.length - 1],
+                        name: '参考率 (%)',
                         axisLabel: {
                             formatter: '{value}%'
                         }
                     }
                 ],
-                series,
+                series: seriesData
+            }
+        },
+        formatData2 () {
+            const xAxisData = this.departmentData.map(item => item.department)
+            const seriesData = [
+                {
+                    name: '最高分',
+                    type: 'bar',
+                    data: this.departmentData.map(item => item.maxScore)
+                },
+                {
+                    name: '最低分',
+                    type: 'bar',
+                    data: this.departmentData.map(item => item.minScore)
+                },
+                {
+                    name: '平均分',
+                    type: 'bar',
+                    data: this.departmentData.map(item => item.avgScore.toFixed(2))
+                },
+                {
+                    name: '合格率',
+                    type: 'line',
+                    yAxisIndex: 1,
+                    data: this.departmentData.map(item => (item.passRate * 100).toFixed(2)),
+                    label: {
+                        show: true,
+                        color: '#1f1f1f',
+                        fontSize: 12,
+                        formatter: '{c}%'
+                    }
+                }
+            ]
+
+            return {
                 dataZoom: [
                     {
+                        type: 'slider',
                         show: true,
-                        realtime: true,
+                        xAxisIndex: [0],
                         start: 0,
                         end: 200
+                    }
+                ],
+                title: {
+                    text: '各部门成绩信息统计'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                legend: {
+                    data: ['最高分', '最低分', '平均分', '合格率']
+                },
+                xAxis: {
+                    type: 'category',
+                    data: xAxisData,
+                    axisLabel: {
+                        rotate: 20
+                    }
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '分数',
+                        axisLabel: {
+                            formatter: '{value}'
+                        }
                     },
                     {
-                        type: 'inside',
-                        realtime: true,
-                        start: 0,
-                        end: 200
+                        type: 'value',
+                        name: '合格率 (%)',
+                        axisLabel: {
+                            formatter: '{value}%'
+                        }
                     }
-                ]
+                ],
+                series: seriesData
             }
         }
     }