对于 Vue CLI 项目如何引入Echarts以及动态获取数据

🚀个人主页：一颗小谷粒

 🚀所属专栏：Web前端开发

很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~

目录

1、数据画卷—Echarts介绍

1.1 什么是Echarts？

1.2 Echarts官网地址

2、Vue CLI 项目集成 Echarts

2.1 通过npm命令下载

2.2 在main.js导入echarts

2.3 入门案例搭建

3、与后端交互 动态获取数据

3.1 前端发送/接收请求 

3.2 后端数据库信息 

3.3 后端业务处理

4、Echarts主题下载及设置

4.1 主题下载

4.2 主题设置 

---

1、数据画卷—Echarts介绍

1.1 什么是Echarts？

Echarts 是一个基于 Javascript 的 数据可视化 图标库。它提供了丰富的图表类型，具有高度可定制性、且交互性强。广泛应用于数据可视化平台、网页数据分析工具、移动端应用等场景。最初由百度公司开发，于2018年捐献给了apache软件基金会。

1.2 Echarts官网地址

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

2、Vue CLI 项目集成 Echarts

2.1 通过npm命令下载

npm install echarts --save

2.2 在main.js导入echarts

import * as echarts from 'echarts'; //导入echarts组件
Vue.prototype.echarts = echarts; //将echarts组件绑定到vue对象

2.3 入门案例搭建

（这里我以饼状图为例演示）

<template>
	<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
	<div id="main" style="width: 600px;height:400px;"></div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			initChart() {

				// 基于准备好的dom，初始化echarts实例
				var myChart = this.echarts.init(document.getElementById('main'),);

				var option = {
					title: {
						text: 'Referer of a Website',
						subtext: 'Fake Data',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: [{
								value: 1048,
								name: 'Search Engine'
							},
							{
								value: 735,
								name: 'Direct'
							},
							{
								value: 580,
								name: 'Email'
							},
							{
								value: 484,
								name: 'Union Ads'
							},
							{
								value: 300,
								name: 'Video Ads'
							}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);

			}
		},
		mounted() {
			this.initChart();
		}
	}
</script>

<style>
</style>

这里的数据data是写死的，那么如何从后端动态获取数据呢？

3、与后端交互 动态获取数据

技术栈：Spring+Springboot+Mybatis

工具：IDEA+MySql

3.1 前端发送/接收请求 

这里先把前端代码给大家： 

<template>
	<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
	<div id="main" style="width: 600px;height:400px;"></div>
</template>

<script>	
	export default {
		data() {
			return {

			}
		},
		methods: {
			initChart() {
				this.$http.get("api/echartsCtl/pie").then((resp) => {
				// 基于准备好的dom，初始化echarts实例
				var myChart = this.echarts.init(document.getElementById('main'));
			
				var option = {
				
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					  tooltip: {
					    trigger: 'item'
					  },
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: true,
				
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: resp.data.result,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				})
				
			}
		},
		mounted() {
			this.initChart();
		}
	}
</script>

<style>
</style>

这里其实只改变了两处：

• 通过axios向后端发送请求.
• data接收来自后端响应的数据.

 

3.2 后端数据库信息 

以该表为例，我们要查询每种类型(type)的总销售额(price)，sql如下：

select type,sum(price) from sales group by type

 

那么我们要做的就是将查询到的数据在前端通过饼状图来显示，具体要怎么做呢？

3.3 后端业务处理

3.3.1 创建一个实体类，将数据封装到对象中

注意：这里的属性名必须为 value 和 name 

3.3.2 dao层与数据库交互 

3.3.3 向前端响应结果

 效果展示：

4、Echarts主题下载及设置

 

4.1 主题下载

Echarts提供了许多精美的主题颜色，且具有可定制性，那么如何更换默认的主题颜色呢？

首先，在我们最开始下载 Echarts组件时就已经默认自带下载了一部分主题了，它们下载在了 node_modules / echarts / theme 目录下，如图所示：

除了这些默认自带的主题，我们也可以在Echarts官网下载，如图所示： 

4.2 主题设置 

在程序中设置主题只需导入和定义即可，如图所示：

效果展示：

---

---

---

本次的分享就到此为止了，希望我的分享能给您带来帮助，创作不易也欢迎大家三连支持，你们的点赞就是博主更新最大的动力！如有不同意见，欢迎评论区积极讨论交流，让我们一起学习进步！有相关问题也可以私信博主，评论区和私信都会认真查看的，我们下次再见

 博主wx：g2279605572