Vue+ECharts的小示例

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