vue-echarts 的使用与踩坑(长期更新)

资料

npm 地址
 github 地址

正文

1. 简单的使用

安装

$ npm install echarts vue-echarts

# 或者使用 yarn 装
$ yarn add echarts vue-echarts

main.js 中引入

import Vue from 'vue'
import ECharts from 'vue-echarts'

// 手动导入ECharts模块以减小包的大小
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

// 如果要使用ECharts扩展，只需导入扩展包即可使用
// 以ECharts-GL为例：
// 您只需要使用`npm install --save echarts-gl`和按如下方式
import 'echarts-gl'

// 注册组件以使用
Vue.component('v-chart', ECharts)

index.vue 文件中使用（以下是官网提供的 Demo 源码查看地址）

<template>
<v-chart :options="polar"/>
</template>

<style>
/**
 * The default size is 600px×400px, for responsive charts
 * you may need to set percentage values as follows (also
 * don't forget to provide a size for the container).
 */
.echarts {
  width: 100%;
  height: 100%;
}
</style>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    let data = []

    for (let i = 0; i <= 360; i++) {
        let t = i / 180 * Math.PI
        let r = Math.sin(2 * t) * Math.cos(2 * t)
        data.push([r, i])
    }

    return {
      polar: {
        title: {
          text: '极坐标双数值轴'
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      }
    }
  }
}
</script>

2. 问题的记录

Cannot assign to read only property 'exports' of object '#<Object>' 昨天在装完包之后，试过还没事情，今天一来就跑不起来了

image.png

查看到是 vue-echarts 中引用的 lodash-es 报的错误，网上检索之后，大致意思是：和 webpack 的版本有关系，混用 import 和 module.exports 导致的错误，该问题的讨论地址

解决方法

最简单的方法是把设置使用 babel 转换 vue-echarts 代码的地方注释掉，vue.config.js 文件中操作

image.png

但是这样也是会导致，代码的兼容性很差，只兼容最新版本的浏览器

最优的方法是在 babel.config.js 添加一行配置，解决方案提供的地址

module.exports = {
  presets: ['@vue/app'],
  sourceType: 'unambiguous', // 添加这行
}

以下是 babel官网提供的 sourcetype 参数文档

sourceType

类型：`"script" | "module" | "unambiguous"`
默认：“module”

*   `"script"`-使用ECMAScript脚本语法解析文件。不允许`import`/ `export`语句，并且文件不在严格模式下。
*   `"module"`-使用ECMAScript模块语法分析文件。文件是自动严格的，并且允许`import`/ `export`语句。
*   `"unambiguous"`-如果存在`import`/ `export`语句，则将文件视为“模块” ，否则将其视为“脚本”。

`unambiguous`在类型未知的上下文中可以非常有用，但是会导致错误匹配，因为拥有不使用`import`/ `export` 语句的模块文件是完全有效的。

此选项很重要，因为当前文件的类型会影响输入文件的解析以及可能希望向当前文件添加`import`/ `require`使用的某些转换 。

例如，[`@babel/plugin-transform-runtime`](https://babeljs.io/docs/en/babel-plugin-transform-runtime) 依靠当前文档的类型来决定是插入`import`声明还是`require()`调用。 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env)其[`"useBuiltIns"`](https://babeljs.io/docs/en/babel-preset-env#usebuiltins)选择也相同 。由于Babel默认将文件视为ES模块，因此通常这些插件/预设将插入`import`语句。设置正确的`sourceType`值很重要，因为错误的类型可能导致Babel将`import`语句插入到本应为CommonJS文件的文件中的情况。这在`node_modules`正在执行依赖项编译的项目中尤其重要，因为插入 `import`语句可能导致Webpack和其他工具将文件视为ES模块，从而破坏了原本可以正常工作的CommonJS文件。

注意：此选项不会影响`.mjs`文件的解析，因为它们目前已被硬编码为始终解析为`"module"`文件。

ERROR in static/js/vendor.ccd00b2b6f82b7e48e5a.js from UglifyJs Unexpected token: name (raf) [./~/resize-detector/esm/index.js:1,0][static/js/vendor.ccd00b2b6f82b7e48e5a.js:19742,4] 项目打包，控制台报错

由于当前我的项目是 webpack 单独配置的打包参数，未集成 Vue-CLI ，所以在引入 vue-echarts 依赖后，需要手动增加两个配置，否则就会出现如标题所示的报错信息

参照文档：vue-echarts 官方文档指南
- 编辑 build => webpack.base.conf.js 文件，具体的配置代码如下
```
{
  test: /\.js$/,
  loader: 'babel-loader?cacheDirectory',
  include: [
    resolve('src'),
    resolve('test'),
    // https://github.com/ecomfe/vue-echarts#usage 新增配置
    resolve('node_modules/vue-echarts'),
    resolve('node_modules/resize-detector')
  ]
},
```
今天将旧项目升级到 vue-cli 4.x，但是之前做的地图二级下钻功能出现了无法返回上一级（全国地图）的 bug，导致无法使用，经过了六七个小时的反复实践，最终解决了该问题。

首先说一下，我各种网上查资料百度、github 之类的，都没有发现出现我这个问题的，所以我怀疑也可能是自身升级的这个环境导致出现了问题。

报错信息

image.png

Uncaught (in promise) Error: Invalid geoJson format
coordinate.charCodeAt is not a function
    at Object.load (geoJSONLoader.js?4c86:80)
    at eval (geoSourceManager.js?5b87:74)
    at Array.forEach (<anonymous>)
    at each (util.js?6d8b:300)
    at Object.load (geoSourceManager.js?5b87:73)
    at ExtendedClass.getInitialData (MapSeries.js?4e10:98)
    at ExtendedClass.init (Series.js?4f85:136)
    at ExtendedClass.eval (Global.js?7e63:238)
    at Array.forEach (<anonymous>)
    at each (util.js?6d8b:300)

经过五个小时的尝试，最终判定是由于使用 this.$echarts.registerMap 注册地图之后，重新注册相同的地图导致出现的问题，但是以往这样写是没有问题的。知道了问题的所在，就是想办法解决了，遍寻文档，发现官方并没有提供清除这样注册地图的方法，最后我只好写了一个判断，只有未曾注册过该地图，才让其注册，否则是会默认使用之前注册过的地图的。
具体的核心代码如下

image.png

      // 容错处理
      if (mapJson.features) {
        mapJson.features.forEach((element) => {
          // 强行让地图中的文字居中 https://github.com/apache/incubator-echarts/issues/4866#issuecomment-270562424
          delete element.properties.cp
        })
        console.log(this.$echarts.getMap(latnName))
        console.log(this.$echarts)
        // 手动注册地图，需要主要的地方：这里一定得是中文名称才行；
        // 20201226 修复新 bug：如果之前注册过了该地图，再次重复注册的话会报错，导致无法正常显示地图
        !this.$echarts.getMap(latnName) &&
          this.$echarts.registerMap(`${latnName}`, mapJson)
        // 手动设置数据
        this.$refs.mapChart &&
          this.$refs.mapChart.mergeOptions(this.mapChartOptions, true)
      }

options.yAxis,type === 'category' 时，文本显示不全

问题截图

image.png

解决方法：增加属性

grid: {
  containLabel: true
}

成功后的演示效果

vue-echarts options.grid.containLabel=true 演示.gif