The problem background

I want to make an address book for graduate students. The main functions include information forms, city weather, time display, data map, high school memories and other modules

The effect

The HTML code

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            color: # 333333;
        }

        body {
            font-family: Microsoft Yahei;
        }

        #charts {
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="charts"></div>
</body>

<script src="echarts-all2.js"></script>
<script>
    var detail = [
        { ren: "Changsha: XXX, XXX, XXX" },
        { ren: "Xi 'an: XXX" },
        { ren: Kunming: XXX, XXX, XXX, XXX, 

           XXX, XXX, XXX, XXX, 

 & NBSP;         XXX, XXX, XXX, 

 & NBSP;         XXX, XXX, XXX 

 Prestige: XXX 

 Zhaotong: XXX 

 Qujing: XXX" },
        { ren: "Bijie Hezhang: XXX < BR > Guiyang Nanming: XXX" },
        { ren: "      Hangzhou: & have spent     Qu (qu) zhou: XXX" },
        { ren: "Luoyang: XXX" },
        { ren: "Shanghai Minhang: XXX 

 Shanghai Pudong: XXX < BR > Shanghai Yangpu: XXX, XXX" },
        { ren: "Shenzhen: XXX, XXX, XXX" },
        { ren: "Chengdu:     XXX, XXX, XXX, 

 & NBSP;             

 Panzhihua: XXX" },
        { ren: "Tianjin: XXX" },
        { ren: "Chongqing: XXX, XXX"},];var mycharts = echarts.init(document.getElementById('charts'))
    option = {
        dataRange: {
            show: false.x: 'left'.y: 'bottom'.splitList: [{start: 5.end: 5.color: 'orange' },// When the value is 5, the region background
                { start: 10.end: 10.color: '#ff6300' },// When the value is 10, the region background
                { start: 15.end: 15.color: '#ccc' },// When the value is 15, the region background],},tooltip: {
            alwaysShowContent: true.enterable: true.formatter: function (params) {
                var name = params.name;
                var goaltext = "none";
                if (name == "Hunan") {
                    goaltext = detail[0].ren;
                } else if (name == "Shaanxi") {
                    goaltext = detail[1].ren;
                }
                else if (name == "Yunnan") {
                    goaltext = detail[2].ren;
                }
                else if (name == "Guizhou") {
                    goaltext = detail[3].ren;
                }
                else if (name == "Zhejiang") {
                    goaltext = detail[4].ren;
                }
                else if (name == "Henan") {
                    goaltext = detail[5].ren;
                }
                else if (name == "Shanghai") {
                    goaltext = detail[6].ren;
                }
                else if (name == "Guangdong") {
                    goaltext = detail[7].ren;
                }
                else if (name == "Sichuan") {
                    goaltext = detail[8].ren;
                }
                else if (name == "Tianjin") {
                    goaltext = detail[9].ren;
                }
                else if (name == "Chongqing") {
                    goaltext = detail[10].ren;
                }
                else {
                    goaltext = "none";
                }

                returngoaltext; }},series: [{name: ' '.type: 'map'.mapType: 'china'.//hoverable: false,
                roam: false.itemStyle: {
                    normal: { label: { show: true}},emphasis: { label: { show: false}}},data:}], [],animation: false

    };
    var ini_data = [];// Initialize the province array



    /* If you want those provinces to change */ here
    var provArr = ['guizhou'.'henan'.'yunnan'.'zhejiang'.'Shanghai'.'in hunan province'.'in guangdong'.'sichuan'.'tianjin'.'chongqing'.'the shaanxi'];// Obtain the province, possibly from the background


    // select "province" and "city" from the list
    for (var i = 0; i < provArr.length; i++) {
        var str = provArr[i];
        var re = | city/province/g;  // Global matching
        var str2 = { name: str.replace(re, ' '), value: 5 };// Concatenate an array of objects
        ini_data.push(str2);
    }
    option.series[0].data = ini_data;// Assign the concatenated array to the parameter collection
    mycharts.setOption(option);// Follow the new chart
    // Mouse over events
    var testStr = ', ' + provArr.join(",") + ",";
    mycharts.on('hover'.function (param) {
        // console.log(param);
        if (testStr.indexOf("," + param.name + ",") != -1) {
            return false;
        } else {
            param.value = 15; mycharts.setOption(option); }});// Initialize to save color
    function ini_province() {
        var ini_len = option.series[0].data.length;
        for (var i = 0; i < ini_len; i++) {
            // Initialize the color
            option.series[0].data[i].value = 5; mycharts.setOption(option); }}</script>

</html>
Copy the code

Js code used

Link: pan.baidu.com/s/1vAX5gHP0…

Extraction code: MDVS