Using Echarts

The official address

Echarts.apache.org/zh/option.h…

Note the new version

/* NPM I echarts will carry the map geojson in his package
Copy the code

index.html

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "/> <title> </head> <script src="./node_modules/echarts/dist/echarts.min.js"></script> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/axios/dist/axios.min.js"></script> <body> <div id="main" style="width: 1300px; height:600px;" ></div> </body> <script src="1.js"></script> </html>Copy the code

1.js

/* @1 /* @2 /* @2 https://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5 * /
var ROOT_PATH = "./china.json";
// Fix the steps
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
// Displays a built-in loading animation
myChart.showLoading();

function render() {
    return new Promise((resovle) = > {
        $.get(ROOT_PATH, function (usaJson) {
            // Hide a built-in loading animation
            myChart.hideLoading();
            // use the same series. Map value as below
            echarts.registerMap('china', usaJson, {});
            option = {
                title: {
                    text: 'China Epidemic Situation Map'.left: 'center'
                },
                // Tooltip component Tooltip for placing the mouse
                tooltip: {
                    trigger: 'item'.showDelay: 0.transitionDuration: 0.2.formatter: function (params) {
                        var value = (params.value + ' ').split('. ');
                        value = value[0].replace(/ ((\ d {1, 3})? = (? :\d{3})+(? ! \d))/g.'$1');
                        return params.seriesName + '<br/>' + params.name + ':'+ value; }},/ / legend
                visualMap: {
                    pieces: [{min: 40 },
                        { min: 20.max: 40 },
                        { min: 10.max: 20 },
                        { min: 5.max: 10 },
                        { min: 1.max: 5 },
                        { max: 0},].hoverLink: true,},// Export tool
                toolbox: {
                    show: true.left: 'left'.top: 'top'.feature: {
                        dataView: { readOnly: false },
                        restore: {},
                        saveAsImage: {}}}.// The content body
                series: [{name: 'china'.// The type is map
                        type: 'map'.roam: true.map: 'china'.// Map Settings for each area
                        label: {
                            show: true,},align: 'center'.// Set the style when getting focus
                        emphasis: {
                            itemStyle: {
                                areaColor: 'red'}},zoom: 1.8.top: 195.// Render according to this data
                        data: []}}; resovle(); myChart.setOption(option); }); })}// Request epidemic data
axios.get('./zhongguo.json').then((res) = > {
    render().then(() = > {
        let renderData = res.data.data.areaTree.filter((item) = > {
            return item.name =='China';
        })
        renderData = renderData[0].children.map((item) = > {
             return {
                name: item.name ,
                value: item.total.confirm - item.total.heal - item.total.dead || 0.locationId: item.id
            }
        })
        console.log(renderData);
        option.series[0].data = renderData;
        // Re-render it
        myChart.setOption(option);
    });
})

// Click the event
myChart.on('click'.function (params) {
    console.log(params.data.locationId, option.series[0].data);
    ROOT_PATH = `https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=${params.data.locationId}_full`;
    update();
});

option && myChart.setOption(option);
Copy the code