vue-echarts初次体验

前言

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

震惊之后，该改的代码还是要改，我负责的内容部分涉及到图表的使用，因为这文章，它不就来了嘛！

使用

1. 安装

安装这一块没什么好说的，作者已经写明白了怎么安装引用，部分引用之类的，甚至还把代码发了出来。要是不喜欢看英文文档的话，里面也有中文版的链接，我这里就直接放出来传送门

2. 使用图表组件

这里我直接摘抄作者的例子

// tip: 每一个图表需要设置高度，否则是不显示的

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

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

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

1. 地图

上图是效果图，这种效果的配置项可以在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: []
        }
    ]
}    

2. 词云图

上图是echarts词云图的实现效果。词云图的配置项在现在的echarts版本中是找不到了，网上有相关的echarts的词云图依赖包（传送门）,
作者也是将使用的方法和配置项写出来了，所以这一块也没有什么好说的。

需要注意的是，因为我一开始是不知道有这个的，也是根据网上的文章找到的，但是可能是我找到的文章年代有点久远，里面的配置项说到一点是配置随机颜色这一块，里面是这么写的：

series: [{
    // ……其他配置项
    testStyle: {
        normal: {
            color: // 随机颜色code
        }
    }
}]

这样子配置我这边是怎么都不会生效，需要把里面的normal那一层去掉，即：

series: [{
    // ……其他配置项
    testStyle: {
        color: // 随机颜色code
    }
}]

因为涉及到的图表不多，所以遇到的问题也没有多少，这里做一下记录，方便以后查找。

参考资料

vue-echarts的demo

Vue项目使用echarts实现词云图

原文链接