1、折线图的绘制

          <!-- 折线图 -->
          <div style="padding:0 20px;" v-show="lineOrBarOrTable === 'line'">
            <div class="lineEchartBody" id="lineEchartBody"></div>
          </div>
          <div @click="exportPdf>导出pdf</div>

  mounted() {
    
    
    this.lineEchartBody = echarts.init(document.getElementById('lineEchartBody'));
    this.createLineChart();
  },
  import {
    
     lineChartConfig } from '../config/linechart-trend.js';
  methods: {
    
    
      createLineChart() {
    
    
      let lineChart = lineChartConfig(this.lineCategories, this.lineDataName, this.lineSeries);
      this.lineEchartBody.setOption({
    
    }, true);  //阻止复用
      this.lineEchartBody.setOption(lineChart, true);
    },
  }

//将echarts一些数据放入到linechart-trend.js中

export const lineChartConfig = function(lineCategories, lineDataName, lineSeries) {
    
    
  let createSeries = [];
  lineSeries.forEach((item, index) => {
    
    
    console.log('11', item, index);
    let obj = {
    
    
      name: item.name,
      data: item.data,
      type: 'line',
      symbolSize: 6,
      smooth: false, //折线有无弧度
      itemStyle: {
    
    
        normal: {
    
    
          label: {
    
    
            //拐点上显示数值
            show: true,
          },
        },
      },
      showAllSymbol: true,
    };
    createSeries.push(obj);
  });
  return {
    
    
    title: {
    
    
      subtext: '客流（人）',
      padding: [20, 0, -40, 0],
    },
    tooltip: {
    
    
      trigger: 'axis',
    },
    legend: {
    
    
      data: lineDataName,
      x: 'right',
      y: 'top',
      padding: [5, 30, 0, 0],
    },
    grid: {
    
    
      left: '1%',
      right: '1%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
    
    
      boundaryGap: true, //false没有边距，true有边距
      type: 'category',
      data: lineCategories,
      axisTick: {
    
    
        show: false, //去除刻度线
      },
      axisLabel: {
    
    
        color: '#4d4d4d',
        fontSize: 11,
        interval: 0, //x轴刻度配置，0:表示全部显示不间隔，auto:表示自动根据刻度个数和宽度自动设置间隔个数
      },
      axisLine: {
    
    
        lineStyle: {
    
    
          color: '#e6e6e6', //y轴轴线颜色
        },
      },
    },
    yAxis: {
    
    
      type: 'value',
      axisTick: {
    
    
        show: false, //去除刻度线
      },
      axisLabel: {
    
    
        color: '#4d4d4d',
      },
      axisLine: {
    
    
        lineStyle: {
    
    
          color: '#e6e6e6', //y轴轴线颜色
        },
      },
      splitLine: {
    
      //网格线
        lineStyle: {
    
    
          color: '#e6e6e6',
          type: 'dashed',
        },
        show: true,
      },
    },
    series: createSeries,
  };
};

重点！将echart截图，并导出成pdf文档

    /**
     * 导出pdf
     */
    exportPdf() {
    
    
      let dataURL = '';
      var img = new Image();
      img.src = this.barEchartBody.getDataURL({
    
    
        type: 'png',
        pixelRatio: 1,
        backgroundColor: '#fff',
       });
  
      let _this = this;
      img.onload = function() {
    
    
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        // var dataURL = canvas.toDataURL('image/png');
        _this.dataURL = canvas.toDataURL('png').split('data:image/png;base64,')[1]; //拿到图片路径
        let params = {
    
    
          imgUrl: _this.dataURL,
        };
        const res = apis.downloadFlowPDF(params).then(res => {
    
      //将图片路径放入接口中（注意！POST的方式必须是postuploadfile方式
          let blob = res.data;
          _this.$refs.exportB.href = window.URL.createObjectURL(blob);//成功后将内容在下方展示
          _this.$refs.exportB.download = _this.titleTip + '.pdf';
          _this.$refs.exportB.click();
        });
      };
    },