vue中实现echarts效果

步骤一：安装：npm  i  echarts  --s

步骤二：封装echarts组件

<template>
  <div  class="echarts" ref="chart"></div>
</template>

<script>
    const echarts = require('echarts');
    export default {
        props: [],
        watch: {},
        data() {
            return {
               

                myChart:null,  //给echarts的变量设置公共样式

            }
        },
        created() {
        },
        mounted() {
          this.initCharts();  //初始化调用
          let _this = this;  //为了防止this转移
          window.onresize = ()=>{    //监听页面的变化
            this.myChart.resize();   //调用echarts自身resize属性

          }

        },
      //注销window.onresize事件
      destroyed(){
        window.onresize = null;
      },
        methods: {
          initCharts(){
            this.myChart = echarts.init(this.$refs.chart); //初始化渲染echarts到这个容器里面
            this.myChart.setOption({  //echarts的配置


              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              legend: {
                orient: 'vertical',
                left: 10,
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
              },
              series: [
                {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['50%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '30',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                  ]
                }
              ]



            })
          }
        },
        components: {},
        beforeDestroy() {
        }

    }
</script>

<style lang='less' scoped>
  .echarts{
    width: 100%;
    height:500px;
  }
</style>