vue按需引入/全局引入echarts

Posted 2020-11-27 xzybk

npm install echarts -S

　　

1.按需引入

新建echarts.js公共引入

// 文件路径 @/lib/echarts.js 自行配置
 
 // 加载echarts，注意引入文件的路径
 import echarts from ‘echarts/lib/echarts‘
 
 // 再引入你需要使用的图表类型，标题，提示信息等
 import ‘echarts/lib/chart/bar‘
 import ‘echarts/lib/component/legend‘
 import ‘echarts/lib/component/title‘
 import ‘echarts/lib/component/tooltip‘
 
 export default echarts

　　在echart.vue文件引入echarts.js文件

<template>
  <div class="about">
    <!-- <h2>This is an aboutEchart page</h2> -->
    <div id="myChart" ref="myChart"></div>     
  </div>
</template>
<script>
import echarts from ‘@/common/echarts‘

2.全局引入echarts

　

在main.js中

// 引入echarts
import echarts from ‘echarts‘
Vue.prototype.$echarts = echarts