无成本搭建属于自己的网站,南宁百度网站建设公司哪家好,修邦建设网站,兰州网站制作要多少钱#x1f680;个人主页#xff1a;一颗小谷粒 #x1f680;所属专栏#xff1a;Web前端开发 很荣幸您能阅读我的文章#xff0c;诚请评论指点#xff0c;欢迎欢迎 ~ 目录
1、数据画卷—Echarts介绍
1.1 什么是Echarts#xff1f;
1.2 Echarts官网地址
2、Vue CLI 项目… 个人主页一颗小谷粒 所属专栏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 idmain stylewidth: 600px;height:400px;/div
/templatescriptexport 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();}}
/scriptstyle
/style 这里的数据data是写死的那么如何从后端动态获取数据呢 3、与后端交互 动态获取数据 技术栈SpringSpringbootMybatis 工具IDEAMySql 3.1 前端发送/接收请求
这里先把前端代码给大家
template!-- 为 ECharts 准备一个定义了宽高的 DOM --div idmain stylewidth: 600px;height:400px;/div
/templatescript 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();}}
/scriptstyle
/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 主题设置
在程序中设置主题只需导入和定义即可如图所示 效果展示 本次的分享就到此为止了希望我的分享能给您带来帮助创作不易也欢迎大家三连支持你们的点赞就是博主更新最大的动力如有不同意见欢迎评论区积极讨论交流让我们一起学习进步有相关问题也可以私信博主评论区和私信都会认真查看的我们下次再见 博主wxg2279605572
