dev_xulongjin
2f39064475
- 移除 iris.csv 和 marketing.sql 文件 - 新增 sales_manager.csv 和 sales_month.csv 文件 - 添加 sales_manager.js 文件，实现销售数据的图表展示
227 lines
10 KiB
JavaScript
227 lines
10 KiB
JavaScript
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);
|
||
|
||
}) |