耀极客论坛

 找回密码
 立即注册
查看: 570|回复: 0

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

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-7 01:18:48 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了在Vue nuxt项目中,如何使用Echart(百度图表)柱状图来实现疫情数据统计,感兴趣的小伙伴可以跟随小编一起学习一下
  四步走四步走,要是直接跳到最后的话,记得有些依赖和环境配置一下哦。

1.首先在项目中安装echarts
  1.安装echarts依赖包
  1. npm install echarts --save
复制代码
  2.在plugins目录下创建echarts.js文件并在里面引入echarts依赖包
  1. import Vue from 'vue'
  2. import echarts from 'echarts'//这个需要注意一下有可能会报错,可以用下面方法
  3. Vue.prototype.$echarts = echarts
复制代码
  用以上通用的方法,可能会出现以下报错,“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
  是因为Echarts 5.x 不再支持上面的引入方式,详情可以查看Echarts官网
  总而言之就是改为以下:
  1. import Vue from 'vue'
  2. import * as echarts from 'echarts' //区别在这里
  3. Vue.prototype.$echarts = echarts
复制代码
  3.在nuxt.config.js配置文件中引入我们刚刚创建的echart.js
  1. plugins: ['~plugins/echarts']
  2. //我只写了要加这个,不代表这里只有这个
  3. //还可以用'@/plugins/echarts'形式,都差不多的
复制代码
2.在echarts引入柱形图模板
  (这里是一步步写下来的,要是不想看可以直接跳到最后有最终代码哦)

  在项目中的代码表示:
  1. ‹template>
  2.   ‹div id="echarts">
  3.     ‹div id="myChart">‹/div>
  4.   ‹/div>
  5. ‹/template>
  6. ‹script type="text/javascript">
  7. export default {
  8.   name: "Echarts",
  9.   data() {
  10.     return {};
  11.   },
  12.   methods: {
  13.       echartsInit() { //定义一个创建图表的方法
  14.       
  15.       let myChart = this.$echarts.init(document.getElementById("myChart"));
  16.       
  17.       myChart.setOption({
  18.         title: {
  19.           text: "echarts的柱状图来实现疫情统计",
  20.           textAlign: "auto",
  21.           left: 'center'
  22.         },
  23.         tooltip: {},
  24.         // 省份(横坐标)
  25.         xAxis: {
  26.           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  27.           //data: this.areaName, //这是最后的数据表示开始测试可以先不用这个
  28.           type: "category",
  29.           axisLabel: {
  30.             rotate: -45, // 旋转30度,不然横坐标显示不完全
  31.             show: true, //这行代码控制着坐标轴x轴的文字是否显示
  32.           },
  33.         },
  34.         yAxis: {},
  35.         // 确诊数量
  36.         series: [
  37.           {
  38.             name: "总确诊数量",
  39.             type: "bar",
  40.             //data: this.areaConfirm,//这是最后的数据表示开始测试可以先不用这个
  41.             data: [120, 200, 150, 80, 70, 110, 130],
  42.           },
  43.         ],
  44.       });
  45.     },
  46.   }
  47.   //mounted在模板渲染成html后调用,通常是初始化页面完成后
  48.   //再对html的dom节点进行一些需要的操作
  49.   mounted() {
  50.   this.echartsInit();
  51.   },
  52.   }
  53. ‹/script>
  54. ‹style scoped>
  55. #myChart {
  56.   width: 100%;
  57.   height: 300px;
  58.   margin-left: auto;
  59.   margin-right: auto;
  60. }
  61. ‹/style>
复制代码
3.通过API引入数据
  我用的腾讯提供的接口地址:https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5点击查看

  我们可以看到一大堆数据,那么我们要对数据进行清理和拆分才能获取我们所需要的数据
  1.首先我们要解决跨域问题
  1. npm install axios @nuxtjs/axios @nuxtjs/proxy
复制代码
  2.安装完成后在 nuxt.config.js 文件里面添加以下配置:
  1. module.exports = {
  2. //我显示了要增加的部分,不是全部哦
  3.   modules: ["@nuxtjs/axios"],
  4.   axios: {
  5.     proxy: true
  6.   },
  7.   proxy: {
  8.     '/api/': {
  9.     target: 'https://view.inews.qq.com',//这个网站是开源的可以请求到数据的
  10.     pathRewrite: {
  11.     '^/api/': '/',
  12.     changeOrigin: true
  13.     }
  14.    }
  15.   },
  16. }
