Vue+Echart柱状图实现疫情数据统计
2022-01-08 04:07
1246 查看
目录
四步走四步走,要是直接跳到最后的话,记得有些依赖和环境配置一下哦。
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‘
是因为Echarts 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.setOption({ 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: {}, // 确诊数量 series: [ { 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=disease_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=disease_h5`).then(({ data }) => { //console.log(JSON.parse(data.data.replace('\\"', "'"))); this.area = JSON.parse( 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=disease_h5`).then(({ data }) => { console.log(JSON.parse(data.data.replace('\\"', "'"))); this.area = JSON.parse( 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.map((o) => { return o.total.nowConfirm; }); this.echartsInit(); }); }, echartsInit() { let myChart = this.$echarts.init(document.getElementById("myChart")); myChart.setOption({ title: { text: "echarts的柱状图来实现疫情统计", textAlign: "auto", left: 'center' }, tooltip: {}, // 省份 xAxis: { data: this.areaName, type: "category", axisLabel: { rotate: -45, // 旋转30度 show: true, //这行代码控制着坐标轴x轴的文字是否显示 }, }, yAxis: {}, // 确诊数量 series: [ { 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柱状图 数据统计内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:相关文章推荐
- 网站统计中的数据收集原理及实现-埋点统计
- SpringBoot 自定义注解 + AOP 实现必填参数非空校验、接口传入参数和应答数据打印、方法耗时统计
- 关于一季青年大学习的反馈数据整理与统计(Python实现)
- DataTable用中使用Compute 实现简单的DataTable数据的统计.....
- redis+websocket 实现统计数据实时推送
- Asp.net管理信息系统中数据统计功能的实现
- shell实现类矩阵格式数据统计及输出(hive环境下数据的过程化处理)
- 用logstash,elasticSearch,kibana实现数据收集和统计分析工作
- Asp.net管理信息系统中数据统计功能的实现
- yii框架结合charjs实现统计30天数据的方法
- python实现爬虫统计学校BBS男女比例之数据处理(三)
- 数据结构——二叉树 前序、中序、后序、层次遍历及非递归实现 查找、统计个数、比较、求深度的递归实现
- php和jquery实现地图区域数据统计展示数据示例
- 使用Python实现子区域数据分类统计
- java实现各种数据统计图(柱形图,饼图,折线图)
- DataTable实现数据统计
- SQLSERVER 使用 ROLLUP 汇总数据,实现分组统计,合计,小计
- qt实现汽车销售管理系统(四)--统计数据的实现
- oracle 实现按周,月,季度,年查询统计数据
- 用jquery 实现表单数据的统计可新增多行