echart实现实时疫情图

2022-01-06 17:33:33 阅读：178 来源： 互联网

标签：10 echart 疫情 min color max 实时 item data

直接上代码：

<!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

标签：10,echart,疫情,min,color,max,实时,item,data
来源： https://www.cnblogs.com/Y-tao-mycnblogs/p/15772089.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

echart实现实时疫情图