Vue+ECharts的小示例

最新推荐文章于 2024-08-08 08:32:31 发布

Uluoyu

最新推荐文章于 2024-08-08 08:32:31 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue 数据可视化 echarts

本文链接：https://blog.csdn.net/Uluoyu/article/details/117548366

版权

这篇博客介绍了如何在Vue项目中使用ECharts进行数据可视化。首先，它概述了Vue作为渐进式框架的特点，然后详细阐述了ECharts的示例网站。接下来，文章通过一个具体的例子展示了如何在Vue项目中引入ECharts，包括开发工具的选择、目录结构的设定、组件的创建以及路由的配置。最后，博主提供了前端项目的GitHub链接，供读者参考完整代码。

摘要由CSDN通过智能技术生成

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