190 lines
3.9 KiB
JavaScript
Executable File
190 lines
3.9 KiB
JavaScript
Executable File
// 发送 AJAX 请求获取数据
|
|
fetch('http://127.0.0.1:5000/api/sales_month')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
var month = [];
|
|
var sales = [];
|
|
var profit = [];
|
|
data.forEach(item => {
|
|
month.push(item.month);
|
|
profit.push(parseFloat((item.profit / 10000).toFixed(2)));
|
|
sales.push(parseFloat((item.sales / 10000).toFixed(2)));
|
|
});
|
|
console.log("======sales_month======")
|
|
console.log(month);
|
|
console.log(sales);
|
|
console.log(profit);
|
|
var myChart = echarts.init(document.getElementById('data_month'));
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['销售额（万元）', '利润（万元）'],
|
|
x: 'center',
|
|
y: 'top',
|
|
padding: [5, 0, 0, 0],
|
|
textStyle: {
|
|
color: '#00F1F3', // 修改为正确的颜色代码
|
|
fontSize: 10,
|
|
},
|
|
itemWidth: 28,
|
|
itemHeight: 12,
|
|
},
|
|
grid: {
|
|
show: false,
|
|
left: 0,
|
|
right: 20,
|
|
bottom: 0,
|
|
top: '15%',
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line',
|
|
label: {
|
|
show: true,
|
|
fontSize: 8,
|
|
},
|
|
lineStyle: {
|
|
color: '#2094CA',
|
|
type: 'dotted',
|
|
},
|
|
},
|
|
textStyle: {
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 8,
|
|
color: '#2094CA',
|
|
},
|
|
data: month,
|
|
}],
|
|
yAxis: [{
|
|
splitLine: { show: false },
|
|
type: 'value',
|
|
axisLabel: {
|
|
fontSize: 8,
|
|
color: '#2094CA',
|
|
},
|
|
}],
|
|
series: [{
|
|
name: '销售额（万元）',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
symbolSize: 4,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#E78932',
|
|
},
|
|
},
|
|
lineStyle: {
|
|
color: '#E78932',
|
|
width: 1,
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'top',
|
|
textStyle: {
|
|
color: '#E78932',
|
|
},
|
|
fontSize: 8,
|
|
},
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: '#D98234' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: '#33313C' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
},
|
|
opacity: 0.5,
|
|
},
|
|
data: sales,
|
|
showAllSymbol: true,
|
|
}, {
|
|
name: '利润（万元）',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
symbolSize: 4,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#0099FF',
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'top',
|
|
textStyle: {
|
|
color: '#0099FF',
|
|
},
|
|
fontSize: 8,
|
|
},
|
|
lineStyle: {
|
|
color: '#0099FF',
|
|
width: 0,
|
|
},
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: '#0099FF' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: '#394E7F' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
},
|
|
opacity: 0.3,
|
|
},
|
|
data: profit,
|
|
showAllSymbol: true,
|
|
}]
|
|
};
|
|
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
|
|
});
|
|
}, 2000);
|
|
})
|
|
.catch(error => console.error('Error fetching data:', error)); // 捕获并处理错误
|