Shulou(Shulou.com)06/02 Report--

This article mainly explains "Vue+Echart bar chart how to achieve epidemic data statistics", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Vue+Echart bar chart how to achieve epidemic data statistics" bar!

1. First install echarts in the project

1. Install the echarts dependency package

Npm install echarts-save

two。 Create an echarts.js file in the plugins directory and introduce the echarts dependency package into it

Import Vue from 'vue'import echarts from' echarts'// should be aware of the possibility of an error. You can use the following method Vue.prototype.$echarts = echarts

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

This is because the above introduction method is no longer supported by Echarts 5.x. For more information, please see the official website of Echarts.

To sum up, 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 into the nuxt.config.js configuration file

Plugins: ['~ plugins/echarts'] / / just because I wrote to add this doesn't mean it's the only one here / / can also be in the form of'@ / plugins/echarts', which is about the same. Introduction of column Chart template in echarts

(this is written down step by step. If you don't want to see it, you can skip to the end and have the final code.)

The code in the project indicates:

Export default {name: "Echarts", data () {return {};}, methods: {echartsInit () {/ / define a method for creating a chart let myChart = this.$echarts.init (document.getElementById ("myChart")) MyChart.setOption ({title: {text: "echarts histogram to achieve epidemic statistics", textAlign: "auto", left: 'center'}, tooltip: {}, / / province (Abscissa) xAxis: {data: [' Mon', 'Tue',' Wed', 'Thu' 'Fri',' Sat', 'Sun'] / / data: this.areaName, / / this is the last data indicating that you can start testing without this type: "category", axisLabel: {rotate:-45, / / rotate 30 degrees Otherwise, the Abscissa display is not complete show: true, / / this line of code controls whether the text on the x-axis of the coordinate axis displays},}, yAxis: {}, / / the number of diagnoses series: [{name: "total number of diagnoses", type: "bar" / / data: this.areaConfirm,// this is the final data indicating that you can start testing without this data: [120,200,150,80,70,110,130],},],}) },} / / mounted is called after the template is rendered to html, usually mounted () {this.echartsInit ();},} # myChart {width: 100%; height: 300px; margin-left: auto; margin-right: auto;} 3 on the dom node of html after the initialization page is completed. Bring in data through API

I use the interface address provided by Tencent: https://view.inews.qq.com/g2/getOnsInfo?name=disease_h6 click to view

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

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

Npm install axios @ nuxtjs/axios @ nuxtjs/proxy

two。 After the installation, add the following configuration to the nuxt.config.js file:

Module.exports = {/ / I show what I want to add Not all modules: ["@ nuxtjs/axios"], axios: {proxy: true}, proxy: {'/ api/': {target: 'https://view.inews.qq.com',// this website is open source pathRewrite: {' ^ / api/':'/', changeOrigin: true}},}

3. Process the interface data

GetData () {this.$axios.get (`/ api/g2/getOnsInfo?name=disease_ h6`). Then (({data}) = > {/ / console.log (JSON.parse (data.data.replace ('\ ","'")); this.area = JSON.parse (data.data.replace ('\", "')). AreaTree [0] .children / / locale name this.areaName = this.area.map ((o) = > {return o.name;}); / / Total number of confirmed cases this.areaConfirm = this.area.map ((o) = > {return o.total.roomm;}); console.log (this.areaConfirm) / / the current number of diagnosed hh seems to be useless to me. If necessary, please refer to this.areaNowConfirm = this.area.map ((o) = > {return o.total.nowConfirmware;}); this.echartsInit ();});}

The processed data can be clearly seen: just take what you want.

4. Integration code

Ho-ho, it's over at last. Paste my code.

Export default {name: "Echarts", data () {return {area: [], areaName: [], areaConfirm: [], areaNowConfirm: [],} }, methods: {getData () {this.$axios.get (`/ api/g2/getOnsInfo?name=disease_ h6`). Then (({data}) = > {console.log (JSON.parse (data.data.replace ('\ ","'")); this.area = JSON.parse (data.data.replace ('\", "')). AreaTree [0] .children / / locale name this.areaName = this.area.map ((o) = > {return o.name;}); / / Total number of confirmed cases this.areaConfirm = this.area.map ((o) = > {return o.total.roomm;}); console.log (this.areaConfirm) / / current number of confirmed cases this.areaNowConfirm = this.area.map ((o) = > {return o.total.nowConfirmware;}); this.echartsInit ();}), echartsInit () {let myChart = this.$echarts.init (document.getElementById ("myChart")) MyChart.setOption ({title: {text: "echarts histogram to achieve epidemic statistics", textAlign: "auto", left: 'center'}, tooltip: {}, / / Provincial 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 of the axis is displayed},}, yAxis: {}, / / the number of diagnoses series: [{name: "Total number of diagnoses" Type: "bar", data: this.areaConfirm,},],} },}, mounted () {this.getData (); this.echartsInit ();},},}; # myChart {width: 100%; height: 300px; margin-left: auto; margin-right: auto;} so far, I believe you have a deeper understanding of "Vue+Echart histogram how to achieve epidemic data statistics". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.