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

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

experiment_5/task4/data/iris.csv

@@ -1,151 +0,0 @@
-Id,PetalLength,PetalWidth,SepalLength,SepalWidth,Species
-1,5.1,3.5,1.4,0.2,setosa
-2,4.9,3,1.4,0.2,setosa
-3,4.7,3.2,1.3,0.2,setosa
-4,4.6,3.1,1.5,0.2,setosa
-5,5,3.6,1.4,0.2,setosa
-6,5.4,3.9,1.7,0.4,setosa
-7,4.6,3.4,1.4,0.3,setosa
-8,5,3.4,1.5,0.2,setosa
-9,4.4,2.9,1.4,0.2,setosa
-10,4.9,3.1,1.5,0.1,setosa
-11,5.4,3.7,1.5,0.2,setosa
-12,4.8,3.4,1.6,0.2,setosa
-13,4.8,3,1.4,0.1,setosa
-14,4.3,3,1.1,0.1,setosa
-15,5.8,4,1.2,0.2,setosa
-16,5.7,4.4,1.5,0.4,setosa
-17,5.4,3.9,1.3,0.4,setosa
-18,5.1,3.5,1.4,0.3,setosa
-19,5.7,3.8,1.7,0.3,setosa
-20,5.1,3.8,1.5,0.3,setosa
-21,5.4,3.4,1.7,0.2,setosa
-22,5.1,3.7,1.5,0.4,setosa
-23,4.6,3.6,1,0.2,setosa
-24,5.1,3.3,1.7,0.5,setosa
-25,4.8,3.4,1.9,0.2,setosa
-26,5,3,1.6,0.2,setosa
-27,5,3.4,1.6,0.4,setosa
-28,5.2,3.5,1.5,0.2,setosa
-29,5.2,3.4,1.4,0.2,setosa
-30,4.7,3.2,1.6,0.2,setosa
-31,4.8,3.1,1.6,0.2,setosa
-32,5.4,3.4,1.5,0.4,setosa
-33,5.2,4.1,1.5,0.1,setosa
-34,5.5,4.2,1.4,0.2,setosa
-35,4.9,3.1,1.5,0.2,setosa
-36,5,3.2,1.2,0.2,setosa
-37,5.5,3.5,1.3,0.2,setosa
-38,4.9,3.6,1.4,0.1,setosa
-39,4.4,3,1.3,0.2,setosa
-40,5.1,3.4,1.5,0.2,setosa
-41,5,3.5,1.3,0.3,setosa
-42,4.5,2.3,1.3,0.3,setosa
-43,4.4,3.2,1.3,0.2,setosa
-44,5,3.5,1.6,0.6,setosa
-45,5.1,3.8,1.9,0.4,setosa
-46,4.8,3,1.4,0.3,setosa
-47,5.1,3.8,1.6,0.2,setosa
-48,4.6,3.2,1.4,0.2,setosa
-49,5.3,3.7,1.5,0.2,setosa
-50,5,3.3,1.4,0.2,setosa
-51,7,3.2,4.7,1.4,versicolor
-52,6.4,3.2,4.5,1.5,versicolor
-53,6.9,3.1,4.9,1.5,versicolor
-54,5.5,2.3,4,1.3,versicolor
-55,6.5,2.8,4.6,1.5,versicolor
-56,5.7,2.8,4.5,1.3,versicolor
-57,6.3,3.3,4.7,1.6,versicolor
-58,4.9,2.4,3.3,1,versicolor
-59,6.6,2.9,4.6,1.3,versicolor
-60,5.2,2.7,3.9,1.4,versicolor
-61,5,2,3.5,1,versicolor
-62,5.9,3,4.2,1.5,versicolor
-63,6,2.2,4,1,versicolor
-64,6.1,2.9,4.7,1.4,versicolor
-65,5.6,2.9,3.6,1.3,versicolor
-66,6.7,3.1,4.4,1.4,versicolor
-67,5.6,3,4.5,1.5,versicolor
-68,5.8,2.7,4.1,1,versicolor
-69,6.2,2.2,4.5,1.5,versicolor
-70,5.6,2.5,3.9,1.1,versicolor
-71,5.9,3.2,4.8,1.8,versicolor
-72,6.1,2.8,4,1.3,versicolor
-73,6.3,2.5,4.9,1.5,versicolor
-74,6.1,2.8,4.7,1.2,versicolor
-75,6.4,2.9,4.3,1.3,versicolor
-76,6.6,3,4.4,1.4,versicolor
-77,6.8,2.8,4.8,1.4,versicolor
-78,6.7,3,5,1.7,versicolor
-79,6,2.9,4.5,1.5,versicolor
-80,5.7,2.6,3.5,1,versicolor
-81,5.5,2.4,3.8,1.1,versicolor
-82,5.5,2.4,3.7,1,versicolor
-83,5.8,2.7,3.9,1.2,versicolor
-84,6,2.7,5.1,1.6,versicolor
-85,5.4,3,4.5,1.5,versicolor
-86,6,3.4,4.5,1.6,versicolor
-87,6.7,3.1,4.7,1.5,versicolor
-88,6.3,2.3,4.4,1.3,versicolor
-89,5.6,3,4.1,1.3,versicolor
-90,5.5,2.5,4,1.3,versicolor
-91,5.5,2.6,4.4,1.2,versicolor
-92,6.1,3,4.6,1.4,versicolor
-93,5.8,2.6,4,1.2,versicolor
-94,5,2.3,3.3,1,versicolor
-95,5.6,2.7,4.2,1.3,versicolor
-96,5.7,3,4.2,1.2,versicolor
-97,5.7,2.9,4.2,1.3,versicolor
-98,6.2,2.9,4.3,1.3,versicolor
-99,5.1,2.5,3,1.1,versicolor
-100,5.7,2.8,4.1,1.3,versicolor
-101,6.3,3.3,6,2.5,virginica
-102,5.8,2.7,5.1,1.9,virginica
-103,7.1,3,5.9,2.1,virginica
-104,6.3,2.9,5.6,1.8,virginica
-105,6.5,3,5.8,2.2,virginica
-106,7.6,3,6.6,2.1,virginica
-107,4.9,2.5,4.5,1.7,virginica
-108,7.3,2.9,6.3,1.8,virginica
-109,6.7,2.5,5.8,1.8,virginica
-110,7.2,3.6,6.1,2.5,virginica
-111,6.5,3.2,5.1,2,virginica
-112,6.4,2.7,5.3,1.9,virginica
-113,6.8,3,5.5,2.1,virginica
-114,5.7,2.5,5,2,virginica
-115,5.8,2.8,5.1,2.4,virginica
-116,6.4,3.2,5.3,2.3,virginica
-117,6.5,3,5.5,1.8,virginica
-118,7.7,3.8,6.7,2.2,virginica
-119,7.7,2.6,6.9,2.3,virginica
-120,6,2.2,5,1.5,virginica
-121,6.9,3.2,5.7,2.3,virginica
-122,5.6,2.8,4.9,2,virginica
-123,7.7,2.8,6.7,2,virginica
-124,6.3,2.7,4.9,1.8,virginica
-125,6.7,3.3,5.7,2.1,virginica
-126,7.2,3.2,6,1.8,virginica
-127,6.2,2.8,4.8,1.8,virginica
-128,6.1,3,4.9,1.8,virginica
-129,6.4,2.8,5.6,2.1,virginica
-130,7.2,3,5.8,1.6,virginica
-131,7.4,2.8,6.1,1.9,virginica
-132,7.9,3.8,6.4,2,virginica
-133,6.4,2.8,5.6,2.2,virginica
-134,6.3,2.8,5.1,1.5,virginica
-135,6.1,2.6,5.6,1.4,virginica
-136,7.7,3,6.1,2.3,virginica
-137,6.3,3.4,5.6,2.4,virginica
-138,6.4,3.1,5.5,1.8,virginica
-139,6,3,4.8,1.8,virginica
-140,6.9,3.1,5.4,2.1,virginica
-141,6.7,3.1,5.6,2.4,virginica
-142,6.9,3.1,5.1,2.3,virginica
-143,5.8,2.7,5.1,1.9,virginica
-144,6.8,3.2,5.9,2.3,virginica
-145,6.7,3.3,5.7,2.5,virginica
-146,6.7,3,5.2,2.3,virginica
-147,6.3,2.5,5,1.9,virginica
-148,6.5,3,5.2,2,virginica
-149,6.2,3.4,5.4,2.3,virginica
-150,5.9,3,5.1,1.8,virginica

