djano里如何在views里写orm操作统计客户的地区分布、省份分布、城市分布并在echart里用$.get()绘制出三幅关于地区人数分布、省份人数分布、城市人数分布颜色渐变的柱状图
时间: 2023-12-30 20:02:25 浏览: 31
首先,你需要在views.py文件中编写ORM操作来获取所需的数据。这可以通过使用Django的ORM(Object-Relational Mapping)来完成。假设你有一个名为Client的模型,其中包含客户的地址信息,你可以使用以下代码来获取每个地区、省份和城市的客户数量:
```
from django.db.models import Count
def get_client_distribution(request):
# 获取客户地区分布
area_distribution = Client.objects.values('area').annotate(count=Count('id'))
# 获取客户省份分布
province_distribution = Client.objects.values('province').annotate(count=Count('id'))
# 获取客户城市分布
city_distribution = Client.objects.values('city').annotate(count=Count('id'))
# 将数据转换为字典格式
area_data = {}
for item in area_distribution:
area_data[item['area']] = item['count']
province_data = {}
for item in province_distribution:
province_data[item['province']] = item['count']
city_data = {}
for item in city_distribution:
city_data[item['city']] = item['count']
# 将数据传递给模板
context = {
'area_data': area_data,
'province_data': province_data,
'city_data': city_data,
}
return render(request, 'client_distribution.html', context)
```
然后,你需要在模板中编写JavaScript代码来使用ECharts绘制柱状图。可以使用JQuery的$.get()方法从服务器获取数据,然后使用ECharts的API来绘制柱状图。以下是一个简单的示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户分布</title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
<div id="area_chart" style="width: 600px;height:400px;"></div>
<div id="province_chart" style="width: 600px;height:400px;"></div>
<div id="city_chart" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
$(function() {
// 获取地区分布数据并绘制图表
$.get('/get_client_distribution/', function (data) {
var area_data = data.area_data;
var area_chart = echarts.init(document.getElementById('area_chart'));
var option = {
title: {
text: '客户地区分布图'
},
tooltip: {},
xAxis: {
data: Object.keys(area_data)
},
yAxis: {},
series: [{
name: '客户数量',
type: 'bar',
data: Object.values(area_data),
itemStyle: {
normal: {
color: function (params) {
var color_list = [
['#F0FFFF', '#00CED1'],
['#FAFAD2', '#FFD700'],
['#FFE4B5', '#FFA500'],
['#F0E68C', '#BDB76B'],
['#E0FFFF', '#00FFFF'],
];
var index = params.dataIndex % color_list.length;
return {
type: 'linear',
colorStops: [
{offset: 0, color: color_list[index][0]},
{offset: 1, color: color_list[index][1]},
],
};
}
}
}
}]
};
area_chart.setOption(option);
});
// 获取省份分布数据并绘制图表
$.get('/get_client_distribution/', function (data) {
var province_data = data.province_data;
var province_chart = echarts.init(document.getElementById('province_chart'));
var option = {
title: {
text: '客户省份分布图'
},
tooltip: {},
xAxis: {
data: Object.keys(province_data)
},
yAxis: {},
series: [{
name: '客户数量',
type: 'bar',
data: Object.values(province_data),
itemStyle: {
normal: {
color: function (params) {
var color_list = [
['#F0FFFF', '#00CED1'],
['#FAFAD2', '#FFD700'],
['#FFE4B5', '#FFA500'],
['#F0E68C', '#BDB76B'],
['#E0FFFF', '#00FFFF'],
];
var index = params.dataIndex % color_list.length;
return {
type: 'linear',
colorStops: [
{offset: 0, color: color_list[index][0]},
{offset: 1, color: color_list[index][1]},
],
};
}
}
}
}]
};
province_chart.setOption(option);
});
// 获取城市分布数据并绘制图表
$.get('/get_client_distribution/', function (data) {
var city_data = data.city_data;
var city_chart = echarts.init(document.getElementById('city_chart'));
var option = {
title: {
text: '客户城市分布图'
},
tooltip: {},
xAxis: {
data: Object.keys(city_data)
},
yAxis: {},
series: [{
name: '客户数量',
type: 'bar',
data: Object.values(city_data),
itemStyle: {
normal: {
color: function (params) {
var color_list = [
['#F0FFFF', '#00CED1'],
['#FAFAD2', '#FFD700'],
['#FFE4B5', '#FFA500'],
['#F0E68C', '#BDB76B'],
['#E0FFFF', '#00FFFF'],
];
var index = params.dataIndex % color_list.length;
return {
type: 'linear',
colorStops: [
{offset: 0, color: color_list[index][0]},
{offset: 1, color: color_list[index][1]},
],
};
}
}
}
}]
};
city_chart.setOption(option);
});
});
</script>
</body>
</html>
```
这将在页面上创建三个柱状图,分别显示地区人数分布、省份人数分布和城市人数分布。每个柱状图的颜色都采用了颜色渐变的效果,以提高可视化效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)