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>' 昨天在装完包之后，试过还没事情，今天一来就跑不起来了

查看到是 vue-echarts 中引用的 lodash-es 报的错误，网上检索之后，大致意思是：和 webpack 的版本有关系，混用 import 和 module.exports 导致的错误，该问题的讨论地址
- 解决方法
  
  最简单的方法是把设置使用 babel 转换 vue-echarts 代码的地方注释掉，vue.config.js 文件中操作
  
  但是这样也是会导致，代码的兼容性很差，只兼容最新版本的浏览器
  最优的方法是在 babel.config.js 添加一行配置，解决方案提供的地址
  1
  2
  3
  4
  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 依靠当前文档的类型来决定是插入import声明还是require()调用。 @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')
  ]
},

资料

正文

1. 简单的使用

2. 问题的记录

sourceType

`sourceType`