资料

npm 地址
github 地址

正文

1. 简单的使用

  • 安装 ``` $ npm install echarts vue-echarts

或者使用 yarn 装

$ yarn add echarts vue-echarts

  2. - `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)

  2. - `index.vue` 文件中使用（以下是官网提供的 Demo 源码 [查看地址](https://github.com/ecomfe/vue-echarts/tree/master/src/demo)）
  1. ### 2.  问题的记录
  3. 1. `Cannot assign to read only property 'exports' of object '#<Object>'` 昨天在装完包之后，试过还没事情，今天一来就跑不起来了
  5. > ![image.png](https://upload-images.jianshu.io/upload_images/9064013-1d754cb3ad318821.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  9. > 查看到是 `vue-echarts` 中 引用的 `lodash-es` 报的错误，网上检索之后，大致意思是：和 `webpack` 的版本有关系，混用 `import` 和 `module.exports` 导致的错误，[该问题的讨论地址](https://github.com/webpack/webpack/issues/4039)
  12. - 解决方法
  14. > 最简单的方法是把设置使用 `babel` 转换 `vue-echarts` 代码的地方注释掉，`vue.config.js` 文件中操作<br />
  15. ![image.png](https://upload-images.jianshu.io/upload_images/9064013-cbbcccdd29bf2a12.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  16. 但是这样也是会导致，代码的兼容性很差，只兼容最新版本的浏览器
  20. > 最优的方法是在 `babel.config.js` 添加一行配置，[解决方案提供的地址](https://github.com/ecomfe/vue-echarts/issues/213#issuecomment-528741715)

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

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

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

  2. 2. 
  3. `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]` 项目打包，控制台报错
  6. > 由于当前我的项目是 `webpack` 单独配置的打包参数，未集成 `Vue-CLI` ，所以在引入 `vue-echarts` 依赖后，需要手动增加两个配置，否则就会出现如标题所示的报错信息
  11. > [参照文档：vue-echarts 官方文档指南](https://github.com/ecomfe/vue-echarts#usage)
  15. - 
  16. 编辑 `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’) ] },

  5. 2. 
  6. 今天将旧项目升级到 `vue-cli 4.x`，但是之前做的地图二级下钻功能出现了无法返回上一级（全国地图）的 `bug`，导致无法使用，经过了六七个小时的反复实践，最终解决了该问题。
  10. > 首先说一下，我各种网上查资料 百度、github 之类的，都没有发现出现我这个问题的，所以我怀疑也可能是自身升级的这个环境导致出现了问题。
  13. - 报错信息
  15. > ![image.png](https://upload-images.jianshu.io/upload_images/9064013-d1cae9a2de7ce65b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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 () 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 () at each (util.js?6d8b:300)

  2. - 
  3. 经过五个小时的尝试，最终判定是由于使用 `this.$echarts.registerMap` 注册地图之后，重新注册相同的地图导致出现的问题，但是以往这样写是没有问题的。知道了问题的所在，就是想办法解决了，遍寻文档，发现官方并没有提供清除这样注册地图的方法，最后我只好写了一个判断，只有未曾注册过该地图，才让其注册，否则是会默认使用之前注册过的地图的。
  6. - 
  7. 具体的核心代码如下
  11. > ![image.png](https://upload-images.jianshu.io/upload_images/9064013-416311dada52d861.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  1.   // 容错处理
  2.   if (mapJson.features) {
  3.     mapJson.features.forEach((element) => {
  4.       // 强行让地图中的文字居中 https://github.com/apache/incubator-echarts/issues/4866#issuecomment-270562424
  5.       delete element.properties.cp
  6.     })
  7.     console.log(this.$echarts.getMap(latnName))
  8.     console.log(this.$echarts)
  9.     // 手动注册地图，需要主要的地方：这里一定得是中文名称才行；
  10.     // 20201226 修复新 bug：如果之前注册过了该地图，再次重复注册的话会报错，导致无法正常显示地图
  11.     !this.$echarts.getMap(latnName) &&
  12.       this.$echarts.registerMap(`${latnName}`, mapJson)
  13.     // 手动设置数据
  14.     this.$refs.mapChart &&
  15.       this.$refs.mapChart.mergeOptions(this.mapChartOptions, true)
  16.   }

```