Vue+Echart柱状图实现疫情数据统计

四步走四步走，要是直接跳到最后的话，记得有些依赖和环境配置一下哦。

1.首先在项目中安装echarts

1.安装echarts依赖包

npm install echarts --save

2.在plugins目录下创建echarts.js文件并在里面引入echarts依赖包

import vue from 'vue'import echarts from 'echarts'//这个需要注意一下有可能会报错，可以用下面方法vue.prototype.$echarts = echarts

用以上通用的方法，可能会出现以下报错，“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

是因为echa党员主要表现rts 5.x 不再支持上面的引入方式，详情可以查看echarts官网

总而言之就是改为以下：

import vue from 'vue'import * as echarts from 'echarts' //区别在这里vue.prototype.$echarts = echarts

3.在nuxt.config.js配置文件中引入我们刚刚创建的echart.js

 plugins: ['~plugins/echarts'] //我只写了要加这个，不代表这里只有这个 //还可以用'@/plugins/echarts'形式，都差不多的

2.在echarts引入柱形图模板

（这里是一步步写下来的，要是不想看可以直接跳到最后有最终代码哦）

在项目中的代码表示：

<template>  <div id="echarts">    <div id="mychart"></div>   </div></template><script type="text/javascript">export default {  name: "echarts",  data() {    return {};  },  methods: {      echartsinit() { //定义一个创建图表的方法            let mychart = this.$echarts.init(document.getelementbyid("mychart"));            mychart.toption({        title: {          text: "echarts的柱状图来实现疫情统计",          textalign: "auto",          left: 'center'        },        tooltip: {},        // 省份（横坐标）        xaxis: {          data: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']          //data: this.areaname, //这是最后的数据表示开始测试可以先不用这个          type: "category",          axislabel: {            rotate: -45, // 旋转30度，不然横坐标显示不完全            show: true, //这行代码控制着坐标轴x轴的文字是否显示          },        },        yaxis: {},        // 确诊数量        ries: [          {            name: "总确诊数量",            type歌窈窕之章: "bar",            //data: this.areaconfirm,//这是最后的数据表示开始测试可以先不用这个            data: [120, 200, 150, 80, 70, 110, 130],          },        ],      });    },  }  //mounted在模板渲染成html后调用，通常是初始化页面完成后  //再对html的dom节点进行一些需要的操作  mounted() {  this.echartsinit();  },  }</script><style scoped>#mychart {  width: 100%;  height: 300px;  margin-left: auto;  margin-right: auto;}</style>

3.通过api引入数据

我用的腾讯提供的接口地址：https://view.inews.qq.com/g2/getonsinfo?name=dia_h5点击查看

我们可以看到一大堆数据，那么我们要对数据进行清理和拆分才能获取我们所需要的数据

1.首先我们要解决跨域问题

npm install axios @nuxtjs/axios @nuxtjs/proxy

2.安装完成后在 nuxt.config.js 文件里面添加以下配置：

module.exports = {//我显示了要增加的部分，不是全部哦  modules: ["@nuxtjs/axios"],  axios: {    proxy: true  },  proxy: {    '/api/': {    target: 'https://view.inews.qq.com',//这个网站是开源的可以请求到数据的    pathrewrite: {    '^/api/': '/',    changeorigin: true    }   }  },}

3.对接口数据进行处理

    getdata() {      this.$axios.get(`/api/g2/getonsinfo?name=dia_h5`).then(({ data }) => {        //console.log(json.par(data.data.replace('\\"', "'")));        this.area = json.par(          data.data.replace('\\"', "'")        ).areatree[0].children;        // 地区名        this.areaname = this.area.map((o) => {          return o.name;        });        // 总确诊人数        this.areaconfirm = this.area.map((o) => {          return o.total.confirm;        });        console.log(this.areaconfirm);        // 目前确诊人数 hh 好像最后我没用，如果有需要可以参考一下        this.areanowconfirm = this.area.map((o) => {          return o.total.nowconfirm;        });        this.echartsinit();      });    },

处理完的数据可以清晰的看出： 要什么取什么就行了

4.整合代码

嚯嚯，终于完了，贴上我的代码

<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=dia_h5`).then(({ data }) => {        console.log(json.par(data.data.replace('\\"', "'")));        this.area = json.par(          data.data.replace('\\"', "'")        ).areatree[0].children;        // 地区名        this.areaname = this.area.map((o) => {          return o.name;        });  日本美女人体      // 总确诊人数        this.areaconfirm = this.area.map((o) => {          return o.total.confirm;        });        console.log(this.areaconfirm);        // 目前确诊人数        this.areanowconfirm = this.area.ma安全交通日p((o) => {          return o.total.nowconfirm;        });        this.echartsinit();      });    },    echartsinit() {      let mychart = this.$echarts.init(document.getelementbyid("mychart"));      mychart.toption({        title: {          text: "echarts的柱状图来实现疫情统计",          textalign: "auto",          left: 'center'        },        tooltip: {},        // 省份        xaxis: {          data: this.areaname,          type: "category",          axislabel: {            rotate: -45, // 旋转30度            show: true, //这行代码控制着坐标轴x轴的文字是否显示          },        },        yaxis: {},        // 确诊数量        ries: [          {            name: "总确诊数量",            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> 

到此这篇关于vue+描写人物外貌的句子echart柱状图实现疫情数据统计的文章就介绍到这了,更多相关vue echart柱状图 数据统计内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！