python项目:view_data.py里定义了shop_sales_top()函数,该函数通过连接数据库,进行了店铺销量前十的店铺名和总销量的查询,并将查询到的结果存储到data里,然后return jsonify({"data": data})。通过获取到的数据形成一个echarts柱状图,x轴为销量,y轴为店铺名字,写出代码实现echarts柱状图
时间: 2024-02-11 14:04:38 浏览: 148
用python利用pyecharts库进行可视化_pyecharts_可视化_柱状图
5星 · 资源好评率100%
好的,下面是一个简单的示例代码,仅供参考:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts柱状图</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<div id="myChart" style="width: 800px;height: 600px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '店铺销量前十排名'
},
tooltip: {},
xAxis: {
type: 'value',
name: '销量'
},
yAxis: {
type: 'category',
data: []
},
series: [{
type: 'bar',
data: []
}]
};
// 发送请求获取数据并更新图表
fetch('/shop_sales_top')
.then(function(response) {
return response.json();
})
.then(function(data) {
option.yAxis.data = data.data.map(function(item) {
return item[0];
});
option.series[0].data = data.data.map(function(item) {
return item[1];
});
myChart.setOption(option);
});
</script>
</body>
</html>
```
需要注意的是,上述代码中的`fetch('/shop_sales_top')`是发送请求获取数据的方式,实际应用中需要根据自己的后端框架来实现具体的数据接口。同时,`/shop_sales_top`应该是view_data.py里定义的对应数据接口的路由地址。另外,`data.data`表示获取到的数据,是一个二维数组,第一列是店铺名,第二列是总销量。
阅读全文