-
vue-element-admin 综合开发五：引入 echarts，封装echarts 组件
导言
一、初尝试echarts
- ecahrts 官网：https://echarts.apache.org/zh/index.html
- 学习使用跟着官网走即可
- API位置：
1. 引入方式
- 根据官网去下载
- cdn方式：
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>- 1
2. 项目新建 echarts.html
将官网的事例拿过来，换上 上面的cdn方式
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>EChartstitle> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">script> head> <body> <div id="main" style="width: 600px;height:400px;">div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
3. 页面展示
二、 项目引入echarts
1. 安装
npm install echarts@5.1.2oryarn add echarts@5.1.22. 引入
哪个页面用，就在哪个页面引入即可（无须在main.js中引入）
引入语句import * as echarts from "echarts";- 1
三、本项目开发：折线图、柱状图、饼图
1. 数据来源
在上一个博文中使用了mock数据模拟后端返回的数据，在
/home/getData这个请求中返回了所有数据，包括上一个博客已经用到的列表数据，还有本博客的折线图、柱状图、饼状图的数据。2. 折线图
a、dom位置
dom位置：放折线图的地方
<el-card style="height: 280px"> <div style="height: 280px" ref="echarts">div> el-card>- 1
- 2
- 3
- 4
b、method 定义 echarts 折线图
- method 定义的方法
// 折线图 zhexiantu(data) { // 折线图 const order = data.orderData; const xData = order.date; // console.log(JSON.stringify(xData)) const keyArray = Object.keys(order.data[0]); const series = []; keyArray.forEach((key) => { series.push({ name: key, data: order.data.map((item) => item[key]), type: "line", }); }); const option = { xAxis: { data: xData, }, yAxis: {}, legend: { data: keyArray, }, series, }; const e = echarts.init(this.$refs.echarts); e.setOption(option); },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
c、方法挂载到 mounted 钩子函数
- 将方法放到 mounted 钩子函数中调用
mounted() { getData().then((res) => { const { code, data } = res.data; if (code == 20000) { // 左下方表格 this.tableData = data.tableData; // 右方 中间 折线图 this.zhexiantu(data); } console.log("res:", res); }); },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 注意这里的数据，还是之前封装的mock数据，mock数据。
3. 柱状图
a、dom位置
<el-card style="height: 260px"> <div style="height: 240px" ref="userEcharts">div> el-card>- 1
- 2
- 3
b、method 定义 echarts 柱状图
// 柱状图 zhuzhuangtu(data) { const userOption = { legend: { // 图例文字颜色 textStyle: { color: "#333", }, }, grid: { left: "20%", }, // 提示框 tooltip: { trigger: "axis", }, xAxis: { type: "category", // 类目轴 data: data.userData.map((item) => item.data), axisLine: { lineStyle: { color: "#17b3a3", }, }, axisLabel: { interval: 0, color: "#333", }, }, yAxis: [ { type: "value", axisLine: { lineStyle: { color: "#17b3a3", }, }, }, ], color: ["#2ec7c9", "#b6a2de"], series: [ { name: "新增用户", data: data.userData.map((item) => item.new), type: "bar", }, { name: "活跃用户", data: data.userData.map((item) => item.active), type: "bar", }, ], }; const e = echarts.init(this.$refs.userEcharts); e.setOption(userOption); },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
c、挂载到mounted
mounted() { getData().then((res) => { const { code, data } = res.data; if (code == 20000) { // 左下方表格 this.tableData = data.tableData; // 右方 中间 折线图 this.zhexiantu(data); // 右方 下面 柱状图 this.zhuzhuangtu(data); } console.log("res:", res); }); },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
4. 饼图
a、dom位置
<el-card style="height: 260px"> <div style="height: 240px" ref="videoEcharts">div> el-card>- 1
- 2
- 3
b、method 定义的 echarts 饼状图
// 饼图 bingtu(data) { const videoOption = { tooltip: { trigger: "item", }, color: [ "#0f78f4", "#dd536b", "#9462e5", "#a6a6a6", "#e1bb22", "#39c362", "#3ed1cf", ], series: [ { data: data.videoData, type: 'pie' } ], }; const e = echarts.init(this.$refs.videoEcharts) e.setOption(videoOption) },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
c、挂载到mounted 钩子函数
mounted() { getData().then((res) => { const { code, data } = res.data; if (code == 20000) { // 左下方表格 this.tableData = data.tableData; // 右方 中间 折线图 this.zhexiantu(data); // 右方 下面 柱状图 this.zhuzhuangtu(data); // 右方 下面 饼图 this.bingtu(data); } console.log("res:", res); }); },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
5. 引出的问题
一个页面有三个E chart图，然后引用了三次，代码冗余有点多，应该封装出一个Echart 组件。
四、封装echarts组件
1. 新建组件： components/Echarts.vue
- 将图表分为
线性图和饼图两类。 - 父组件 传到 子组件的
isAxisChart属性 用于区分 线性图和饼图 watch监听入口
<template> <div ref="echart">div> template> <script> import * as echarts from 'echarts' export default { name: 'Echart', props: { isAxisChart: { type: Boolean, // true 代表 线性图， false 代表 饼状图 default: true }, chartData: { type: Object, default(){ return { xData: [], series: [], } } } }, // 监听 watch: { // chartData 是props 中父组件传过来的数据 chartData: { // 入口 handler : 固定 handler: function(){ console.log('echarts, echart:', this.echart) // 第一次为 undefined 以后都有值 this.initChart() console.log('echarts, this.option:', this.option) console.log('echarts, this.option type:', typeof(this.option)) console.log('echarts, isAxisChart:', this.isAxisChart) }, // 首次对数据监听的话 不应该加的是immediate吗，这里的deep 是应为 chartData 是对象才用的 深入deep吧。 deep: true } }, methods: { initChart(){ // 先初始化 图表数据 this.initChartData() // 再 显示图表 if(this.echart){ // 已有 echarts 对象 this.echart.setOption(this.option) } else { // 没有 echarts 对象 this.echart = echarts.init(this.$refs.echart) this.echart.setOption(this.option) } }, initChartData(){ if(this.isAxisChart){ // 线性图 this.axisOption.xAxis.data = this.chartData.xData this.axisOption.series = this.chartData.series } else { // 饼状图 this.normalOption.series = this.chartData.series } } }, data(){ return { ecahrt: null, // 折线图 axisOption: { legend: { // 图例文字颜色 textStyle: { color: "#333", }, }, grid: { left: "20%", }, // 提示框 tooltip: { trigger: "axis", }, xAxis: { type: "category", // 类目轴 data: [], axisLine: { lineStyle: { color: "#17b3a3", }, }, axisLabel: { interval: 0, color: "#333", }, }, yAxis: [ { type: "value", axisLine: { lineStyle: { color: "#17b3a3", }, }, }, ], color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"], series: [], }, // 饼状图 normalOption: { tooltip: { trigger: "item", }, color: [ "#0f78f4", "#dd536b", "#9462e5", "#a6a6a6", "#e1bb22", "#39c362", "#3ed1cf", ], series: [], }, } }, computed: { option(){ // this.isAxisChart 为 true 则获取 饼状图 和折线图 ，否则获取 饼状图 的数据 return this.isAxisChart ? this.axisOption : this.normalOption } } } script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
2. 修改 home/index.vue
a、引入 Echarts组件
import Echart from '../../components/Echarts.vue'- 1
b、html 改变
c、数据改变
3. 柱状图、饼状图同理
但是饼状图有点问题
五、最终界面
-
相关阅读:
类与对象的创建
设计模式之代理模式
C#上位机调试经验
vue--配置根目录(用@代表src目录)
谁拥有穿越周期的眼光？
UDS入门至精通系列Service 3D
计算机毕业设计node+vue基于微信小程序的货物管理系统的设计与实现
升级版4850竖曲线
终极篇章_springMVC_文件上传和下载
毕业设计项目选题Java高考志愿咨询平台 高考志愿填报助手系统源码+调试+开题+lw
- 原文地址：https://blog.csdn.net/qq_40036754/article/details/126310288
