vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue打包echarts无法显示

Vue打包echarts无法显示的问题及解决过程

作者：Tiger_Paul

文章主要介绍了使用CDN方式减少Vue项目打包大小并成功显示ECharts图表的方法,包括在public/index.html引入CDN、配置vue.config.js排除ECharts依赖、页面引用、数据渲染等步骤

为减小Vue项目打包大小，采用cdn方式引入echarts。跟着我的步骤做，就不会出现打包后无法显示的情况。

Vue打包echarts无法显示的问题及解决过程

1、采用CDN引入echarts，在项目的public中的index.html中引入CDN

<!-- 引入echarts CDN脚本 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script>
<!-- 引入lodash CDN脚本,用于数据合并 -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

2、在vue.config.js中的发布模式下，设置打包时排除echarts本地项目依赖的包。

chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main_prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        'vue-quill-editor': 'VueQuillEditor'
      })
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main_dev.js')
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }

3、在vue页面中加入引用

import * as echarts from 'echarts'
import _ from 'lodash'

4、查询数据库，并与渲染设置合并，注意echarts渲染要挂载在mounted函数里，因为要等 dom 读取完后才能设置echarts数据。

export default {
  data () {
    return {
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#72a8fa'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    async initChart(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 获取数据
      const { data: res } = await this.$http.get('reports/type/1')
      if (res.meta.status !== 200) {
        this.$message.error('数据获取失败！')
      }
      console.log(res.data)
      // 指定图表的配置项和数据,合并数据
      var option = _.merge(res.data, this.options)
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

根据以上步骤，打包后就能实现echarts图表了，并且占用资源很小。

Vue打包echarts无法显示的问题及解决过程_图2

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文