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. 问题的记录

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

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

  • 解决方法

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

image.png

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

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

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

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"`文件。
  1. 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')
        ]
      },
      
  2. 今天将旧项目升级到 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)
      }
  1. options.yAxis,type === 'category' 时,文本显示不全
  • 问题截图
image.png
  • 解决方法:增加属性
grid: {
  containLabel: true
}
  • 成功后的演示效果
vue-echarts options.grid.containLabel=true 演示.gif
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,456评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,763评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,265评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,716评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,071评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,435评论 1 212
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,751评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,437评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,148评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,411评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,912评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,281评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,913评论 3 234
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,020评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,776评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,462评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,350评论 2 262