复制代码
  3.对接口数据进行处理
  1.     getData() {
  2.       this.$axios.get(`/api/g2/getOnsInfo?name=disease_h5`).then(({ data }) => {
  3.         //console.log(JSON.parse(data.data.replace('\"', "'")));
  4.         this.area = JSON.parse(
  5.           data.data.replace('\"', "'")
  6.         ).areaTree[0].children;
  7.         // 地区名
  8.         this.areaName = this.area.map((o) => {
  9.           return o.name;
  10.         });
  11.         // 总确诊人数
  12.         this.areaConfirm = this.area.map((o) => {
  13.           return o.total.confirm;
  14.         });
  15.         console.log(this.areaConfirm);
  16.         // 目前确诊人数 hh 好像最后我没用,如果有需要可以参考一下
  17.         this.areaNowConfirm = this.area.map((o) => {
  18.           return o.total.nowConfirm;
  19.         });
  20.         this.echartsInit();
  21.       });
  22.     },
复制代码
  处理完的数据可以清晰的看出: 要什么取什么就行了


4.整合代码
  嚯嚯,终于完了,贴上我的代码
  1. ‹template>
  2.   ‹div id="echarts">
  3.     ‹div id="myChart">‹/div>
  4.   ‹/div>
  5. ‹/template>
  6. ‹script type="text/javascript">
  7. export default {
  8.   name: "Echarts",
  9.   data() {
  10.     return {
  11.       area: [],
  12.       areaName: [],
  13.       areaConfirm: [],
  14.       areaNowConfirm: [],
  15.     };
  16.   },
  17.   
  18.   methods: {
  19.     getData() {
  20.       this.$axios.get(`/api/g2/getOnsInfo?name=disease_h5`).then(({ data }) => {
  21.         console.log(JSON.parse(data.data.replace('\"', "'")));
  22.         this.area = JSON.parse(
  23.           data.data.replace('\"', "'")
  24.         ).areaTree[0].children;
  25.         // 地区名
  26.         this.areaName = this.area.map((o) => {
  27.           return o.name;
  28.         });
  29.         // 总确诊人数
  30.         this.areaConfirm = this.area.map((o) => {
  31.           return o.total.confirm;
  32.         });
  33.         console.log(this.areaConfirm);
  34.         // 目前确诊人数
  35.         this.areaNowConfirm = this.area.map((o) => {
  36.           return o.total.nowConfirm;
  37.         });
  38.         this.echartsInit();
  39.       });
  40.     },
  41.     echartsInit() {
  42.       let myChart = this.$echarts.init(document.getElementById("myChart"));
  43.       myChart.setOption({
  44.         title: {
  45.           text: "echarts的柱状图来实现疫情统计",
  46.           textAlign: "auto",
  47.           left: 'center'
  48.         },
  49.         tooltip: {},
  50.         // 省份
  51.         xAxis: {
  52.           data: this.areaName,
  53.           type: "category",
  54.           axisLabel: {
  55.             rotate: -45, // 旋转30度
  56.             show: true, //这行代码控制着坐标轴x轴的文字是否显示
  57.           },
  58.         },
  59.         yAxis: {},
  60.         // 确诊数量
  61.         series: [
  62.           {
  63.             name: "总确诊数量",
  64.             type: "bar",
  65.             data: this.areaConfirm,
  66.           },
  67.         ],
  68.       });
  69.     },
  70.   },
  71.   mounted() {
  72.     this.getData();
  73.     this.echartsInit();
  74.   },
  75. };
  76. ‹/script>
  77. ‹style scoped>
  78. #myChart {
  79.   width: 100%;
  80.   height: 300px;
  81.   margin-left: auto;
  82.   margin-right: auto;
  83. }
  84. ‹/style>
复制代码
  到此这篇关于Vue+Echart柱状图实现疫情数据统计的文章就介绍到这了,更多相关Vue Echart柱状图 数据统计内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:17 , Processed in 0.066187 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表