vue - echarts - axios 踩坑

1.实现vue-echarts 的图表导出功能

解决了导出图表模糊的问题

/*导出图表*/
      exportpic(val){
        let myChart = this.$echarts.init(document.getElementById(val));
        let picInfo=myChart.getDataURL({
          type: 'png',
          pixelRatio: 1.5,  //放大两倍下载，之后压缩到同等大小展示。解决生成图片模糊问题
          backgroundColor: '#fff'
        });//获取到的是一串base64信息

        const elink = document.createElement('a');
        elink.download = '客户数展示图';
        elink.style.display = 'none';
        elink.href = picInfo;
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink)
      }

效果图

2.vue-cli3 axios的跨域处理

在package.json文件的同级目录下创建vue.config.js文件

module.exports = {
  assetsDir: 'assets', //静态资源目录（js, css, img）
  lintOnSave: false, //是否开启eslint
  devServer: {
    open: true, //是否自动弹出浏览器页面
    host: "localhost",
    port: '8080',
    https: false,   //是否使用https协议
    hotOnly: false, //是否开启热更新
    proxy: {
      '/api': {
        target: '******', //API服务器的地址
        ws: true,  //代理websockets
        changeOrigin: true, // 虚拟的站点需要更管origin
        pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
          '^/api': ''
        }
      }
    },
  }
}

3.通过接口数据绘制折线图，每5分钟请求一次

drawCustomerChart() {
        // 基于准备好的dom，初始化echarts实例
        var customerChart = this.$echarts.init(document.getElementById('customer'), 'infographic');
        // 绘制基本图表
        customerChart.setOption(option1);
        //获取数据
        var a=[]
        var b=[]
        setInterval(()=>{
          this.axios.get('接口').then(res => {
            console.log(res)
            a.push(res.data.result[0].data1.time)
            b.push(res.data.result[0].data1.mBuyPri)
            customerChart.hideLoading();
            //将异步请求获取到的数据进行装载
            customerChart.setOption({
              xAxis: {
                data: a
              },
              series: [{
                data: b
              }]
            })
          })
        },300000)

      }

4.element tab展示echarts异常

使用组件化开发即可解决