vue3:十二、图形看板- echart图表-柱状图、饼图

一、效果

如图展示增加了饼图和柱状图，并且优化了浏览器窗口大小更改，图表随着改变

二、 饼图

1、新建组件文件

新增组件EchartsExaminePie.vue，用于存储审核饼图的图表

2、写入组件信息

(1)视图层

写入一个div，写入变量chart和图表宽高

<template>
    <div ref="chart" style="width:100%;height:100%"></div>
</template>

(2)逻辑层

①引入方法

首先引入vue的ref和监听watch,再引入echarts

// 引入方法
import { ref, watch } from 'vue';
import * as echarts from 'echarts';

②基础定义

定义一个变量chart用于和视图层对接

定义参数，并于上一个页面传递参数

const chart = ref();
// 定义参数
const props = defineProps({
    data: { type: Array, default: [] }, //数组
    subTitle: { type: String, default: '' },//副标题
    title: { type: String, default: '' },//标题
});

③初始化图表

定义一个函数用于存入图表的相关信息

const initchart = () => {
    // 1、获取dom
    var chartDom = chart.value;
    // 2、初始化图表实例
    myChart = echarts.init(chartDom);
    // 3、定义option
    var option;
    option = {
        title: {
            text: props.title,
            textStyle: {
                color: '#75808c',
                fontWeight: 'normal',
                fontFamily: 'Courier New'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal', // 水平排列
            left: 'center',      // 水平居中
            bottom: 0         // 距离容器顶部 0
        },
        color: ['#7b8fd6', '#61cdaa'], // 设置饼图颜色
        series: [
            {
                name: props.subTitle,
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 12,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data:props.data
            }
        ]
    };
    option && myChart.setOption(option);
}

④监听图表

写入监听，如果图表的数据有变化，就重新执行一下图表

//监听参数变化
watch(() => props.data, () => {
    initchart();
})

3、api建立数据

①新建接口

②新建mock 

4、建立接口，获取数据

①封装接口

在api方法中，封装一个获取审核情况的接口

②引入方法

在看板中引入接口方法

5、使用方法获取数据

定义一个空数组，将获取的数据存入空数组

6、引入组件

①引入组件方法

通过import引入组件

②视图层使用组件

定义一个line3的div