153 lines
4.1 KiB
JavaScript
Executable File
153 lines
4.1 KiB
JavaScript
Executable File
// 发送 AJAX 请求获取数据
|
||
// 这段代码的目的是从指定的 API 端点获取销售区域数据，并将这些数据分解为三个独立的数组：
|
||
// region（区域名称）、sales（销售额）和 profit（利润）。
|
||
fetch('http://127.0.0.1:5000/api/sales_region')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
var region=[];
|
||
var sales=[];
|
||
var profit=[];
|
||
data.forEach(item => {
|
||
region.push(item.region);
|
||
sales.push(parseFloat(item.sales));
|
||
profit.push(parseFloat(item.profit));
|
||
});
|
||
console.log("======sales_region======")
|
||
console.log(region);
|
||
console.log(sales);
|
||
console.log(profit);
|
||
// console.log([region,sales,profit])
|
||
|
||
var myChart = echarts.init(document.getElementById('data_region'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
textStyle:{
|
||
color:'#0099FF',
|
||
fontSize:10,
|
||
}
|
||
},
|
||
grid: {
|
||
left: '2%',
|
||
right: '4%',
|
||
bottom: '14%',
|
||
top:'16%',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
data: ['销售额', '利润'],
|
||
right: 10,
|
||
top:12,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize:10,
|
||
},
|
||
|
||
itemWidth: 12,
|
||
itemHeight: 10,
|
||
// itemGap: 35
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: region,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'white'
|
||
|
||
}
|
||
},
|
||
axisLabel:{
|
||
fontSize:8,
|
||
color:'#2094CA',
|
||
},
|
||
},
|
||
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'white'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.3)'
|
||
}
|
||
},
|
||
axisLabel:{
|
||
fontSize:8,
|
||
color:'#2094CA',
|
||
},
|
||
},
|
||
series: [{
|
||
name: '销售额',
|
||
type: 'bar',
|
||
barWidth: '15%',
|
||
label:{show:false},
|
||
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%',
|
||
label:{show:false},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#8bd46e'
|
||
}, {
|
||
offset: 1,
|
||
color: '#09bcb7'
|
||
}]),
|
||
barBorderRadius: 11,
|
||
}
|
||
|
||
},
|
||
data: profit,
|
||
}]
|
||
};
|
||
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)
|
||
}) |