vue 项目中使用echarts（导出echarts转成png图片）

vue项目中使用echarts（在mounted初始化统计图）

 demo1(data){
        let myChart = this.$echarts.init(document.getElementById('demo1'));
        myChart.clear();
        var option = {
          color: this.globalColorArray,
          title: {
            text: '鸟巢比例',
            x: 'center',
            textStyle: {
              color: '#000000',
              fontSize: '16px'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series: [
            {
              name: '鸟巢入住率',
              type: 'pie',
              radius: '70%',
              center: ['50%', '50%'],
              data: data,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 10)
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },

案例：如果需要导出echarts转成png图片

      charts1(){
        let vm = this;
        var ratioSiteDtoList = []
        vm.XHData.personnelConstitute.ratioSiteDtoList.forEach(e => {
          var z = {
            value: e.siteUserSum,
            name: e.siteName + e.siteRatio + '%',
          }
          ratioSiteDtoList.push(z);
        })

        let myChart = this.$echarts.init(document.getElementById('demo1'));
        var option = {
          title: {
            text: vm.yueTjNum + '在岗人员情况',
            top: 'bottom',
            left: 'center',
            textStyle: {
              fontSize: 50
            }
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '40%',
              center: ['40%', '50%'],
              data: ratioSiteDtoList,
              emphasis: {
                itemStyle: {
                  shadowBlur: 30,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              animation: false,
              label: {
                fontSize: 30
              }
            },

          ],
        };

        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
          var img = new Image;
          img.src = myChart.getDataURL({ //mychart1的option
            type: "png",
            backgroundColor: "#fff"
          })
          vm.echartImg1 = img.src
        }, 500)
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },//人员组成