如何使用vue cli3.0整合echarts3.0实现地图数据可视化？

本文共计756个文字，预计阅读时间需要4分钟。

前言：echarts 提供了直观、交互丰富、可高度个性化定制的可视化图表，非常适合操作大数据。最近一直忙着搬家，没有更新博客，今天抽出时间来写一篇关于 vue 和 echarts 的博客。

前言

echarts 提供了直观，交互丰富，可高度个性化定制的数据可视化图表。而vue更合适操纵数据。

最近一直忙着搬家，就没有更新博客，今天抽出空来写一篇关于vue和echarts的博客。下面是结合地图的一个小的echarts demo，我在使用npm的时候对比了echarts和vue-echarts两个依赖，最后决定使用echarts依赖包，因为它更接近原生，使用现实更小，如果对vue生命周期比较了解，那就更容易操作。

下面讲一下做出这样一个echarts图。话不多说了，来一起看看详细的介绍吧

一 基础的echarts图表制作

1.首先在vue项目中引入echarts并全局配置

npm install echarts --save

在main.js中引入并挂在到vue的prototype上

import echarts from "echarts"; Vue.prototype.$echarts = echarts;

2.创建一个装载echarts图表的盒子

<div id="chart1"></div>

差不多就是这样，设置一个id即可。