d3.csv("data/sales_month.csv", function (error, data) {
    // console.log(data);
    var month = [];
    var sales = [];
    var profit = [];
    for (i = 0; i < data.length; i++) {
        month.push(data[i].month);
        sales.push(Math.round(data[i].sales / 100) / 100);
        profit.push(Math.round(data[i].profit / 100) / 100);
    }
    // console.log("---month---")
    // console.log(month)
    // console.log("---sales---")
    // console.log(sales)
    // console.log("---profit---")
    // console.log(profit)

    var myChart = echarts.init(document.getElementById('data_month'));
    var option = {
        legend: {
            data: ['销售额（万元）', '利润（万元）'], // 图例的数据为两个指标，注册总量和访问总量
            x: 'center', // 图例的水平位置为居中
            y: 'top', // 图例的垂直位置为顶部
            padding: [5, 0, 0, 0], // 图例的内边距，分别为上、右、下、左，这里设置为上边距为5。
            textStyle: { // 设置图例文字的样式
                // color: '00F1F3', // 图例文字的颜色
                color: ['#E78932', '#2094CA'],
                fontSize: 10, // 图例文字的字体大小为10
            },
            itemWidth: 28, // 图例项的宽度为28
            itemHeight: 12, // 图例项的高度为12
        },
        grid: {
            show: false, // 表示不显示网格
            left: 0, // 网格距离容器左侧的距离为0
            right: 20, // 网格距离容器右侧的距离为20
            bottom: 0, // 网格距离容器底部的距离为0
            top: '15%', // 网格距离容器顶部的距离为容器高度的15%
            containLabel: true, // 网格区域包含数据标签
        },
        tooltip: {
            show: true, // 显示提示框
            trigger: 'axis', // 提示框的触发方式为坐标轴触发，即当鼠标悬停在坐标轴上时，提示框会显示相关信息

            // 设置坐标轴指示器的样式
            axisPointer: {
                type: 'line', // 坐标轴指示器的类型为直线，即在触发点处显示一条直线标记
                // 设置坐标轴指示器标签的样式
                label: {
                    show: true, // 显示坐标轴指示器标签
                    // color:'none',
                    fontSize: 8, // 坐标轴指示器标签的字体大小为8
                },
                // 设置坐标轴指示器线条的样式
                lineStyle: {
                    color: '#2094CA', // 坐标轴指示器线条的颜色为蓝色
                    type: 'dotted', // 坐标轴指示器线条的类型为虚线
                },
            },

            textStyle: {
                fontSize: 10, // 提示框文字的字体大小为10
            },
        },
        // 设置x轴的样式和数据
        xAxis: [
            {
                type: 'category', // x轴的类型为类别型，即显示的是离散的数据点。
                boundaryGap: false, // 表示x轴两端不留空白
                // 设置x轴标签的样式
                axisLabel: {
                    fontSize: 8, // x轴标签的字体大小为8
                    color: '#2094CA', // x轴标签的颜色为蓝色
                },
                data: month, // x轴的数据为['A', 'B', 'C', 'D', 'E', 'F']
            }
        ],
        // 设置y轴的样式
        yAxis: [
            {
                splitLine: {show: false}, // 不显示y轴的分割线
                type: 'value', // y轴的类型为数值型，即显示的是连续的数据值
                // 设置y轴标签的样式
                axisLabel: {
                    fontSize: 8, // y轴标签的字体大小为8
                    color: '#2094CA', // y轴标签的颜色为蓝色
                },
            }
        ],
        series: [
            {
                name: '销售额（万元）', // 该图表的名称为"注册总量"
                type: 'line', // 图表类型为折线图
                symbol: 'circle', // 数据点的形状为圆形
                symbolSize: 4, // 数据点的大小为4
                // 设置数据点的样式
                itemStyle: {
                    normal: {// 正常状态下的数据点样式
                        color: '#E78932', // 数据点的颜色为橙色
                    },
                },
                lineStyle: {// 设置线条的样式
                    color: '#E78932', // 线条的颜色为橙色
                    width: 1, // 线条的宽度为1
                },
                label: {// 设置标签的样式
                    show: false, // 表示显示标签
                    position: 'top', // 标签的位置在数据点的上方
                    // 设置标签文字的样式
                    textStyle: {
                        color: '#E78932', // 标签文字的颜色为橙色
                    },
                    fontSize: 8, // 标签文字的字体大小为8
                },
                // 设置区域填充的样式
                areaStyle: {
                    // 区域填充的颜色渐变
                    color: {
                        type: 'linear', // 颜色渐变的类型为线性渐变
                        // 渐变的起点和终点坐标
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        // 渐变的颜色停止点，颜色渐变是从上到下，从深橙色（#D98234）过渡到深灰色（#33313C）
                        colorStops: [{
                            offset: 0, color: '#D98234' // 0% 处的颜色 表示第一个颜色停止点，偏移量为0，颜色为深橙色
                        }, {
                            offset: 1, color: '#33313C' // 100% 处的颜色 表示第二个颜色停止点，偏移量为1，颜色为深灰色
                        }],
                        global: false // 渐变不全局应用
                    },

                    // color:'#CE7E35',
                    // color:'#1C7DEE',
                    // color:'#5FB397',
                    opacity: 0.5, // 区域的透明度为0.5
                },
                data: sales, // 折线图的数据
                showAllSymbol: true, // 显示所有数据点
            },
            {
                name: '利润（万元）', // 图表的名称为"访问总量"
                type: 'line', // 图表类型为折线图
                symbol: 'circle', // 数据点的形状为圆形
                symbolSize: 4, // 数据点的大小为4
                itemStyle: {// 设置数据点的样式
                    normal: {// 正常状态下的数据点样式
                        // borderColor:'#0099FF',
                        color: '#0099FF', // 数据点的颜色为蓝色
                    },
                },
                label: {// 设置标签的样式
                    show: false, // 显示标签
                    position: 'top', // 标签的位置在数据点的上方
                    textStyle: {// 设置标签文字的样式
                        color: '#0099FF', // 标签文字的颜色为蓝色
                    },
                    fontSize: 8, // 标签文字的字体大小为8
                },
                lineStyle: {// 设置线条的样式
                    color: '#0099FF', // 线条的颜色为蓝色
                    width: 0, // 线条的宽度为0
                },
                areaStyle: {// 设置区域填充的样式
                    color: {// 区域填充的颜色渐变
                        type: 'linear', // 颜色渐变的类型为线性渐变
                        // 渐变的起点和终点坐标
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        // 渐变的颜色停止点
                        colorStops: [{
                            offset: 0, color: '#0099FF' // 0% 处的颜色 表示第一个颜色停止点，偏移量为0，颜色为蓝色
                        }, {
                            offset: 1, color: '#394E7F' // 100% 处的颜色 表示第二个颜色停止点，偏移量为1，颜色为深蓝色
                        }],
                        global: false // 渐变不全局应用
                    },
                    opacity: 0.3, // 区域的透明度为0.3
                },
                data: profit, // 折线图的数据
                showAllSymbol: true, // 显示所有数据点
            },
        ]
    };
    // 将配置项和数据应用到图表上
    myChart.setOption(option)

    // 用于在图表中周期性地高亮显示数据点并显示相应的提示框（tooltip）
    var currentIndex = -1; // 初始化当前索引为-1
    // 设置一个定时器，每隔2000毫秒执行一次函数内的代码块
    setInterval(function () {
        var dataLen = option.series[0].data.length; // 获取图表中第一个系列的数据长度
        console.log(option.series[0].data);
        console.log(dataLen); // 6
        // 调用 dispatchAction 方法来执行特定的操作，包括取消之前高亮的图形、高亮当前图形和显示提示框。
        // 取消之前高亮的图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0, // 表示操作第一个系列
            dataIndex: currentIndex // 表示操作的数据索引为当前索引
        });
        /*
            -1     0
            0      1
            1      2
            ...
            5      0
        */
        currentIndex = (currentIndex + 1) % dataLen; // 更新当前索引，使其循环递增，直到达到数据长度
        // 高亮当前图形
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
        // 显示提示框
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
    }, 2000);

})