快捷導(dǎo)航

Vue打包echarts無法顯示的問題及解決過程

更新時間：2026年05月15日 14:27:47 作者：Tiger_Paul

文章主要介紹了使用CDN方式減少Vue項(xiàng)目打包大小并成功顯示ECharts圖表的方法,包括在public/index.html引入CDN、配置vue.config.js排除ECharts依賴、頁面引用、數(shù)據(jù)渲染等步驟

為減小Vue項(xiàng)目打包大小，采用cdn方式引入echarts。跟著我的步驟做，就不會出現(xiàn)打包后無法顯示的情況。

1、采用CDN引入echarts，在項(xiàng)目的public中的index.html中引入CDN

<!-- 引入echarts CDN腳本 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script>
<!-- 引入lodash CDN腳本,用于數(shù)據(jù)合并 -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

2、在vue.config.js中的發(fā)布模式下，設(shè)置打包時排除echarts本地項(xiàng)目依賴的包。

chainWebpack: config => {
    // 發(fā)布模式
    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
      })
    })
    // 開發(fā)模式
    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、查詢數(shù)據(jù)庫，并與渲染設(shè)置合并，注意echarts渲染要掛載在mounted函數(shù)里，因?yàn)橐?nbsp;dom 讀取完后才能設(shè)置echarts數(shù)據(jù)。

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(){
      // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
      var myChart = echarts.init(document.getElementById('main'))
      // 獲取數(shù)據(jù)
      const { data: res } = await this.$http.get('reports/type/1')
      if (res.meta.status !== 200) {
        this.$message.error('數(shù)據(jù)獲取失??！')
      }
      console.log(res.data)
      // 指定圖表的配置項(xiàng)和數(shù)據(jù),合并數(shù)據(jù)
      var option = _.merge(res.data, this.options)
      // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
      myChart.setOption(option)
    }
  }
}
</script>

根據(jù)以上步驟，打包后就能實(shí)現(xiàn)echarts圖表了，并且占用資源很小。

Vue打包echarts無法顯示的問題及解決過程_圖2