前置文章
数据可视化之前,先确保Django可以连接MySQL,不会连接的可以看我上一篇文章。
本篇是上一篇文章的一个延续,所以上一篇的准备工作,本篇文章就不再赘述。
数据库准备
静态文件配置
- 在Hello_app目录下创建static文件夹用来存放JS,CSS,IMG文件
- 在setting.py文件中添加
STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static'), )
- 在JS中添加echarts.min.js文件
数据可视化
-
在创建的index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = "../static/JS/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height: 400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option = { title:{ text:'Echarts入门示例' }, tooltip:{}, legend:{ data:['销量'] }, xAxis:{ data: [ {% for Big_datum in Big_data %} "{{ Big_datum.name }}", {% endfor %} ] }, yAxis:{}, series:[{ name:'销量', type:'bar', data:[ {% for Big_datum in Big_data %} {{ Big_datum.num }}, {% endfor %} ] }] }; myChart.setOption(option); </script> </body> </html>
- 在pycharm的Terminal中输入
python manage.py runserver
- 效果图
echarts代码
列出几个可视化图,尽可能地将代码进行最简化,方便记忆。
- 饼图
var myChar = echarts.init(document.getElementById('main'));
var option = {
title:{ //标题
text: '各地域招聘人数对比',//主标题
subtext: '--招聘人数对比饼图',//副标题
x: 'center'//显示位置
},
legend: {//边上的图例
orient: 'vertical',//什么样式放置,"vertical"代表垂直的
left:'',//距离左边的距离
data: [{% for datum in data %}
'{{ datum.map }}:{{ datum.num }}',//必须和显示在上的name相同
{% endfor %}]//数据
},
series:{//系列列表
type: 'pie',//类型
center: ['70%','60%'],//圆心距离位置
data: [{% for datum in data %}
{ value:{{ datum.num }},name: '{{ datum.map }}:{{ datum.num }}'},
{% endfor %}]}
};
myChar.setOption(option);
- 折线图
var myChar = echarts.init(document.getElementById('main'));
var option = {
title:{
text:'大数据每日发布岗位对比趋势',
subtext: '每日岗位发布数量趋势',
x: 'center'
},
xAxis:{
type: 'category',
data:[{% for SQL_datum in SQL_data %}
'{{ SQL_datum.day }}',
{% endfor %}]},
yAxis:{
type: 'value',
},
series:{
type: 'line',
data:[{% for SQL_datum in SQL_data %}
{{ SQL_datum.num }},
{% endfor %}]}
};
myChar.setOption(option);
- 柱状图
var myChar = echarts.init(document.getElementById('main'));
var option = {
title:{
text: '各地域大数据招聘人数',
subtext: '招聘人数柱状图',
x:'center',
},
xAxis:{
type: 'category',
data:[{% for SQL_datum in SQL_data %}
'{{ SQL_datum.map }}',
{% endfor %}]},
yAxis:{
type: 'value',
},
series:{
type: 'bar',
data: [{% for SQL_datum in SQL_data %}
{{ SQL_datum.num }},
{% endfor %}]}
};
myChar.setOption(option);
Comments | 7 条评论
大佬,你真的好强啊
@taurus 没有没有,基操勿6
如果我要数据动态刷新怎么操作,有代码没,比如我后台操作更改数据,前台展示的柱状数据动态更新,有么有这方面的代码呢?
@斌 不好意思,这个没有,因为我只是准备比赛学的,没有细研究过
@星落 柱状图不晓得为啥显示不出来,代码如下:
var myChar = echarts.init(document.getElementById(‘main’));
var option = {
title:{
text: ‘各地域招聘人数对比’,
subtext: ‘–招聘人数对比饼图’,
x: ‘center’
},
legend: {
orient: ‘vertical’,
left:”,
data: [
{% for obj in sgateway %}
‘{{obj.sgateway}}’,
{% endfor %}]
},
series:{
type: ‘pie’,
center: [‘70%’,’60%’],
data: [
{% for stu1 in allot_total %}
{value:{{stu1}},name:'{{obj.sgateway}}’},
{% endfor %}]}
};
myChar.setOption(option);
@斌 你好,你这个代码的单引号中英文出现错误,修改后会正常显示,如果还有问题,建议检查一下views.py文件中传递给html的变量名与html中引用的是否一致
写错了是饼状图