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