refactor(experiment_5):重构实验 5 数据格式和图表展示

- 移除 iris.csv 和 marketing.sql 文件
- 新增 sales_manager.csv 和 sales_month.csv 文件
- 添加 sales_manager.js 文件，实现销售数据的图表展示

experiment_5/task4/js/sales_region.js

@@ -0,0 +1,159 @@
+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);
+
+})