echarts 雷达图_第45章 Django集成图表技术echarts，美......

随着B/S大行其道，Web端急需一个兼容绝大部分浏览器，直观，生动，可交互，可高度个性化定制的数据可视化图开发库。百度公司可能听到了众多程序猿的心声，速速开放、贡献出了echarts。echarts是纯JavaScript的图表库，可绘制折线图、柱状图、散点图、K线图、饼图、雷达图、地图、仪表盘、漏斗图等美丽、大气的图表。

尽管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是可选项。

详细用法，可参考官网https://v-charts.js.org/#/上的教程。为了方便，咱就使用cdn引入的方式。

45.2 数据分析

不用说你也应该知道，在templates/admin下创建的模板名称应该叫sale_sum.html，

如果真的不知道，往上仔细阅读admin.py中，SaleSumAdmin类的代码。如果知道，那就把templates/admin/change_list.html里的代码拷贝出来，粘贴到sale_sum.html中。

进行乾坤大挪移，移形换影后的代码如下。只知道引进了3个js文件并没多大意义，关键是要阅读并理解new Vue(…)里面的代码，因为那才是你想要的"财富"。

{% extends "admin/base_site.html" %}{% load i18n admin_urls static admin_list %}{% block extrastyle %}    {{ block.super }}        {#    #}    {% if cl.formset %}            {% endif %}    {% if cl.formset or action_form %}                            {% endif %}    {{ media.css }}    {% if not actions_on_top and not actions_on_bottom %}            {% 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 %}        
           

{% trans 'Home' %} › {{ cl.opts.app_config.verbose_name }} › {{ cl.opts.verbose_name_plural|capfirst }}

{% endblock %}{% endif %}{% block coltype %}flex{% endblock %}{% block content_title %}{% endblock %}{% block content %} {% block object-tools %}

{% block object-tools-items %} {% if has_add_permission %} {{ block.super }} {% endif %} {% endblock %} {% endblock %}

{% if cl.formset.errors %}

{% if cl.formset.total_error_count == 1 %}{% trans "Please correct the error below." %}{% else %} {% trans "Please correct the errors below." %}{% endif %}

{{ cl.formset.non_form_errors }} {% endif %}

{% block search %}{% search_form cl %}{% endblock %} {% block date_hierarchy %}{% date_hierarchy cl %}{% endblock %}

{% endblock %}

万万没想到，在ModelAdmin里，竟然可以自定义过滤器，可以覆盖模板，还可以调整查询方法。更让人惊喜的，连模板里的代码都是通过拷贝完成的。

不试不知道，一试吓一跳，本以为不可能实现的功能，原来都是可以做得到的。所以说编程还是要多尝试，多动手。

好了，关于销售管理系统用Django实现的内容，总算开发完成了，下一步就说一下关于系统上线的内容。