128 lines
3.1 KiB
JavaScript
Executable File
128 lines
3.1 KiB
JavaScript
Executable File
// 发送 AJAX 请求获取数据
|
||
// 这段代码的作用是从指定的 API 端点（http://127.0.0.1:5000/api/sales_manager）获取销售经理相关的数据，
|
||
// 并将这些数据整理成三个独立的数组：sales_data、profit_data 和 sales_manager。
|
||
fetch('http://127.0.0.1:5000/api/sales_manager')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
var sales_data = [];
|
||
var profit_data = [];
|
||
var sales_manager = [];
|
||
data.forEach(item => {
|
||
temp = {};
|
||
temp1 = {};
|
||
temp['value'] = parseFloat(item.sales);
|
||
temp['name'] = item.sales_manager;
|
||
temp1['value'] = parseFloat(item.profit);
|
||
temp1['name'] = item.sales_manager;
|
||
sales_data.push(temp);
|
||
profit_data.push(temp1);
|
||
sales_manager.push(item.sales_manager);
|
||
});
|
||
console.log("======sales_manager======");
|
||
console.log(sales_manager);
|
||
console.log(sales_data);
|
||
console.log(profit_data);
|
||
var myChart = echarts.init(document.getElementById('data_manager'));
|
||
var option = {
|
||
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
|
||
title: {
|
||
text: ' 销售情况 利润情况',
|
||
left: 'left',
|
||
textStyle: {
|
||
color: '#0099FF',
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
left: 'center',
|
||
top: 'bottom',
|
||
data: sales_manager,
|
||
textStyle: {
|
||
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
|
||
},
|
||
padding: 0,
|
||
itemGap: 3,
|
||
itemWidth: 30,
|
||
|
||
|
||
},
|
||
series: [
|
||
{
|
||
name: '销售额',
|
||
type: 'pie',
|
||
radius: [5, 85],
|
||
center: ['30%', '50%'],
|
||
roseType: 'area',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
data: sales_data,
|
||
},
|
||
{
|
||
name: '利润',
|
||
type: 'pie',
|
||
radius: [5, 85],
|
||
center: ['80%', '50%'],
|
||
roseType: 'area',
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
data: profit_data,
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
var currentIndex = -1;
|
||
var pie_index = -1;
|
||
var pie_index1 = 0
|
||
setInterval(function () {
|
||
var dataLen = option.series[1].data.length;
|
||
pie_index = pie_index == 11 ? 0 : (pie_index + 1)
|
||
// console.log(currentIndex1)
|
||
// 取消之前高亮的图形
|
||
myChart.dispatchAction({
|
||
type: 'downplay',
|
||
seriesIndex: pie_index1,
|
||
dataIndex: currentIndex
|
||
});
|
||
currentIndex = (currentIndex + 1) % dataLen;
|
||
pie_index1 = parseInt(pie_index / 6)
|
||
// 高亮当前图形
|
||
myChart.dispatchAction({
|
||
type: 'highlight',
|
||
seriesIndex: pie_index1,
|
||
dataIndex: currentIndex
|
||
});
|
||
// 显示 tooltip
|
||
myChart.dispatchAction({
|
||
type: 'showTip',
|
||
seriesIndex: pie_index1,
|
||
dataIndex: currentIndex
|
||
});
|
||
}, 2000);
|
||
}) |