网站设计策划方案,oa管理系统报价,三亚本地网站建设,音乐网站开发VueECharts做数据可视化1. Vue
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层#xff0c;不仅易于上手#xff0c;还便于与第三方库或既有项目整合。另一方面#xff0c;当与现…VueECharts做数据可视化
1. Vue
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。 我使用的Vue版本是3.11.0。
2.ECharts
https://echarts.apache.org/examples/zh/index.html ECharts的所有示例。
3.VueECharts的示例以一个例子做示例其他类似
(1) 开发工具
使用Visual Studio Code开源工具免费。 项目做完后可以build一下加入其他项目中不会的可以百度。
(2) 加入ECharts到Vue项目中 引入全局echarts对象 加入路由占位符
(2) 目录结构 (3) 创建AreaPage.vue和Area.vue
(4) 创建访问路径 (5) AreaPage.vue
!--针对/areapage这条路劲而显示出来
在这个组件中通过子组件注册的方式要显示Area.vue这个组件--
templatediv classcom-pageArea/Area/div
/templatescriptimport Area from ../components/Area.vueexport default{name: AreaPage,components:{Area}}
/scriptstyle/style(6) Area.vue
!--租房数据的地区数据分析的横向柱状图 --
templatediv classcom-containerdiv classcom-chart refarea_ref/div/div
/templatescript
import { mapState } from vuex;
export default {data() {return {chartInstance: null,allData: null, //服务器返回的数据currentPage: 1, //当前显示的页数totalPage: 0, //一共有多少页timerId: null, //定时器的标识};},mounted() {this.initChart();this.getData();window.addEventListener(resize, this.screenAdapter);//在页面加载完成时主动进行屏幕的适配this.screenAdapter();},destroyed() {clearInterval(this.timerId);//在组件销毁的时候需要将监听器取消window.removeEventListener(resize, this.screenAdapter);},methods: {//初始化echartInstance对象initChart() {this.chartInstance this.$echarts.init(this.$refs.area_ref, this.theme);//对图表初始化配置的控制const initOption {//图表的标题title: {text: ▎房屋地区数据统计,left: 20,top: 20,},//坐标轴的位置grid: {top: 20%,left: 3%,right: 6%,bottom: 3%,containLabel: true, //距离是包含坐标轴上的文字},xAxis: {type: value,},yAxis: {type: category,},tooltip: {trigger: axis,axisPointer: {type: line,z: 0,lineStyle: {color: #2D3443,},},},series: [{type: bar,label: {show: true,position: right,textStyle: {color: white,},},itemStyle: {//指明颜色渐变的方向//指明不同百分比之下颜色的值color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [//百分之0状态之下的颜色值{offset: 0,color: #5052EE,},//百分之100状态之下的颜色值{offset: 1,color: #AB6EE5,},]),},},],};this.chartInstance.setOption(initOption);//对图表对象进行鼠标事件的监听this.chartInstance.on(mouseover, () {clearInterval(this.timerId);});this.chartInstance.on(mouseout, () {this.startInterval();});},//获取服务器的数据async getData() {//http://localhost:8888/data/getAnaly?cateareaconst { data: ret} await this.$http.get(getAnaly?catearea);this.allData ret.data;console.log(this.allData);console.log(typeof this.allData);// 对数组进行排序this.allData.sort((a, b) {return a.count - b.count;});//每5个元素显示一页this.totalPage this.allData.length % 5 0? this.allData.length / 5: this.allData.length / 5 1;this.updateChart();//启动定时器this.startInterval();},//更新图表updateChart() {const start (this.currentPage - 1) * 5; // 0const end this.currentPage * 5; // 5const showData this.allData.slice(start, end);const areaNames showData.map((item) {return item.cate;});console.log(areaNames);const areaValues showData.map((item) {return item.count;});console.log(areaValues);const dataOption {yAxis: {data: areaNames,},series: [{data: areaValues,},],};this.chartInstance.setOption(dataOption);},startInterval() {if (this.timerId) {clearInterval(this.timerId);}this.timerId setInterval(() {this.currentPage;if (this.currentPage this.totalPage) {this.currentPage 1;}this.updateChart();}, 3000);},// 当浏览器的大小发生变化的时候会调用的方法来完成屏幕的适配screenAdapter() {//console.log(this.$refs.area_ref.offsetWidth)const titleFontSize (this.$refs.area_ref.offsetWidth / 100) * 3.6;console.log(titleFontSize);// 浏览器分辨率大小相关的配置项const adapterOption {title: {textStyle: {fontSize: titleFontSize,},},tooltip: {axisPointer: {lineStyle: {width: titleFontSize,},},},series: [{barWidth: titleFontSize,itemStyle: {barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],},},],};this.chartInstance.setOption(adapterOption);// 手动调用图表的 resize 才能产生效果this.chartInstance.resize();},},computed: {...mapState([theme]),},watch: {theme() {console.log(主题切换了);this.chartInstance.dispose(); //销毁当前图表this.initChart(); //重新以最新的主题名称初始化图表对象this.screenAdapter(); //完成屏幕的适配this.updateChart(); //更新图表的展示},},
};
/scriptstyle
/style(7) 实现结果 (8) 注意事项及说明
自己创建一个vue.config.js做一些配置 这是其中一个示例的代码没有主题说明的话可以自己删除。 如果想参考整个代码我就贴一下前端项目的地址。 前端项目地址 有git的话自己git也行 https://github.com/Uluoyu/58-Vue-ECharts.git 后端代码根据自己的需求自己提供前端只需要向后端发请求获取所需数据。