experiment_5/task4/data/marketing.sql

@@ -1,183 +0,0 @@
-/*
- Navicat Premium Data Transfer
-
- Source Server         : localhost_3306
- Source Server Type    : MySQL
- Source Server Version : 80020
- Source Host           : localhost:3306
- Source Schema         : marketing
-
- Target Server Type    : MySQL
- Target Server Version : 80020
- File Encoding         : 65001
-
- Date: 20/04/2025 00:05:44
-*/
-
-SET NAMES utf8mb4;
-SET FOREIGN_KEY_CHECKS = 0;
-
--- ----------------------------
--- Table structure for main_categories
--- ----------------------------
-DROP TABLE IF EXISTS `main_categories`;
-CREATE TABLE `main_categories`  (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
-  `value` decimal(10, 3) NULL DEFAULT NULL,
-  PRIMARY KEY (`id`) USING BTREE
-) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-
--- ----------------------------
--- Records of main_categories
--- ----------------------------
-INSERT INTO `main_categories` VALUES (1, '办公用品', 949270.224);
-INSERT INTO `main_categories` VALUES (2, '技术', 937985.552);
-INSERT INTO `main_categories` VALUES (3, '家具', 1028418.503);
-
--- ----------------------------
--- Table structure for sales_manager
--- ----------------------------
-DROP TABLE IF EXISTS `sales_manager`;
-CREATE TABLE `sales_manager`  (
-  `sales_manager` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
-  `sales` decimal(10, 3) NULL DEFAULT NULL,
-  `profit` decimal(10, 3) NULL DEFAULT NULL
-) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-
--- ----------------------------
--- Records of sales_manager
--- ----------------------------
-INSERT INTO `sales_manager` VALUES ('郝杰', 502667.277, 55300.637);
-INSERT INTO `sales_manager` VALUES ('江奕健', 179421.480, 11725.000);
-INSERT INTO `sales_manager` VALUES ('姜伟', 222300.092, 19919.872);
-INSERT INTO `sales_manager` VALUES ('王倩倩', 691845.854, 92687.014);
-INSERT INTO `sales_manager` VALUES ('杨洪光', 761143.054, 96180.574);
-INSERT INTO `sales_manager` VALUES ('张怡莲', 558296.522, 93976.162);
-
--- ----------------------------
--- Table structure for sales_month
--- ----------------------------
-DROP TABLE IF EXISTS `sales_month`;
-CREATE TABLE `sales_month`  (
-  `month` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
-  `sales` decimal(10, 3) NULL DEFAULT NULL,
-  `profit` decimal(10, 3) NULL DEFAULT NULL
-) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-
--- ----------------------------
--- Records of sales_month
--- ----------------------------
-INSERT INTO `sales_month` VALUES ('1月', 226678.830, 37233.770);
-INSERT INTO `sales_month` VALUES ('2月', 109855.158, 19834.458);
-INSERT INTO `sales_month` VALUES ('3月', 167173.727, 18748.247);
-INSERT INTO `sales_month` VALUES ('4月', 96984.692, 16501.352);
-INSERT INTO `sales_month` VALUES ('5月', 232199.107, 23984.947);
-INSERT INTO `sales_month` VALUES ('6月', 339729.698, 39157.118);
-INSERT INTO `sales_month` VALUES ('7月', 140050.918, 11800.698);
-INSERT INTO `sales_month` VALUES ('8月', 356128.507, 66818.087);
-INSERT INTO `sales_month` VALUES ('9月', 322759.367, 24133.207);
-INSERT INTO `sales_month` VALUES ('10月', 289269.169, 33635.329);
-INSERT INTO `sales_month` VALUES ('11月', 342142.150, 42611.870);
-INSERT INTO `sales_month` VALUES ('12月', 292702.956, 35330.176);
-
--- ----------------------------
--- Table structure for sales_province
--- ----------------------------
-DROP TABLE IF EXISTS `sales_province`;
-CREATE TABLE `sales_province`  (
-  `province` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
-  `sales` decimal(10, 3) NULL DEFAULT NULL,
-  `profit` decimal(10, 3) NULL DEFAULT NULL
-) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-
--- ----------------------------
--- Records of sales_province
--- ----------------------------
-INSERT INTO `sales_province` VALUES ('安徽', 113742.734, 32222.834);
-INSERT INTO `sales_province` VALUES ('北京', 76154.540, 19854.240);
-INSERT INTO `sales_province` VALUES ('福建', 102315.080, 32774.700);
-INSERT INTO `sales_province` VALUES ('甘肃', 47267.444, -13210.036);
-INSERT INTO `sales_province` VALUES ('广东', 254769.725, 58887.605);
-INSERT INTO `sales_province` VALUES ('广西', 48349.532, 14036.932);
-INSERT INTO `sales_province` VALUES ('贵州', 15893.136, 287.616);
-INSERT INTO `sales_province` VALUES ('海南', 10995.880, 4132.940);
-INSERT INTO `sales_province` VALUES ('河北', 227145.800, 43675.380);
-INSERT INTO `sales_province` VALUES ('河南', 79220.540, 17722.600);
-INSERT INTO `sales_province` VALUES ('黑龙江', 273877.632, 66982.132);
-INSERT INTO `sales_province` VALUES ('湖北', 135006.900, -33492.340);
-INSERT INTO `sales_province` VALUES ('湖南', 163503.277, 31399.277);
-INSERT INTO `sales_province` VALUES ('吉林', 76539.617, 17712.317);
-INSERT INTO `sales_province` VALUES ('江苏', 128183.776, -16801.764);
-INSERT INTO `sales_province` VALUES ('江西', 29987.860, 7944.720);
-INSERT INTO `sales_province` VALUES ('辽宁', 152250.028, -29393.812);
-INSERT INTO `sales_province` VALUES ('内蒙古', 59787.252, -15047.368);
-INSERT INTO `sales_province` VALUES ('宁夏', 12685.988, -900.592);
-INSERT INTO `sales_province` VALUES ('山东', 192400.460, 49812.560);
-INSERT INTO `sales_province` VALUES ('山西', 99782.900, 25386.900);
-INSERT INTO `sales_province` VALUES ('陕西', 102767.168, 21152.628);
-INSERT INTO `sales_province` VALUES ('上海', 99893.584, 17668.784);
-INSERT INTO `sales_province` VALUES ('四川', 60567.584, -9514.876);
-INSERT INTO `sales_province` VALUES ('天津', 95426.030, 20107.010);
-INSERT INTO `sales_province` VALUES ('西藏', 1144.920, 400.260);
-INSERT INTO `sales_province` VALUES ('新疆', 16700.880, 4683.000);
-INSERT INTO `sales_province` VALUES ('云南', 79432.052, 16937.032);
-INSERT INTO `sales_province` VALUES ('浙江', 94619.560, -27441.260);
-INSERT INTO `sales_province` VALUES ('重庆', 65262.400, 11809.840);
-
--- ----------------------------
--- Table structure for sales_region
--- ----------------------------
-DROP TABLE IF EXISTS `sales_region`;
-CREATE TABLE `sales_region`  (
-  `region` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
-  `sales` decimal(10, 3) NULL DEFAULT NULL,
-  `profit` decimal(10, 3) NULL DEFAULT NULL
-) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-
--- ----------------------------
--- Records of sales_region
--- ----------------------------
-INSERT INTO `sales_region` VALUES ('东北', 502667.277, 55300.637);
-INSERT INTO `sales_region` VALUES ('华北', 558296.522, 93976.162);
-INSERT INTO `sales_region` VALUES ('华东', 761143.054, 96180.574);
-INSERT INTO `sales_region` VALUES ('西北', 179421.480, 11725.000);
-INSERT INTO `sales_region` VALUES ('西南', 222300.092, 19919.872);
-INSERT INTO `sales_region` VALUES ('中南', 691845.854, 92687.014);
-
--- ----------------------------
--- Table structure for sub_categories
--- ----------------------------
-DROP TABLE IF EXISTS `sub_categories`;
-CREATE TABLE `sub_categories`  (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `main_category_id` int NULL DEFAULT NULL,
-  `name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
-  `value` decimal(10, 3) NULL DEFAULT NULL,
-  PRIMARY KEY (`id`) USING BTREE,
-  INDEX `main_category_id`(`main_category_id`) USING BTREE,
-  CONSTRAINT `sub_categories_ibfk_1` FOREIGN KEY (`main_category_id`) REFERENCES `main_categories` (`id`) ON DELETE RESTRICT ON UPDATE RESTRICT
-) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-
--- ----------------------------
--- Records of sub_categories
--- ----------------------------
-INSERT INTO `sub_categories` VALUES (1, 1, '标签', 18936.540);
-INSERT INTO `sub_categories` VALUES (2, 1, '美术', 33038.096);
-INSERT INTO `sub_categories` VALUES (3, 1, '器具', 449744.764);
-INSERT INTO `sub_categories` VALUES (4, 1, '收纳具', 214582.200);
-INSERT INTO `sub_categories` VALUES (5, 1, '系固件', 20045.480);
-INSERT INTO `sub_categories` VALUES (6, 1, '信封', 51941.960);
-INSERT INTO `sub_categories` VALUES (7, 1, '用品', 47070.128);
-INSERT INTO `sub_categories` VALUES (8, 1, '纸张', 51413.740);
-INSERT INTO `sub_categories` VALUES (9, 1, '装订机', 62497.316);
-INSERT INTO `sub_categories` VALUES (10, 2, '电话', 330951.320);
-INSERT INTO `sub_categories` VALUES (11, 2, '复印机', 347513.264);
-INSERT INTO `sub_categories` VALUES (12, 2, '配件', 150562.664);
-INSERT INTO `sub_categories` VALUES (13, 2, '设备', 108958.304);
-INSERT INTO `sub_categories` VALUES (14, 3, '书架', 366969.540);
-INSERT INTO `sub_categories` VALUES (15, 3, '椅子', 409393.054);
-INSERT INTO `sub_categories` VALUES (16, 3, '用具', 83848.996);
-INSERT INTO `sub_categories` VALUES (17, 3, '桌子', 168206.913);
-
-SET FOREIGN_KEY_CHECKS = 1;

experiment_5/task4/data/sales_manager.csv

@@ -0,0 +1,7 @@
+sales_manager,sales,profit
+郝杰,502667.277,55300.637
+江奕健,179421.48,11725
+姜伟,222300.092,19919.872
+王倩倩,691845.854,92687.014
+杨洪光,761143.054,96180.574
+张怡莲,558296.522,93976.162

experiment_5/task4/data/sales_month.csv

@@ -0,0 +1,13 @@
+month,sales,profit
+1月,226678.83,37233.77
+2月,109855.158,19834.458
+3月,167173.727,18748.247
+4月,96984.692,16501.352
+5月,232199.107,23984.947
+6月,339729.698,39157.118
+7月,140050.918,11800.698
+8月,356128.507,66818.087
+9月,322759.367,24133.207
+10月,289269.169,33635.329
+11月,342142.15,42611.87
+12月,292702.956,35330.176

experiment_5/task4/data/sales_product.json

@@ -0,0 +1,65 @@
+[
+	{
+	"name": "办公用品",
+    "value": 949270.224,
+    "children": [{
+        "name": "标签",
+        "value": 18936.54
+    }, {
+        "name": "美术",
+        "value": 33038.096
+    }, {
+        "name": "器具",
+        "value": 449744.764
+    }, {
+        "name": "收纳具",
+        "value": 214582.2
+    }, {
+        "name": "系固件",
+        "value": 20045.48
+    }, {
+        "name": "信封",
+        "value": 51941.96
+    }, {
+        "name": "用品",
+        "value": 47070.128
+    }, {
+        "name": "纸张",
+        "value": 51413.74
+    },{
+        "name": "装订机",
+        "value": 62497.316
+    }]
+}, {
+    "name": "技术",
+    "value": 937985.552,
+    "children": [{
+        "name": "电话",
+        "value": 330951.32
+    }, {
+        "name": "复印机",
+        "value": 347513.264
+    }, {
+        "name": "配件",
+        "value": 150562.664
+    }, {
+        "name": "设备",
+        "value": 108958.304
+    }]
+},  {
+    "name": "家具",
+    "value": 1028418.503,
+    "children": [{
+        "name": "书架",
+        "value": 366969.54
+    }, {
+        "name": "椅子",
+        "value": 409393.054
+    }, {
+        "name": "用具",
+        "value": 83848.996
+    }, {
+        "name": "桌子",
+        "value": 168206.913
+    }]
+}]

experiment_5/task4/data/sales_province.csv

@@ -0,0 +1,31 @@
+province,sales,profit
+安徽,113742.734,32222.834
+北京,76154.54,19854.24
+福建,102315.08,32774.7
+甘肃,47267.444,-13210.036
+广东,254769.725,58887.605
+广西,48349.532,14036.932
+贵州,15893.136,287.616
+海南,10995.88,4132.94
+河北,227145.8,43675.38
+河南,79220.54,17722.6
+黑龙江,273877.632,66982.132
+湖北,135006.9,-33492.34
+湖南,163503.277,31399.277
+吉林,76539.617,17712.317
+江苏,128183.776,-16801.764
+江西,29987.86,7944.72
+辽宁,152250.028,-29393.812
+内蒙古,59787.252,-15047.368
+宁夏,12685.988,-900.592
+山东,192400.46,49812.56
+山西,99782.9,25386.9
+陕西,102767.168,21152.628
+上海,99893.584,17668.784
+四川,60567.584,-9514.876
+天津,95426.03,20107.01
+西藏,1144.92,400.26
+新疆,16700.88,4683
+云南,79432.052,16937.032
+浙江,94619.56,-27441.26
+重庆,65262.4,11809.84

experiment_5/task4/data/sales_region.csv

@@ -0,0 +1,7 @@
+region,sales,profit
+东北,502667.277,55300.637
+华北,558296.522,93976.162
+华东,761143.054,96180.574
+西北,179421.48,11725
+西南,222300.092,19919.872
+中南,691845.854,92687.014

experiment_5/task4/js/sales_manager.js

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

experiment_5/task4/js/sales_month.js

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

experiment_5/task4/js/sales_product.js

@@ -0,0 +1,81 @@
+d3.json("data/sales_product.json", function (error, data) {
+    // console.log(data);
+    var myChart = echarts.init(document.getElementById('data_product'));
+   
+    var color = [
+        "#00C6FB",
+        "#5781FD",
+        "#4DB1CB",
+        //  "#3EBD7C",
+        //  "#F7A925",
+        //  "#bda29a",
+        //  "#ca8622",
+        //  "#749f83",
+        //  "#6e7074",
+        //  "#546570",
+        //  "#c4ccd3"
+    ];
+
+    option = {
+        tooltip: {},
+        series: [{
+            name: '销售额', // 图表的名称
+            type: 'treemap', // 图表的类型树状图
+            roam: false, // 是否允许鼠标缩放和平移，这里设置为false，表示不允许
+            nodeClick: false, // 是否允许点击节点进行交互，这里设置为false，表示不允许
+            breadcrumb: false, // 是否显示导航路径，这里设置为false，表示不显示
+            // 分别设置图表的左边距、右边距、上边距和下边距，这里都设置为0。
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            itemStyle: {
+                borderColor: '#062e62' // 定义节点的样式，这里设置了边框颜色为'#062e62'
+            },
+            // 定义节点标签的样式，这里设置了字体大小为8，颜色为白色
+            label: {
+                fontSize: 8,
+                color: '#fff',
+            },
+            // 用于定义树状图的层级样式
+            levels: [{// 定义了多个层级的样式
+                color: color, // 设置节点的颜色
+                itemStyle: {// 定义节点的样式
+                    normal: {// 正常状态下的样式
+                        borderWidth: 0, // 边框宽度，这里设置为0，表示无边框
+                        borderColor: '#062e62', // 设置边框颜色
+                        gapWidth: 5 // 设置节点之间的间隔宽度
+                    }
+                }
+            },
+                {
+                    //colorSaturation: [0.35, 0.6],
+                    colorAlpha: [1, 0.5], // 节点颜色的透明度，这里设置为[1, 0.5]，表示正常状态下节点的颜色透明度为1，鼠标悬停时透明度为0.5。
+                    upperLabel: {// 定义上层节点标签的样式
+                        normal: {// 定义正常状态下的样式
+                            color: '#00C6FB', // 设置标签颜色
+                            fontSize: 10, // 设置标签字体大小
+                            show: true, // 是否显示标签，这里设置为true，表示显示
+                            height: 15 // 设置标签高度
+                        }
+                    },
+                    itemStyle: {// 定义节点的样式
+                        normal: {// 定义正常状态下的样式
+                            borderWidth: 5, // 设置边框宽度
+                            borderColor: '#062e62', // 设置边框颜色
+                            gapWidth: 1, // 设置节点之间的间隔宽度
+                        },
+                        emphasis: {// 定义鼠标悬停时的样式
+                            borderColor: '#ccc' // 设置边框颜色
+                        }
+                    }
+                }
+            ],
+            leafDepth: 2, // 树的叶子节点深度，其值为2
+            data: data// 数据源
+        }]
+    };
+    myChart.setOption(option)
+
+
+})

experiment_5/task4/js/sales_province.js

@@ -0,0 +1,316 @@
+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>万元"
+  
+
+
+})

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);
+
+})

experiment_5/task4/js/test.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+
+    <script src="d3.min.js"></script>
+
+</head>
+<body>
+
+<script>
+    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)
+    })
+
+
+
+</script>
+
+</body>
+</html>