echart实现实时疫情图
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div ref="fymapbox" style="height: 800px; width: 50%" class="fymp" id="main"></div>
</body>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js.map"></script> -->
<script src="./echarts/dist/echarts.js"></script>
<script src="./echarts/map/js/china.js"></script>
<script>
// 每一小时获取一次
let yqTime = setInterval(function () {
let fyTime = new Date().valueOf();
}, 3600000);
const option = {
title: {
text: "最新疫情地图", //显示标题
textStyle: {
fontSize: 14
}
},
tooltip: {
trigger: 'item'
},
series: [{
name: "确诊人数", //鼠标移动提示文字
type: "map",
map: "china", //渲染中国地图
label: {
//控制显示对于地区的汉字
show: true,
color: "#545454", //控制地区名的字体颜色
fontSize: 10
},
itemStyle: {
areaColor: "#fff", //设置地图背景色
borderColor: "#33ccff", //设置地图边线颜色
},
roam: false, //支持滚轮放大缩小 以及拖拽
zoom: 1.2, //控制地图的放大和缩小
emphasis: {
//控制鼠标滑过之后的背景色和字体颜色
label: {
color: "#000",
fontSize: 12,
},
itemStyle: {
areaColor: "#33ccff",
borderColor: "#33ccff",
},
},
data: [],
}, ],
visualMap: [{
type: "piecewise",
show: true,
itemWidth: 10,
itemHeight: 10,
left: "left",
textGap: 1,
itemGap: 2,
pieces: [ //分段
{
min: 10000
},
{
min: 1000,
max: 9999
},
{
min: 100,
max: 999
},
{
min: 10,
max: 99
},
{
min: 0,
max: 9
},
{
min: 0,
max: 0
},
],
// orient:'horizontal', //修改横向显示 默认垂直显示
inRange: {
symbol: "rect", //显示数据方块小图标形状
color: ["#e2ecf5", "#ed4343"], // 显示颜色
},
}, ],
};
window.onload = function () {
var mychart = echarts.init(document.getElementById('main'));
$.ajax({
url: `https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=${yqTime}`,
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
success: function (res) {
console.log(res);
let list = res.data.list.map((item) => ({
name: item.name,
value: item.econNum,
}));
option.series[0].data = list; //将数据赋给series里面的data然后进行渲染
mychart.setOption(option);
}
});
};
</script>
<style>
.fymp {
background-color: #ffffff;
border: 1px solid #bbb;
border-radius: 10px;
} .title {
font-weight: 600;
font-size: 0.5rem;
}
</style>
</style> </html>
引入了两个文件echart.js和China.js，有需要的小伙伴可以自己下载引入哦，注意下载好了，记得改引入路径.
链接：https://pan.baidu.com/s/16lUZipa6ZD-EQ-Fpk6U-uQ
提取码：yytt
echart实现实时疫情图的更多相关文章
- python绘制疫情图
python中进行图表绘制的库主要有两个:matplotlib 和 pyecharts, 相比较而言: matplotlib中提供了BaseMap可以用于地图的绘制,但是个人觉得其绘制的地图不太美观, ...
- FusionCharts制作实时刷新图
转自:http://yklovejava-163-com.iteye.com/blog/1889949 下面介绍的是用FusionCharts制作实时刷新图的过程(FusionCharts确实太好用了 ...
- 关于nagios系统下使用shell脚本自定义监控插件的编写以及没有实时监控图的问题
关于nagios系统下shell自定义监控插件的编写.脚本规范以及没有实时监控图的问题的解决办法 在自已编写监控插件之前我们首先需要对nagios监控原理有一定的了解 Nagios的功能是监控服务和主 ...
- 如何用 Python 绘制玫瑰图等常见疫情图
新冠疫情已经持续好几个月了,目前,我国疫情已经基本控制住了,而欧美国家正处于爆发期,我们会看到很多网站都提供了多种疫情统计图,今天我们使用 Python 的 pyecharts 框架来绘制一些比较常见 ...
- Hi3559AV100外接UVC/MJPEG相机实时采图设计（三）:V4L2接口通过MPP平台输出
可以首先参考前面两篇文章: Hi3559AV100外接UVC/MJPEG相机实时采图设计(一):Linux USB摄像头驱动分析: https://www.cnblogs.com/iFrank/p/1 ...
- Hi3559AV100外接UVC/MJPEG相机实时采图设计（二）:V4L2接口的实现（以YUV422为例）
下面将给出Hi3559AV100外接UVC/MJPEG相机实时采图设计的整体流程,主要实现是通过V4L2接口将UVC/MJPEG相机采集的数据送入至MPP平台,经过VDEC.VPSS.VO最后通过HD ...
- Hi3559AV100外接UVC/MJPEG相机实时采图设计（一）:Linux USB摄像头驱动分析
下面将给出Hi3559AV100外接UVC/MJPEG相机实时采图设计的整体流程,主要实现是通过V4L2接口将UVC/MJPEG相机采集的数据送入至MPP平台,经过VDEC.VPSS.VO最后通过HD ...
- Hi3559AV100外接UVC/MJPEG相机实时采图设计（四）:VDEC_Send_Stream线程分析
下面随笔将对Hi3559AV100外接UVC/MJPEG相机实现实时采图设计的关键点-VDEC_Send_Stream线程进行分析,一两个星期前我写了有三篇系列随笔,已经实现了项目功能,大家可以参考下 ...
- C#实例 武汉肺炎全国疫情实时信息图
如果需要查看更多文章,请微信搜索公众号 csharp编程大全,需要进C#交流群群请加微信z438679770,备注进群, 我邀请你进群! ! ! --------------------------- ...
随机推荐
- 替换资源（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 还是那个熟悉的某吃货甲,一天之内给他分配了9.6个工时的吃量,这太不厚道了哈,人家一个人又要开吃又要喝汤,这怎么吃得消呢? ...
- Kafka从入门到放弃（三）—— 详说消费者
之前介绍了Kafka以及生产者,包括它的一些特性和参数,这回写一下消费者. 之前没看得可以点击链接阅读. Kafka从入门到放弃(一) -- 初识Kafka Kafka从入门到放弃(二) -- 详说生 ...
- curl英文直译
文档概述 比较表 curl手册页 常见问题 HTTP脚本编写 mk-ca-bundle 教程 curl / 文件 / 工具文档 /手册页 curl.1手册页 相关: 手动 常见问题解答 HTTP脚本 ...
- C语言之字符串替换库函数replace
头文件 #include <algorithm> 例子 下面的代码, 将字符串中的 /替换为\ std::string str("C:/demo/log/head/send&qu ...
- c(++)变长参数之整形（非字符串类型类似）
0.序言 变长参数,接触的第一个可变长参数函数是 printf , 然后是 scanf .他们的原型如下: printf: _Check_return_opt_ _CRT_STDIO_INLI ...
- 【LeetCode】461. Hamming Distance 解题报告（java & python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 Java解法 方法一:异或 + 字符串分割 方法二: ...
- 【九度OJ】题目1179：阶乘 解题报告
[九度OJ]题目1179:阶乘 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1179 题目描述: 输入n, 求y1=1!+3!+-m ...
- B. Petya and Exam
B. Petya and Exam 题目链接 题意 给你一串字符,在这个串中所有出现的字符都是\(good\)字符,未出现的都是\(bad\)字符, 然后给你另一串字符,这个字符串中有两个特殊的字符, ...
- 【LeetCode】113. Path Sum II 解题报告（Python）
[LeetCode]113. Path Sum II 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fu ...
- element ui el-tree回显问题及提交问题（当后台返回的el-tree相关数组的时候，子菜单未全部选中，但是只要父级菜单的id在数组中，那么他的子菜单为全部选中状态）
1:问题原因:我们可能使用 this.$refs.tree.setCheckedKeys(this.defalutArr);或者使用:default-expanded-keys="treeD ...