Vue+ECharts做数据可视化

1. Vue

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
我使用的Vue版本是3.11.0。

2.ECharts

https://echarts.apache.org/examples/zh/index.html
ECharts的所有示例。

3.Vue+ECharts的示例（以一个例子做示例，其他类似）

(1) 开发工具

使用Visual Studio Code，开源工具，免费。
项目做完后，可以build一下，加入其他项目中，不会的可以百度。

(2) 加入ECharts到Vue项目中

引入全局echarts对象


加入路由占位符

(2) 目录结构

(3) 创建AreaPage.vue和Area.vue

(4) 创建访问路径

(5) AreaPage.vue

<!--针对/areapage这条路劲而显示出来
在这个组件中通过子组件注册的方式，要显示Area.vue这个组件-->
<template><div class="com-page"><Area></Area></div> 
</template><script>import Area from '../components/Area.vue'export default{name: 'AreaPage',components:{Area}}
</script><style></style>

(6) Area.vue

<!--租房数据的地区数据分析的横向柱状图 -->
<template><div class="com-container"><div class="com-chart" ref="area_ref"></div></div>
</template><script>
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?cate=areaconst { data: ret} = await this.$http.get("getAnaly?cate=area");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(); //更新图表的展示},},
};
</script><style>
</style>

(7) 实现结果

(8) 注意事项及说明

自己创建一个vue.config.js，做一些配置

这是其中一个示例的代码，没有主题说明的话，可以自己删除。
如果想参考整个代码，我就贴一下前端项目的地址。
前端项目地址
有git的话，自己git也行
https://github.com/Uluoyu/58-Vue-ECharts.git
后端代码根据自己的需求自己提供，前端只需要向后端发请求获取所需数据。