refactor(experiment_5):重构实验 5 数据格式和图表展示
- 移除 iris.csv 和 marketing.sql 文件 - 新增 sales_manager.csv 和 sales_month.csv 文件 - 添加 sales_manager.js 文件，实现销售数据的图表展示
This commit is contained in:
@@ -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
|
|
||||||
|
@@ -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;
|
|
||||||
7
experiment_5/task4/data/sales_manager.csv
Normal file
7
experiment_5/task4/data/sales_manager.csv
Normal file
@@ -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
|
||||||
|
13
experiment_5/task4/data/sales_month.csv
Normal file
13
experiment_5/task4/data/sales_month.csv
Normal file
@@ -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
|
||||||
|
65
experiment_5/task4/data/sales_product.json
Normal file
65
experiment_5/task4/data/sales_product.json
Normal file
@@ -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
|
||||||
|
}]
|
||||||
|
}]
|
||||||
31
experiment_5/task4/data/sales_province.csv
Normal file
31
experiment_5/task4/data/sales_province.csv
Normal file
@@ -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
|
||||||
|
7
experiment_5/task4/data/sales_region.csv
Normal file
7
experiment_5/task4/data/sales_region.csv
Normal file
@@ -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
|
||||||
|
Binary file not shown.
180
experiment_5/task4/js/sales_manager.js
Normal file
180
experiment_5/task4/js/sales_manager.js
Normal file
@@ -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);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
227
experiment_5/task4/js/sales_month.js
Normal file
227
experiment_5/task4/js/sales_month.js
Normal file
@@ -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);
|
||||||
|
|
||||||
|
})
|
||||||
81
experiment_5/task4/js/sales_product.js
Normal file
81
experiment_5/task4/js/sales_product.js
Normal file
@@ -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)
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
316
experiment_5/task4/js/sales_province.js
Normal file
316
experiment_5/task4/js/sales_province.js
Normal file
@@ -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年全国销售额共 <b style='color:#E78932;font-size:24px'>" + sales_total + " </b>万元"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
159
experiment_5/task4/js/sales_region.js
Normal file
159
experiment_5/task4/js/sales_region.js
Normal file
@@ -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);
|
||||||
|
|
||||||
|
})
|
||||||
36
experiment_5/task4/js/test.html
Normal file
36
experiment_5/task4/js/test.html
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user