第四周总结 - 嘎嘎鸭1

公告

随笔分类

随笔档案

阅读排行榜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="js/echarts.min.js"></script>-->
<!--    <script src="js/china.js"></script>-->
    <script
            type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"
    ></script>
    <script
            type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"
    ></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="main" style="width: 1500px;height:710px;margin: auto;"></div>


<script>
    new Vue({
        el:"#main",
        data(){

            return {
                dataList: [
                    {name: "南海诸岛"},
                    {ename: "beijing", name: "北京" ,value:"1"},
                    {ename: "tianjin", name: "天津"},
                    {ename: "shanghai", name: "上海"},
                    {ename: "chongqing", name: "重庆",value:"1"},
                    {ename: "hebei", name: "河北"},
                    {ename: "henan", name: "河南"},
                    {ename: "yunnan", name: "云南"},
                    {ename: "liaoning", name: "辽宁"},
                    {ename: "heilongjiang", name: "黑龙江"},
                    {ename: "hunan", name: "湖南"},
                    {ename: "anhui", name: "安徽",value:"1"},
                    {ename: "shandong", name: "山东"},
                    {ename: "xinjiang", name: "新疆"},
                    {ename: "jiangsu", name: "江苏"},
                    {ename: "zhejiang", name: "浙江"},
                    {ename: "jiangxi", name: "江西"},
                    {ename: "hubei", name: "湖北"},
                    {ename: "guangxi", name: "广西"},
                    {ename: "gansu", name: "甘肃"},
                    {ename: "shanxi", name: "山西"},
                    {ename: "neimenggu", name: "内蒙古" },
                    {ename: "shanxi1", name: "陕西"},
                    {ename: "jilin", name: "吉林"},
                    {ename: "fujian", name: "福建"},
                    {ename: "guizhou", name: "贵州"},
                    {ename: "guangdong", name: "广东"},
                    {ename: "qinghai", name: "青海"},
                    {ename: "xizang", name: "西藏"},
                    {ename: "sichuan", name: "四川"},
                    {ename: "ningxia", name: "宁夏"},
                    {ename: "hainan", name: "海南"},
                    {name: "台湾"},
                    {ename: "xianggang", name: "香港"},
                    {ename: "aomen", name: "澳门"},
                ],
            }
        },

        mounted(){

            this.initEchart();
        },

        methods: {
            initEchart() {

                let dataList = this.dataList;
                for (let i = 0; i < dataList.length; i++) {
                    if(dataList[i].value != "1")
                    //dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
                        dataList[i].value = 0;
                }
                const _this = this;
                var myChart = echarts.init(document.getElementById("main"));
                var option = {
                    title: {
                        text: "全国地铁展示图",
                        left: "center",
                        top: "top",
                        textStyle: {
                            fontSize: 30,
                            color:'rgba(34, 114, 225, 1)',
                            fontStyle : 'italic',
                            textBorderColor:'rgba(22, 225, 38, 1)',
                            textBorderWidth:1,
                            textShadowColor: "rgba(221, 32, 126, 1)",
                            textShadowBlur: 4.5
                        }
                    },

                    tooltip: {
                        //数据格式化
                        formatter: function (params, callback) {
                            return (
                                params.seriesName + "<br />" + params.name + "：" + params.value
                            );
                        },
                    },
                    visualMap: {
                        min: 0,
                        max: 1,
                        left: "left",
                        top: "bottom",
                        text: ["高", "低"], //取值范围的文字
                        inRange: {
                            color: ["#e0ffff", "blue"], //取值范围的颜色
                            //color: ["#91c291", "blue"], //取值范围的颜色
                        },
                        show: true, //图注
                    },
                    geo: {
                        map: "china", //引入地图数据
                        roam: true, //不开启缩放和平移
                        zoom: 1, //视角缩放比例
                        label: {
                            normal: {
                                show: true,
                                fontSize: "10",
                                color: "rgba(0,0,0,0.7)",
                            },
                        },
                        //project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
                        itemStyle: {
                            normal: {
                                 borderColor: "rgba(0, 0, 0, 0.2)",
                                //borderColor: "rgba(210,18,18,0.2)",

                            },
                            color:"rgb(123,255,134)",
                            areaColor:"rgb(7,188,241)",
                            emphasis: { //高亮的显示设置
                                areaColor: "skyblue", //鼠标选择区域颜色
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                //shadowColor: "rgba(0, 0, 0, 0.5)",
                                shadowColor: "rgba(5,17,255,0.5)",
                            },
                        },
                    },
                    // 鼠标悬浮提示框
                    series: [
                        {
                            name: "省份",
                            type: "map",
                            geoIndex: 0,
                            data: dataList,
                        },
                    ],
                };
                myChart.setOption(option);
                myChart.on("click", function (params) {
                    // if (!params.data.ename) {
                    //     alert('暂无' + params.name + '地图数据');
                    //     return;
                    // }
                    // _this.$router.push({
                    //     path: "/map3",
                    //     query: { provinceName: params.data.ename, province: params.name },
                    // });
                    if(params.data.value!=0)
                    {
                        //location.href = "http://localhost:8080/subway/subway.html";
                        window.location.href = encodeURI('http://localhost:8080/subway/subway.html?city='+params.name);
                        return;
                    }

                    alert('暂无' + params.name + '地图数据');


                });
            },

        }


    })



</script>
</body>
</html>