对于 Vue CLI 项目如何引入Echarts以及动态获取数据
什么是Echarts?前端Vue项目如何集成引入Echarts?如何与后端交互,动态获取数据?以及Echarts主题如何下载和设置?一篇解决你对Echarts的所有疑惑!
🚀个人主页:一颗小谷粒
🚀所属专栏:Web前端开发
很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~
目录
1、数据画卷—Echarts介绍
1.1 什么是Echarts?
Echarts 是一个基于 Javascript 的 数据可视化 图标库。它提供了丰富的图表类型,具有高度可定制性、且交互性强。广泛应用于数据可视化平台、网页数据分析工具、移动端应用等场景。最初由百度公司开发,于2018年捐献给了apache软件基金会。
1.2 Echarts官网地址
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
更多推荐
所有评论(0)