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、获取domvar chartDom = chart.value;// 2、初始化图表实例myChart = echarts.init(chartDom);// 3、定义optionvar 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