python做大屏数据可视化_Python flask+echarts实现数据可视化
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: './static',
}
});
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',// 按需加载
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
// 设置
var option = {
title: {
text: '商品库存与销量数据可视化示例' //图表标题
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['库存量','销售量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
axisLabel:{interval:0,rotate:-45},
data : []
}
],
grid: { // 控制图的大小，调整下面这些值就可以，
y2: 90,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'库存量',
type:'bar',
data:[]
},
{
name:'销售量',
type:'line',
data:[]
}
]
};
$.ajax({
cache: false,
type: "POST",
url: "/viewdata", //把表单数据发送到/viewdata
data: null, // 发送的数据
dataType : "json", //返回数据形式为json
async: false,
error: function(request) {
alert("发送请求失败！");
},
success: function(result) {
//console.log(result);
for (i = 0, max = result.Goods_name.length; i < max; i++) { //注意：result.Goods_name.length
option.xAxis[0].data.push(result.Goods_name[i]);
option.series[0].data.push(parseFloat(result.Goods_inventory[i]));
option.series[1].data.push(parseFloat(result.Goods_sales_volume[i]));
};
// 为echarts对象加载数据
myChart.setOption(option);
}
});
// 为echarts对象加载数据
//myChart.setOption(option);
}
);