d3.csv("data/sales_province.csv", function (error, data) {
    console.log(data);
    
    var sales_province = [];
    var profit_province = [];
    var sales = [];

    for (i = 0; i < data.length; i++) {
        var temp = {};
        var temp1 = {};
        temp['name'] = data[i].province;
        temp['value'] = parseFloat(data[i].sales);
        temp1['name'] = data[i].province;
        temp1['value'] = parseFloat(data[i].profit);
        
        sales_province.push(temp);
        profit_province.push(temp1);
        sales.push(parseFloat(data[i].sales));
    }
    var sales_total = Math.round(d3.sum(sales) / 10000);
    
    console.log(sales_province);
    console.log(profit_province);
    console.log(sales);



    var myChart = echarts.init(document.getElementById('data_province'));
    // 使用ECharts库创建一个中国地图，并显示各个省份的销售数据
    var mapName = 'china'
  

    var geoCoordMap = {}; // 空对象，用于存储地理坐标信息
   
    /*获取地图数据*/
    myChart.showLoading(); // 显示加载动画
    var mapFeatures = echarts.getMap(mapName).geoJson.features; // 获取地图的地理信息数据
    console.log("========mapFeatures=========");
    console.log(mapFeatures);
    myChart.hideLoading(); // 隐藏加载动画
    // 遍历地理信息数据中的每个地区，将地区名称和经纬度存储到 geoCoordMap 对象中。
    // 对于每个地区，首先获取其名称和经纬度，然后将名称作为键，经纬度作为值存储到 geoCoordMap 对象中。
    mapFeatures.forEach(function (v) {
        console.log("==========v===========");
        console.log(v);
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;

    });
    console.log("===========geoCoordMap=============");
    console.log(geoCoordMap);
    var max = 480,
        min = 9; // todo 
    var maxSize4Pin = 100,
        minSize4Pin = 20;

    // 该函数的作用是将输入的数据转换为特定格式的数组。
    var convertData = function (data) {
        console.log("=======data========");
        console.log(data);
        var res = []; // 创建一个空数组 res
        // 遍历输入数据 data 中的每个元素
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            console.log("========geoCoord========");
            console.log(geoCoord);
            // 将该元素的名称和值（以及经纬度信息）组成一个新的对象，并将其添加到 res 数组中
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                });
            }
        }
        console.log("========res=======");
        console.log(res);
        return res;
    };
    option = {
        //	backgroundColor: '#013954',
        // title: {
        //     text: "2019年各省份销售和利润情况", // 标题的文本为 "2019年各省份销售和利润情况"
        //     // 标题文本的样式信息，包括对齐方式（居中）、颜色（白色）和字体大小（20）
        //     textStyle: {
        //         align: 'center',
        //         color: '#fff',
        //         fontSize: 20,
        //     },
        //     top: '5%', // 标题的位置在垂直方向上为距离顶部5%
        //     left: 'center', // 标题的位置在水平方向上为居中
        // },
        tooltip: {
            padding: 0, // 提示框内边距为0
            enterable: true, // 提示框可以鼠标进入
            transitionDuration: 1, // 提示框显示和隐藏的过渡时间为1秒
            // 提示框文本的样式信息，包括颜色（黑色）、装饰（无）
            textStyle: {
                color: '#000',
                decoration: 'none',
            },
            // 用于自定义提示框的内容
            // 通过传入的参数params获取当前数据的名称、销售额和利润，然后拼接成一个HTML字符串作为提示框的内容。
            formatter: function (params) {
                console.log("========params========");
                console.log(params);
                var tipHtml = '';
                tipHtml = '<div style="width:180px;height:120px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
                    + '<div style="width:90%;height:30px;line-height:30px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 10px">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:30px;">' + '</i>'
                    + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
                    + '<div style="padding:10px">'
                    + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
                    + '销售额：' + '<span style="color:#11ee7d;margin:0 6px;">' + sales_province[params.dataIndex].value + '</span>' + '元' + '</p>'
                    + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
                    + '利润：' + '<span style="color:#f48225;margin:0 6px;">' + profit_province[params.dataIndex].value + '</span>' + '元' + '</p>'
                    + '</div>' + '</div>';
                // console.log("=======tipHtml========");
                // console.log(tipHtml);
                return tipHtml;
            }
        },

        // 设置视觉映射组件（visualMap）的样式和属性
        visualMap: {
            show: true, // 显示视觉映射组件
            min: 0, // 视觉映射组件的最小值
            max: 300000, // 视觉映射组件的最大值
            left: '10%', // 视觉映射组件距离容器左侧的距离为容器宽度的10%
            top: 'bottom', // 视觉映射组件的位置在容器底部
            calculable: true, // 视觉映射组件可以计算数据
            seriesIndex: [1], // 视觉映射组件关联的数据系列索引为1
            // 视觉映射组件的颜色范围，从蓝色（#04387b）到浅蓝色（#467bc0）
            inRange: {
                color: ['#04387b', '#467bc0'] // 蓝绿
            },
            textStyle: {
                color: '#fff'
            }

        },
        geo: {
            show: true, // 显示地理坐标系组件
            map: mapName, // 使用的地图名称为mapName
            // 表示不显示标签
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            roam: false, // 禁止鼠标缩放和平移地图
            // 地图区域的颜色和边框颜色
            itemStyle: {
                // 在正常状态下，区域颜色为深蓝色（#023677），边框颜色为浅蓝色（#1180c7）
                normal: {
                    areaColor: '#023677',
                    borderColor: '#1180c7',
                },
                // 在高亮状态下，区域颜色为浅蓝色（#4499d0）
                emphasis: {
                    areaColor: '#4499d0',
                }
            }
        },
        series: [{
            name: '散点', // 图表的名称
            type: 'scatter', // 图表类型为散点图
            coordinateSystem: 'geo', // 使用的坐标系为地理坐标系
            data: convertData(profit_province), // 使用convertData函数处理传入的数据作为散点图的数据源
            symbolSize: function (val) {// 散点的大小由数据的第三个值决定
                console.log("========val=========");
                console.log(val);
                return val[2] / 8000;
            },
            // 标签的显示方式
            label: {
                // 在正常状态下，标签显示省份名称（{b}），位置在右侧，字体大小为8
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,
                    fontSize: 8,
                },
                // 在高亮状态下，标签始终显示。
                emphasis: {
                    show: true,

                }
            },
            // animation: false,
            // 散点的颜色为白色
            itemStyle: {
                normal: {
                    color: '#fff',

                }
            }
        },
            {
                type: 'map', // 图表类型为地图
                map: mapName, // 使用的地图名称为mapName
                geoIndex: 0, // 地理坐标系组件在组件列表中的索引为0
                aspectScale: 0.5, // 地图的长宽比为0.5
                showLegendSymbol: false, // 存在图例时不显示图例中的符号
                // 标签的显示方式
                label: {
                    // 在正常状态下，标签始终显示
                    normal: {
                        show: true
                    },
                    // 在高亮状态下，标签不显示，并且文本颜色为白色
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                roam: true, // 允许鼠标缩放和平移地图
                // 地图区域的颜色和边框颜色
                itemStyle: {
                    // 在正常状态下，区域颜色为深蓝色（#031525），边框颜色为白色（#FFFFFF）
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#FFFFFF',
                    },
                    // 在高亮状态下，区域颜色为浅蓝色（#2B91B7）。
                    emphasis: {
                        areaColor: '#2B91B7'
                    }
                },
                animation: false, // 不使用动画效果
                data: sales_province // 地图的数据源
            },
            // 设置散点图的样式和属性
            {
                name: '点', // 图表的名称
                type: 'scatter', // 图表类型为散点图
                coordinateSystem: 'geo', // 使用的坐标系为地理坐标系
                zlevel: 6, // 散点的层级为6，用于控制散点在图表中的显示顺序
            },
            // 设置特效散点图的样式和属性
            {
                name: 'Top 5', // 图表的名称
                type: 'effectScatter', // 图表类型为特效散点图
                // animation: false,
                coordinateSystem: 'geo', // 使用的坐标系为地理坐标系
                data: convertData(profit_province), // 使用convertData函数处理后的数据作为散点图的数据源
                // 散点的大小由数据的第三个值决定
                symbolSize: function (val) {
                    return val[2] / 8000;
                },
                showEffectOn: 'render', // 在渲染时显示特效
                rippleEffect: { //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式为描边
                    scale: 4 //波纹圆环最大限制，值越大波纹越大
                },
                hoverAnimation: true, // 鼠标悬停时显示动画效果
                // 标签的配置项
                label: {
                    normal: {// 正常状态下
                        formatter: '{b}', // 标签显示省份名称（{b}）
                        position: 'left', // 标签位置在左侧
                        show: false // 不显示标签
                    }
                },
                // 散点样式的配置项
                itemStyle: {
                    normal: {// 正常状态下
                        color: 'yellow', // 散点颜色为黄色
                        shadowBlur: 10, // 阴影模糊度为10
                        shadowColor: 'yellow' // 阴影颜色为黄色
                    }
                },
                zlevel: 1 // 散点的层级为1，用于控制散点在图表中的显示顺序
            },
        ]
    };
    myChart.setOption(option)
    var currentIndex = -1;
    setInterval(function () {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
        // 显示 tooltip
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
    }, 1000);
    
    var title1 = document.getElementById("title1");
    title1.style.fontWeight = "bold";
    title1.style.color = "#2094CA";
    title1.style.fontSize = "14px";
    title1.innerHTML = "2019年全国销售额共&nbsp;<b style='color:#E78932;font-size:24px'>" + sales_total + "&nbsp;</b>万元"
  


})