vue-echarts初次体验 vue-echarts初次体验

前言最近公司项目的图表组件换成Vue-Echarts。嗯，该怎么说呢？

文章图片

震惊之后，该改的代码还是要改，我负责的内容部分涉及到图表的使用，因为这文章，它不就来了嘛！
使用 1. 安装
安装这一块没什么好说的，作者已经写明白了怎么安装引用，部分引用之类的，甚至还把代码发了出来。要是不喜欢看英文文档的话，里面也有中文版的链接，我这里就直接放出来传送门
2. 使用图表组件
这里我直接摘抄作者的例子

.chart { height: 400px; }// tip: 每一个图表需要设置高度，否则是不显示的

通过官方的例子，我们可以了解到比较复杂的是在于图表的配置项option，而option的配置项，我们可以参考echarts的配置
。
到这里，文章就结束了（这也太水了吧！）。

文章图片

俗话说了，没有问题，也要创造问题。

因为我主要是解决我负责的那块图表问题，所以并没有尝试所有的图表，这里只是列举我遇到的两个图表问题：

地图

文章图片

上图是效果图，这种效果的配置项可以在echarts的配置项里面找，我也在echarts的示例里面找了一个配置项比较类似的例子（传送门）,可以借（fu）鉴（zhi）里面的配置。
有一点是需要注意的是，地图是需要自己引用的，而vue-echarts里面也有地图文件，所以我们需要引用地图文件

// main.js引用地图文件 import chinaMap from './common/map/china.json' import worldMap from './common/map/world.json' import { registerMap } from 'echarts/core' registerMap('china', chinaMap) registerMap('world', worldMap)// 配置 // 地图 map: { textStyle: { fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif' }, title: { text: '粉丝地域分布情况', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b}' }, series: [ { name: '地域分布', type: 'map', map: 'china', data: [] } ] }

词云图

文章图片

上图是echarts词云图的实现效果。词云图的配置项在现在的echarts版本中是找不到了，网上有相关的echarts的词云图依赖包（传送门）,
作者也是将使用的方法和配置项写出来了，所以这一块也没有什么好说的。
需要注意的是，因为我一开始是不知道有这个的，也是根据网上的文章找到的，但是可能是我找到的文章年代有点久远，里面的配置项说到一点是配置随机颜色这一块，里面是这么写的：