d3.csv("data/sales_manager.csv", function (error, data) {
    // console.log(data);
    
    var sales_data = []
    var profit_data = []
    var names = []

    for ( i = 0; i < data.length; i++) {
        var temp = {}
        var temp1 = {}
        
        temp['value'] = parseFloat(data[i].sales);
        temp['name'] = data[i].sales_manager;
        
        temp1['value'] = parseFloat(data[i].profit);
        temp1['name'] = data[i].sales_manager;
        
        sales_data.push(temp);
        profit_data.push(temp1);
        names.push(data[i].sales_manager)
    }
    
    // console.log(sales_data)
    // console.log(profit_data)
    // console.log(names)


    var myChart = echarts.init(document.getElementById('data_manager')); // 初始化一个图表实例
   
    option = {
        // 颜色数组，包括6种不同的颜色值
        color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
        // 图表的标题，文本为"销售情况 利润情况"，位置在左侧，字体颜色为蓝色（#0099FF），字体大小为10。
        title: {
            text: '           销售情况                                          利润情况',
            left: 'left',
            textStyle: {
                color: '#0099FF',
                fontSize: 10,
            }
        },
        // 提示框配置
        tooltip: {
            // 表示当鼠标悬停在数据项上时触发提示框
            trigger: 'item',
            // 定义了提示框的显示格式，包括数据系列的名称（{a}）、数据项的名称（{b}）、数值（{c}）和百分比（{d}%）
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center', // 图例水平居中显示
            top: 'bottom', // 图例位于图表底部
            data: names, // 图例的数据项为names数组，即每个数据项的名称
            // 图例文本的样式，包括颜色数组
            textStyle: {
                color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
            },
            padding: 0, // 图例的内边距为0
            itemGap: 3, // 图例项之间的间距为3
            itemWidth: 30, // 图例项的宽度为30
        },
        series: [
            {
                name: '销售额', // 图表的名称
                type: 'pie', // 饼图
                radius: [5, 85], // 饼图的半径范围，从5到85
                center: ['30%', '50%'], // 饼图的中心位置在容器的30%宽度和50%高度处
                roseType: 'area', // 使用面积模式绘制玫瑰图
                // 标签的显示方式，这里设置为不显示标签
                label: {
                    show: false
                },
                // 标签线的显示方式，这里设置为不显示标签线
                labelLine: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: false
                    }
                },
                // 高亮状态下的样式，这里设置为不显示高亮状态下的标签
                emphasis: {
                    label: {
                        show: false
                    }
                },
                data: sales_data, // 饼图的数据为sales_data数组
            },
            {
                name: '利润', // 图表的名称
                type: 'pie', // 饼图
                radius: [5, 85], // 饼图的半径范围，从5到85
                center: ['80%', '50%'], // 饼图的中心位置在容器的80%宽度和50%高度处
                roseType: 'area', // 使用面积模式绘制玫瑰图
                // 标签的显示方式，这里设置为不显示标签
                label: {
                    show: false,
                },
                // 标签线的显示方式，这里设置为不显示标签线
                labelLine: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: profit_data, // 饼图的数据为profit_data数组
            }
        ]
    };
    myChart.setOption(option);

    // 这段代码是用于在 ECharts 图表中实现自动轮播的效果。
    // 每隔2秒钟，图表会自动切换到下一个数据项，并高亮显示当前数据项以及显示对应的提示框（tooltip）。
    var currentIndex = -1;
    var pie_index = -1;
    var pie_index1 = 0
    setInterval(function () {
        var dataLen = option.series[1].data.length;
        console.log(option.series[1].data);
        console.log(dataLen); // 6
        /*
            pie_index
            -1         0
            0          1
            1          2
            ...
            10         11
            11         0
        */
        pie_index = pie_index == 11 ? 0 : (pie_index + 1)
        //	    console.log(currentIndex1)
        // 取消之前高亮的图形
        myChart.dispatchAction({
            type: 'downplay',
            /*
                seriesIndex
                0
            */
            seriesIndex: pie_index1,
            dataIndex: currentIndex
        });
        /*
            currentIndex
            -1              0
            0               1
            1               2
            ...
            5               0
        */
        currentIndex = (currentIndex + 1) % dataLen;
        /*
            pie_index
            0               0
            1               0
            ...
            5               0
            6               1
            ...
            11              1
        */
        pie_index1 = parseInt(pie_index / 6)
        // 高亮当前图形
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: pie_index1,
            dataIndex: currentIndex
        });
        // 显示提示框
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: pie_index1,
            dataIndex: currentIndex
        });
    }, 2000);



})