vue使用ECharts

实现一个简单的条形统计图

ECharts网址

网址：https://echarts.apache.org/

找到式例

vue文件里面，首先先写一个盒子，给盒子设置大小并且绑定一个id，在js里面document.getElementById找到这个盒子

<template>
  <div class="Cartogram" id="Cartogram"></div>
</template>

js文件里面

首先引入echarts

import * as echarts from "echarts";

调取接口，获得后端提供的数据

 setup() {
     	//声明一个echarsList 用来保存获取的数据res.data
        const echarsList = ref([])
        //统计图  assessCount: 1 - 被评估次数   orgName: "111111111"-机构名称
        const selectAnalysisDto = () => {
            post(API.ability.selectAnalysisDto, {
                    params: {}
                })
                .then((res) => {
                    console.log(res.data)
                    echarsList.value = res.data
                    init()
                })
                .catch((res) => {
                    init()
                    message.error(res);
                });
        }

组装数据
document.getElementById找到绑定的盒子

		const init = () => {
            /*  主要用于echars重新渲染echars实例已存在的问题   */
            if (document.getElementById('Cartogram') == null) {
                return
            }
            echarts.dispose(document.getElementById('Cartogram'))
            //声明list1和list2,把获取的数据分别push进去，组成自己想要的数据
            let list1 = []
            let list2 = []
            echarsList.value.forEach(item => {
                list1.push(item.assessCount)
                list2.push(item.orgName)
            })
            console.log(list1, list2)
            //#############
            let chartDom = document.getElementById('Cartogram');
            let myChart = echarts.init(chartDom);
            //将 echarts的模板粘过来，把数据换掉
            let option = {
                title: {
                    text: '各机构被评估次数'
                },
                tooltip: {
                    trigger: 'axis',
                    // axisPointer: {
                    //     type: 'shadow'
                    // }
                },
                legend: {
                    data: []
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: list2 //名字
                },
                series: [{
                    name: '被评估次数',
                    type: 'bar',
                    itemStyle: {
                        color: function () {
                            return '#5470c6';
                        }
                    },
                    data: list1 //次数
                }]
            };
			//#############
            option && myChart.setOption(option);
        }

进入页面时

		onBeforeUnmount(() => {
            window.removeEventListener("resize", init);
        })
        onMounted(() => {
            selectAnalysisDto()
            window.addEventListener(
                "resize", init, false
            );
        })
 }

记得引入生命周期

import {
    ref,
    onMounted,
    onBeforeUnmount
} from 'vue';