vue封装公共echarts组件

1. 下载echarts

npm install echarts

mian.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3. components文件下新建echartsPie.vue文件

<template>

            <div :id="this.id" style="width:100%;height:100%"></div>
        
</template>

<script>
export default {
   props:{
   // 定义接受的数据 
      id:{
          type:String, //数据类型
          default:'tab1' //无数据时候默认为
      },
      pieData:{
           type:Array,
          default:null
      },
      pieName:{
          type:String,
          default:null
      }
   },
   data(){
       return{

       }
   },
   created(){
       console.log(this.id)
   },
   mounted(){
       this.$nextTick(function () {
       this.drawLine()
       })
   },
   methods:{
        drawLine(){
       // 基于准备好的dom，初始化echarts实例
       let myChart = this.$echarts.init(document.getElementById(this.id))
       // 绘制图表
       myChart.setOption({
       
           title: {
       text: this.pieName,
       subtext: '',
       left: 'center'
   },
   tooltip: {
       trigger: 'item',
       formatter: '{a} <br/>{b} : {c} ({d}%)'
   },
   legend: {
       orient: 'vertical',
       left: 'left',
       data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
       show:false
   },
   series: [
       {
           name: '访问来源',
           type: 'pie',
           radius: '70%',
           center: ['50%', '50%'],
           data: this.pieData,
           emphasis: {
               itemStyle: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
           }
       }
   ]
       });
       myChart.resize();
   }
   }
}
</script>

<style scoped>

</style>

3. utils文件下新建components.js文件 全局注册组件

import Vue from 'vue'
import echartPie from '../components/echartsPie'
export default (Vue) => {
	Vue.component("echartPie", echartPie)
}

4.使用 引入注册的标签 定义需要传递过去的数据 涉及到vue的组件传值方面的知识

<template>

                <echartPie :id='tab1' :pieData='piedata' :pieName='pieName'></echartPie>
        
                  <echartPie :id='tab2' :pieData='piedata' ></echartPie>
                


</template>

<script>
export default {
    data(){
        return{
            tab1:'tab1',
            tab2:'tab2',
            pieName:'支付信息',
            piedata:[{value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 274, name: '联盟广告'},]
        }
    },
    mounted(){
        
     

    },
    methods:{
         
    }
}
</script>

<style scoped>

</style>

效果图

可以看到我在第二个pie标签里我并没有传送name值 所以第二个echarts是没有标题的
这个传送的数据是少量的 如果有很多的数据 可以直接绑定一个对象传送 少些很多冒号
注意echars图的外层盒子需要高度 不然所有的图会缩在一起