使用ECharts制作简易疫情地图

闲话少说，先看看效果图！！！

当鼠标移至地图时（江苏）显示该省份的疫情状况。
下面开始制作，showTime！

准备工作

使用npm install echarts --save下载ECharts库，使用node爬取网络数据(详情见上一篇文章)，这里借用了丁香园的数据。

新建一个index.html页面，在下载的ECharts库中找到 echarts.min.js和china.js两个文件，并拷贝到js文件中，然后引入ECharts库的js样式

    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.js"></script>

开始编写

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

//请求数据
fetch('./data1.json').then(res => {return res.json()}).then(chinaJson => {
    //将得到的数据遍历出data新数组
    let data = chinaJson.map(r => {
        return {
            name: r.provinceShortName,
            value: [r.currentConfirmedCount,r.curedCount]
        }
    })

    // 指定图表的配置项和数据
    var option = {
        //标题
        title: {
            text: '国内疫情地图',
            subtext:"_村长_",
            left: "center"
        },
        //系列列表
        series: [{
            name: "疫情状况",
            type: 'map',
            map: 'china',
            data
        }],
        //提示框
        tooltip: {
            //提示框的内容格式器，支持字符串模板和回调函数两种形式
            formatter(res) {
                return `
                    ${res.seriesName}<br/>
                    省份：${res.name}<br/>
                    当前确诊数量：${res.data.value[0]}<br/>
                    总治愈数量：${res.data.value[1]}<br/>
                `
            }
        },
        //图例
        visualMap: {
            type: 'piecewise',  //类型为分散型
            pieces: [{
                    gt: 5000, // 不指定 lt，表示 lt 为无限大（Infinity）。
                    label: ">5000",
                    color:"#52160a"
                },
                {
                    gt: 1000,
                    lt: 5000,
                    label: "1000-5000",
                    color:"#8e1d06"
                },
                {
                    gt: 500,
                    lt: 1000,
                    label: "500-1000",
                    color:"#ff0000"
                },
                {
                    gt: 100,
                    lt: 500,
                    label: "100-500",
                    color:"#bb7408"
                },
                {
                    gt: 10,
                    lt: 100,
                    label: "10-100",
                    color:"#f0b2b2"
                },
                {
                    lt: 10, // 不指定 gt，表示 gt 为无限大（-Infinity）。
                    label: "<10",
                    color:"#f0f0c2"
                },
            ]
        }

    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
});

注意：

fetch 是下一代JS请求对象，天生promise，第一次then返回数据流，可进行对应处理并return,二次处理。

fetch('url').then(res=>{
    //数据stream流
    return res.json()
}).then(res=>{
    //得到数据
})