隨著B/S大行其道，Web端急需一個兼容絕大部分瀏覽器，直觀，生動，可交互，可高度個性化定製的數據可視化圖開發庫。百度公司可能聽到了眾多程序猿的心聲，速速開放、貢獻出了echarts。echarts是純JavaScript的圖表庫，可繪製折線圖、柱狀圖、散點圖、K線圖、餅圖、雷達圖、地圖、儀表盤、漏斗圖等美麗、大氣的圖表。

儘管echarts好用，漂亮，但在生成圖表時，經常需要做繁瑣的數據類型轉化、修改複雜的配置項。有家企業實在看不下去了，就對 Vue2.0 和 echarts 進行了封裝，形成了 v-charts 圖表組件。

使用v-charts只需要統一提供一種對前後端都友好的數據格式設置簡單的配置項，便可輕鬆生成常見的圖表。

45.1 v-charts安裝

要想獲得v-charts的支持，可通過npm進行安裝。

<code>npm i v-charts echarts -S/<code>

也可以通過cdn進行引入，其中style.min.css是可選項。

<code>


<link>/<code>

詳細用法，可參考官網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(…)裡面的代碼，因為那才是你想要的"財富"。

<code>{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
    {{ block.super }}
    <link>
    {#    <link>#}
    {% if cl.formset %}
        <link>

    {% 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 %}
        

            
            › 
            › {{ 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 %}
        

           <ve-histogram>
           /<ve-histogram>
        


        

    

    
    {% endblock %}/<code>

萬萬沒想到，在ModelAdmin裡，竟然可以自定義過濾器，可以覆蓋模板，還可以調整查詢方法。更讓人驚喜的，連模板裡的代碼都是通過拷貝完成的。

不試不知道，一試嚇一跳，本以為不可能實現的功能，原來都是可以做得到的。所以說編程還是要多嘗試，多動手。

好了，關於銷售管理系統用Django實現的內容，總算開發完成了，下一步就說一下關於系統上線的內容。

閱讀更多 半碼 的文章

關鍵字: 圖表 瀏覽器 JavaScript