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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/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(…)里面的代码，因为那才是你想要的"财富"。