随着B/S的普及,Web端需要与大部分浏览器兼容、直观、生动、交互、高度可定制的数据可视化地图开发库。 百度公司可能听到了很多节目单猴的声音,但它迅速开放,为echarts做出了贡献。 echarts是一个纯JavaScript图表库,可以绘制美丽的大气图形,如折线图、条形图、散点图、折线图、饼图、雷达图、地图、面板和漏斗。
虽然echarts既方便又漂亮,但在生成图表时,经常需要进行复杂的数据类型转换和复杂的配置项修改。 一家企业看不过去,将Vue2.0和echarts封装起来,形成了v-charts图表组件。
使用v-charts可以轻松生成常用图表。 这是因为数据格式设置简单,数据格式前后统一。
要获得
45.1 v-charts安装
v-charts的支持,请使用npm进行安装。npm i v-charts echarts -S也可以在cdn中部署,其中style.min.css是可选的。
script src=' https://cdn.jsdelivr.net/NPM/vue/dist/vue.js '/script
script src=' https://cdn.jsdelivr.net/NPM/e charts/dist/e charts.min.js '/script
script src=' https://cdn.jsdelivr.net/NPM/v-charts/lib/index.min.js '/script
有关link rel=' style sheet ' href=' https://cdn.jsdelivr.net/NPM/v-charts/lib/style.min.CSS '的详细用法,请参阅官方网站333
45.2 数据分析
当然,要知道在templates/admin下创建的模板名称应该被称为sale_sum.html。如果真的不知道,请仔细阅读admin.py中SaleSumAdmin类的代码。 如果知道,请复制templates/admin/change _ list.html中的代码并将其粘贴到sale_sum.html中。
进行乾坤大移动,改变形状改变阴影的代码如下。 仅仅引入三个js文件没有什么意义。 重要的是阅读理解newvue(…)中的代码。 因为那才是你想要的“财富”。
{ % extends ' admin/base _ site.html ' % }
{ % load i18n admin _ urlsstaticadmin _ list % }
{% block extrastyle %}
{{ block.super }}
link rel=' style sheet ' type=' text/CSS ' href=' { % static ' admin/CSS/change lists.CSS ' % }? _=20180905'/
{ # link rel=' style sheet ' type=' text/CSS ' href=' { % static ' admin/simple ui/la yui/CSS/la yui.CSS ' % }
{% if cl.formset %}
link rel=' style sheet ' type=' text/CSS ' href=' { % static ' admin/CSS/forms.CSS ' % } /
{% endif %}
{% if cl.formset or action_form %}
script type=' text/JavaScript ' src=' { % URL ' admin : js i18n ' % } '/script
script src=' https://cdn.jsdelivr.net/NPM/e charts/dist/e charts.min.js '/script
script src=' https://cdn.jsdelivr.net/NPM/v-charts/lib/index.min.js '/script
{% endif %}
{{ media.css }}
{ % if not actions _ on _ topandnotactions _ on _ bottom % }
斯泰尔斯
# changelisttabletheadth :第一个- child {
width :以太网
}
/样式
{% endif %}
{% endblock %
} {% block extrahead %} {{ block.super }} {{ media.js }} {% endblock %} {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %} {% if not is_popup %} {% block breadcrumbs %} <div class="breadcrumbs"> <a rel="external nofollow" href="{% url 'admin:index' %}">{% trans 'Home' %}</a> › <a rel="external nofollow" href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a> › {{ cl.opts.verbose_name_plural|capfirst }} </div> {% endblock %} {% endif %} {% block coltype %}flex{% endblock %} {% block content_title %} {% endblock %} {% block content %} <style> #content { position: relative; } .object-tools { position: absolute; top: 16px; right: 20px; height: 50px; z-index: 2; } .object-tools .import_link, .object-tools .export_link { color: white !important; } </style> {% block object-tools %} <ul class="object-tools"> {% block object-tools-items %} {% if has_add_permission %} {{ block.super }} {% endif %} {% endblock %} </ul> {% endblock %} <div id="content-main"> {% if cl.formset.errors %} <p class="errornote"> {% if cl.formset.total_error_count == 1 %}{% trans "Please correct the error below." %}{% else %} {% trans "Please correct the errors below." %}{% endif %} </p> {{ cl.formset.non_form_errors }} {% endif %} <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist"> {% block search %}{% search_form cl %}{% endblock %} {% block date_hierarchy %}{% date_hierarchy cl %}{% endblock %} <div id="app" style="margin-top: 10px;margin-left: 5px"> <ve-histogram :data="chartData" :mark-point="markPoint" :extend="chartExtend" :colors="colors"> </ve-histogram> </div> </div> </div> <script> new Vue({ el: '#app', data: function () { this.chartExtend = { title: { text: '{{ bar_title }}售业绩统计报表', subtext: '{{ subtext }}', }, } this.markPoint = { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } return { colors: ['#c23531','#2f4554'], chartData: { columns: ['日期', '销售目标(万元)', '实际销售额(万元)'], rows: [ {% if task %} { '日期': '1月', '销售目标(万元)': {{ task.Jan_task }} ,'实际销售额(万元)': {{ task.Jan_sale }}}, { '日期': '2月', '销售目标(万元)': {{ task.Feb_task }} ,'实际销售额(万元)': {{ task.Feb_sale }}}, { '日期': '3月', '销售目标(万元)': {{ task.Mar_task }} ,'实际销售额(万元)': {{ task.Mar_sale }}}, { '日期': '4月', '销售目标(万元)': {{ task.Apr_task }} ,'实际销售额(万元)': {{ task.Apr_sale }}}, { '日期': '5月', '销售目标(万元)': {{ task.May_task }} ,'实际销售额(万元)': {{ task.May_sale }}}, { '日期': '6月', '销售目标(万元)': {{ task.Jun_task }} ,'实际销售额(万元)': {{ task.Jun_sale }}}, { '日期': '7月', '销售目标(万元)': {{ task.Jul_task }} ,'实际销售额(万元)': {{ task.Jul_sale }}}, { '日期': '8月', '销售目标(万元)': {{ task.Aug_task }} ,'实际销售额(万元)': {{ task.Aug_sale }}}, { '日期': '9月', '销售目标(万元)': {{ task.Sep_task }} ,'实际销售额(万元)': {{ task.Sep_sale }}}, { '日期': '10月', '销售目标(万元)': {{ task.Oct_task }} ,'实际销售额(万元)': {{ task.Oct_sale }}}, { '日期': '11月', '销售目标(万元)': {{ task.Nov_task }} ,'实际销售额(万元)': {{ task.Nov_sale }}}, { '日期': '12月', '销售目标(万元)': {{ task.Dec_task }} ,'实际销售额(万元)': {{ task.Dec_sale }}}, {% endif %} ] }, dataEmpty: true } } }) </script> <script type="text/javascript"> $(".object-tools").hide().find('li a').each(function () { _action.exts.push({ name:$(this).text(), url:$(this).attr('href') }) }) </script> {% endblock %}万万没想到,在ModelAdmin里,竟然可以自定义过滤器,可以覆盖模板,还可以调整查询方法。更让人惊喜的,连模板里的代码都是通过拷贝完成的。
不试不知道,一试吓一跳,本以为不可能实现的功能,原来都是可以做得到的。所以说编程还是要多尝试,多动手。
好了,关于销售管理系统用Django实现的内容,总算开发完成了,下一步就说一下关于系统上线的内容。