Vue+Echart bar chart realizes epidemic data statistics

1. First install echarts in the project
2. Introduce column chart template in echarts
3. Import data through API
4. Integrate the code

Four steps, four steps. If you jump directly to the end, remember to configure some dependencies and environment.

1. First install echarts in the project

1. Install echarts dependency package

npm install echarts --save

2. Create the echarts.js file in the plugins directory and import the echarts dependency package into it

import Vue from 'vue'
import echarts from 'echarts' //This needs to be noted that there may be an error, you can use the following method Vue.prototype.$echarts = echarts

Using the general method above, the following error may occur, "export 'default' (imported as 'echarts') was not found in 'echarts'

This is because Echarts 5.x no longer supports the above import method. For details, please visit the Echarts official website

In short, it is changed to the following:

import Vue from 'vue'
import * as echarts from 'echarts' //The difference is here Vue.prototype.$echarts = echarts

3. Introduce the echart.js we just created in the nuxt.config.js configuration file

 plugins: ['~plugins/echarts']
 //I only wrote to add this, it does not mean that there is only this here//You can also use the form of '@/plugins/echarts', they are almost the same

2. Introduce column chart template in echarts

(This is written down step by step. If you don’t want to read it, you can jump to the end where there is the final code)

The code in the project says:

<template>
  <div id="echarts">
    <div id="myChart"></div> 
  </div>
</template>
<script type="text/javascript">
export default {
  name: "Echarts",
  data() {
    return {};
  },
  methods: {
      echartsInit() { //Define a method to create a chart let myChart = this.$echarts.init(document.getElementById("myChart"));
      
      myChart.setOption({
        title:
          text: "echarts' bar chart to realize epidemic statistics",
          textAlign: "auto",
          left: 'center'
        },
        tooltip: {},
        // Province (horizontal axis)
        xAxis:
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          //data: this.areaName, //This is the final data, indicating that you can start the test without using this type: "category",
          axisLabel: {
            rotate: -45, // Rotate 30 degrees, otherwise the horizontal axis will not be fully displayed show: true, // This line of code controls whether the text on the x-axis is displayed},
        },
        yAxis: {},
        // Confirmed number series: [
          {
            name: "Total number of confirmed cases",
            type: "bar",
            //data: this.areaConfirm, //This is the final data, indicating that you can start the test without this data: [120, 200, 150, 80, 70, 110, 130],
          },
        ],
      });
    },
  }
  //mounted is called after the template is rendered into HTML, usually after the initialization page is completed // and then some necessary operations are performed on the HTML DOM node mounted() {
  	this.echartsInit();
  },
  }
</script>
<style scoped>
	#myChart {
	  width: 100%;
	  height: 300px;
	  margin-left: auto;
	  margin-right: auto;
	}
</style>

3. Import data through API

The interface address I use provided by Tencent: https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5 Click to view

We can see a lot of data, so we need to clean and split the data to get the data we need

1. First we need to solve the cross-domain problem

npm install axios @nuxtjs/axios @nuxtjs/proxy

2. After installation, add the following configuration in the nuxt.config.js file:

module.exports = {
//I show the parts to be added, not all modules: ["@nuxtjs/axios"],

  axios:
    proxy: true
  },

  proxy: {
    '/api/': {
    target: 'https://view.inews.qq.com', //This website is open source and can request data pathRewrite: {
    '^/api/': '/',
    changeOrigin: true
    }
   }
  },
}

3. Process the interface data

    getData() {
      this.$axios.get(`/api/g2/getOnsInfo?name=disease_h5`).then(({ data }) => {
        //console.log(JSON.parse(data.data.replace('\\"', "'")));
        this.area = JSON.parse(
          data.data.replace('\\"', "'")
        ).areaTree[0].children;
        // Area name this.areaName = this.area.map((o) => {
          return o.name;
        });
        //Total number of confirmed cases this.areaConfirm = this.area.map((o) => {
          return o.total.confirm;
        });
        console.log(this.areaConfirm);
        // Current number of confirmed cases hh It seems that I didn't use it in the end. If you need it, you can refer to it this.areaNowConfirm = this.area.map((o) => {
          return o.total.nowConfirm;
        });
        this.echartsInit();
      });
    },

The processed data clearly shows: Just take what you want.

4. Integrate the code

Wow, it's finally finished, here's my code

<template>
  <div id="echarts">
    <div id="myChart"></div>
  </div>
</template>
<script type="text/javascript">
export default {
  name: "Echarts",
  data() {
    return {
      area: [],
      areaName: [],
      areaConfirm: [],
      areaNowConfirm: [],
    };
  },
  
  methods: {
    getData() {
      this.$axios.get(`/api/g2/getOnsInfo?name=disease_h5`).then(({ data }) => {
        console.log(JSON.parse(data.data.replace('\\"', "'")));
        this.area = JSON.parse(
          data.data.replace('\\"', "'")
        ).areaTree[0].children;
        // Area name this.areaName = this.area.map((o) => {
          return o.name;
        });
        //Total number of confirmed cases this.areaConfirm = this.area.map((o) => {
          return o.total.confirm;
        });
        console.log(this.areaConfirm);
        // Current confirmed cases this.areaNowConfirm = this.area.map((o) => {
          return o.total.nowConfirm;
        });
        this.echartsInit();
      });
    },
    echartsInit() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        title:
          text: "echarts' bar chart to realize epidemic statistics",
          textAlign: "auto",
          left: 'center'
        },
        tooltip: {},
        // Province xAxis: {
          data: this.areaName,
          type: "category",
          axisLabel: {
            rotate: -45, // Rotate 30 degrees show: true, // This line of code controls whether the text on the x-axis is displayed},
        },
        yAxis: {},
        // Confirmed number series: [
          {
            name: "Total number of confirmed cases",
            type: "bar",
            data: this.areaConfirm,
          },
        ],
      });
    },
  },
  mounted() {
    this.getData();
    this.echartsInit();
  },
};
</script>
<style scoped>
#myChart {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}
</style>

This is the end of this article about Vue+Echart bar chart to realize epidemic data statistics. For more relevant Vue Echart bar chart data statistics content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: