echarts使用

介绍

ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。

写一个接口

拿取一些要显示的数据

1
2
3
4
5
6
7
8
9
10
11
def chart_data(request):
"""返回图表需要的数据"""
names, totals = [], []
with connections['default'].cursor() as cursor:
cursor.execute('select name, total from ( '
' select agentid, count(agentid) as total from tb_agent_estate group by(agentid)) as t1 '
' inner join tb_agent t2 on t1.agentid=t2.agentid')
for row in cursor.fetchall():
names.append(row[0])
totals.append(row[1])
return JsonResponse({'names': names, 'totals': totals})

在线导入echarts

1
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>

找到一个简单的柱状图的例子,如https://www.echartsjs.com/examples/editor.html?c=bar-tick-align , 将对应的代码放到AJAX执行成功返回的部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$.ajax({
'url': '/backend/chart/',
'type': 'get',
'dataType': 'json',
'success': function(data){
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init($('#main')[0]);
// 指定图表的配置项和数据
option = {
color: ['#3398DB'],
title: {
text: 'XX楼盘'
},
legend: {
data:['楼盘数']
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : data.names,
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'楼盘数',
type:'bar',
barWidth: '60%',
data: data.totals
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
'error': function(data){
}
});
</script>

效果

echarts

附录

echarts实例

echarts文档

-------------end-------------
0%