vue cli3 引入 Echarts

1.全局安装Echarts

npm install echarts -S

2.在main.js钟全局引入Echarts

// 引入echarts
import echarts from 'echarts' 
// 更改原型Echarts名称
Vue.prototype.$echarts = echarts

3.在项目中使用

<template>
  <div class="echartsDemo">
    <div id="myEcharts" ></div>
  </div>
</template>
<script>
export default {
     
  name: 'echartsDemo',
  data () {
     
    return {
     
    }
  },
  mounted () {
     
  	// 获取容器dom
    var dom = document.getElementById('myEcharts')
    // 初始化Echarts
    var myChart = this.$echarts.init(dom)
    // 绘制图表
    myChart.setOption({
     
        tooltip: {
     
        trigger: 'item'
    },
    legend: {
     
        top: '5%',
        left: 'center'
    },
    series: [
        {
     
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
     
                show: false,
                position: 'center'
            },
            emphasis: {
     
                label: {
     
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
     
                show: false
            },
            data: [
                {
     value: 1048, name: '搜索引擎'},
                {
     value: 735, name: '直接访问'},
                {
     value: 580, name: '邮件营销'},
                {
     value: 484, name: '联盟广告'},
                {
     value: 300, name: '视频广告'}
            ]
        }
    ]
  })
}
</script>

<style scoped>
#myEcharts {
     
	width:500px;
	height:500px;
}
</style>

4.成果

5.如果会有以下报错,是因为默认安装了5.0以上版本,在packge.json中可以看到

"export 'default' (imported as 'echarts') was not found in 'echarts'

6.解决报错,通过安装4.9.0的版本

npm install [email protected] --save

7.如果是放在弹窗中,出现 Cannot read property ‘getAttribute’ of null 报错,择应该在 beforeUpdate钩子函数中进行调用