110 lines
2.7 KiB
JavaScript
Executable File
110 lines
2.7 KiB
JavaScript
Executable File
// 发送 AJAX 请求获取数据
|
|
fetch('http://127.0.0.1:5000/api/sales_product')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log("sales_product"+data)
|
|
var myChart = echarts.init(document.getElementById('data_product'));
|
|
var color = [
|
|
"#00C6FB",
|
|
"#5781FD",
|
|
"#4DB1CB",
|
|
// "#3EBD7C",
|
|
// "#F7A925",
|
|
// "#bda29a",
|
|
// "#ca8622",
|
|
// "#749f83",
|
|
// "#6e7074",
|
|
// "#546570",
|
|
// "#c4ccd3"
|
|
];
|
|
|
|
option = {
|
|
tooltip: {
|
|
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
// type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
// },
|
|
// textStyle:{
|
|
// color:'#0099FF',
|
|
// fontSize:10,
|
|
// }
|
|
},
|
|
series: [{
|
|
name: '销售额',
|
|
type: 'treemap',
|
|
roam:false,
|
|
nodeClick:false,
|
|
breadcrumb:false,
|
|
left:0,
|
|
right:0,
|
|
top:0,
|
|
bottom:0,
|
|
itemStyle: {
|
|
borderColor: '#062e62'
|
|
},
|
|
label:{
|
|
fontSize:8,
|
|
color:'#fff',
|
|
},
|
|
levels: [{
|
|
color: color,
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 0,
|
|
borderColor: '#062e62',
|
|
gapWidth: 2
|
|
}
|
|
}
|
|
},
|
|
{
|
|
//colorSaturation: [0.35, 0.6],
|
|
colorAlpha: [1, 0.5],
|
|
upperLabel: {
|
|
normal: {
|
|
color: '#00C6FB',
|
|
fontSize:10,
|
|
show: true,
|
|
height: 15
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 5,
|
|
borderColor: '#062e62',
|
|
gapWidth: 1,
|
|
},
|
|
emphasis: {
|
|
borderColor: '#ccc'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
leafDepth: 2,
|
|
data: data
|
|
}]
|
|
};
|
|
//指定的配置项
|
|
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
|
|
});
|
|
}, 1000);
|
|
}) |