How to use PHP and Vue.js to export and print statistical charts

How to use PHP and Vue.js to implement the export and print functions of statistical charts

Exporting and printing statistical charts is a common requirement. In web applications, use PHP and Vue.js can easily implement such functionality. This article will introduce how to use these two technologies to implement the export and print functions of statistical charts, and provide corresponding code examples.

1. Preparation
   First, we need a statistical chart library to generate charts. In this example, we use ECharts 4 as the statistical charting library. You can download the latest version of the library file from the ECharts official website (https://www.echartsjs.com/) and include it in your project.
2. Create a statistical chart
   Next, we use Vue.js to create a simple statistical chart. The following is an example of a Bar chart:

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.renderChart()
  },
  methods: {
    renderChart() {
      // 统计数据
      const data = {
        categories: ['A', 'B', 'C', 'D', 'E'],
        series: [
          {
            name: '数据1',
            data: [20, 30, 15, 40, 25]
          },
          {
            name: '数据2',
            data: [10, 15, 25, 20, 30]
          }
        ]
      }

      // 配置项
      const options = {
        title: {
          text: '统计图表'
        },
        legend: {
          data: data.series.map(item => item.name)
        },
        xAxis: {
          data: data.categories
        },
        yAxis: {},
        series: data.series.map(item => ({
          name: item.name,
          type: 'bar',
          data: item.data
        }))
      }

      // 渲染图表
      this.chart.setOption(options)
    }
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>

3. Export Chart
   When exporting the chart to a picture or PDF, we can use echarts.getInstanceByDom(element) provided by echarts ) method to obtain the chart instance and call the corresponding interface to export the chart.

First of all, we need to introduce html2canvas and jspdf to implement the export function. You can download the latest version of the library file from their official website (https://html2canvas.hertzen.com/, https://github.com/MrRio/jsPDF).

Then, add the method of exporting the chart in the methods of the Vue component:

export default {
  methods: {
    exportChart() {
      // 获取图表实例
      const chartInstance = echarts.getInstanceByDom(this.$refs.chart)

      // 导出为图片格式
      chartInstance
        .capture()
        .then(canvas => {
          const imageData = canvas.toDataURL("image/png")
          const link = document.createElement("a")
          link.href = imageData
          link.download = "chart.png"
          link.click()
        })
        .catch(error => console.error(error))

      // 导出为PDF格式
      chartInstance
        .capture()
        .then(canvas => {
          const imageData = canvas.toDataURL("image/png")
          const pdf = new jsPDF()
          pdf.addImage(imageData, "PNG", 0, 0)
          pdf.save("chart.pdf")
        })
        .catch(error => console.error(error))
    }
  }
}

Add the export button in the template and bind exportChart Method:

<template>
  <div>
    <div class="chart-container">
      <div ref="chart" class="chart"></div>
    </div>
    <button @click="exportChart">导出图表</button>
  </div>
</template>

4. Print Chart
   To achieve printing the chart to PDF format, we can use the same method to export the chart as an image, and then use the jsPDF library to add it to the PDF document and to print.

Add a method to print the chart in the methods of the Vue component:

export default {
  methods: {
    printChart() {
      // 获取图表实例
      const chartInstance = echarts.getInstanceByDom(this.$refs.chart)

      // 导出为图像
      chartInstance
        .capture()
        .then(canvas => {
          const imageData = canvas.toDataURL("image/png")
          const pdf = new jsPDF()
          pdf.addImage(imageData, "PNG", 0, 0)
          pdf.autoPrint()
          window.open(pdf.output('bloburl'), '_blank')
        })
        .catch(error => console.error(error))
    }
  }
}

Add a print button in the template and bind printChartMethod:

<template>
  <div>
    <div class="chart-container">
      <div ref="chart" class="chart"></div>
    </div>
    <button @click="printChart">打印图表</button>
  </div>
</template>

So far, we have implemented the function of using PHP and Vue.js to export and print statistical charts. With the above steps, you can freely export the chart as an image or PDF, as well as print the chart anywhere.

I hope this article can be helpful to you, and I wish you success in developing web applications using PHP and Vue.js!

The above is the detailed content of How to use PHP and Vue.js to export and print statistical charts. For more information, please follow other related articles on the PHP Chinese website!