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

    for (i = 0; i < data.length; i++) {
        region.push(data[i].region)
        sales.push(parseFloat(data[i].sales))
        profit.push(parseFloat(data[i].profit))
    }

    // console.log(region)
    // console.log(sales)
    // console.log(profit)

    var myChart = echarts.init(document.getElementById('data_region'));
    var option = {
        // backgroundColor: '#323a5e', // 图表的背景颜色为 '#323a5e'
        tooltip: {
            trigger: 'axis',  // 表示提示框的触发方式为坐标轴触发，即当鼠标悬停在坐标轴上时，提示框会显示相关信息。
            axisPointer: {
                type: 'shadow' // 表示坐标轴指示器的样式为阴影，即鼠标悬停时，会在对应的数据点周围显示一个阴影区域。
            },
            textStyle: {// 提示框文本的样式，包括颜色（蓝色）和字体大小（10像素）。
                color: '#0099FF',
                fontSize: 10,
            }
        },
        grid: {
            left: '2%', // 图表距离容器左侧的距离为2%
            right: '4%', // 图表距离容器右侧的距离为4%
            bottom: '14%', // 图表距离容器底部的距离为14%
            top: '16%', // 图表距离容器顶部的距离为16%
            containLabel: true // 是否包含坐标轴刻度标签在内，设置为true表示包含
        },
        // 设置图例（legend）的样式和位置
        legend: {
            data: ['销售额', '利润'], // 表示图例中包含两个数据项
            right: 10, // 图例距离容器右侧的距离为10
            top: 12, // 图例距离容器顶部的距离为12
            // 图例文本的颜色为白色，字体大小为10
            textStyle: {
                color: "#fff",
                fontSize: 10,
            },

            itemWidth: 12, // 图例中每个数据项的宽度为12
            itemHeight: 10, // 图例中每个数据项的高度为10
            // itemGap: 35
        },
        xAxis: {
            type: 'category', // x轴的类型为类别型，即显示的是离散的数据点。
            data: region,
            axisLine: {
                lineStyle: {
                    color: 'white' // x轴线的颜色为白色

                }
            },
            // x轴刻度标签的字体大小为8，颜色为蓝色
            axisLabel: {
                fontSize: 8,
                color: '#2094CA',
            },
        },

        yAxis: {
            type: 'value', // y轴的类型为数值型，即显示的是连续的数据点
            // y轴线显示，并且线的颜色为白色
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'white'
                }
            },
            // y轴的分割线显示，分割线的颜色为半透明的白色
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.3)'
                }
            },
            // y轴刻度标签的字体大小为8，颜色为蓝色
            axisLabel: {
                fontSize: 8,
                color: '#2094CA',
            },
        },
        series: [{
            name: '销售额', // 图表的名称
            type: 'bar', // 图表类型为柱状图
            barWidth: '15%', // 柱子的宽度为图表宽度的15%
            label: {show: false}, // 不显示柱子上的标签
            // 柱子的颜色使用渐变色，从上到下由黄色（#fccb05）渐变为橙色（#f5804d），并且柱子的边框圆角半径为12
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#fccb05'
                    }, {
                        offset: 1,
                        color: '#f5804d'
                    }]),
                    barBorderRadius: 12,
                },

            },
            data: sales,  // 柱状图的数据
        },
            {
                name: '利润', // 图表的名称
                type: 'bar', // 图表类型为柱状图
                barWidth: '15%', // 柱子的宽度为图表宽度的15%
                label: {show: false}, // 不显示柱子上的标签
                // 柱子的颜色使用渐变色，从上到下由绿色（#8bd46e）渐变为深蓝色（#09bcb7），并且柱子的边框圆角半径为11个单位
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#8bd46e'
                        }, {
                            offset: 1,
                            color: '#09bcb7'
                        }]),
                        barBorderRadius: 11,
                    }
                },
                data: profit, // 柱状图的数据
            }]
    };
    // 这段代码的作用是在 ECharts 图表中每隔 2 秒自动切换高亮的图形，并显示相应的提示框。
    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
        });
    }, 2000);

    myChart.setOption(option);

})