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
后端代碼根據自己的需求自己提供，前端只需要向后端發請求獲取所需數據。

總結

以上是生活随笔為你收集整理的Vue+ECharts的小示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。