vue-echarts初次体验

前言

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

vue-echarts初次体验_第1张图片

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

使用

1. 安装

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

2. 使用图表组件

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







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

通过官方的例子,我们可以了解到比较复杂的是在于图表的配置项option,而option的配置项,我们可以参考echarts的配置

到这里,文章就结束了(这也太水了吧!)。

vue-echarts初次体验_第2张图片

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

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

  1. 地图

vue-echarts初次体验_第3张图片

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

vue-echarts初次体验_第4张图片

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

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

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

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

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

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

参考资料

vue-echarts的demo

Vue项目使用echarts实现词云图

原文链接

你可能感兴趣的