在Django项目中用Echarts做数据可视化分析

安装Echarts

进入Echarts官网：https://www.echartsjs.com/zh/index.html
在上方菜单栏选择下载，进入到下面这个页面，从GItHub上下载：

点击进入到GitHub主页：

那如何在echarts项目下单独下载这个文件呢？
点击进入Echarts.js，找到download按钮，右键点击选择另存为，就会自动下载好

使用

将下载的echarts.js加入到存放静态文件的static的js下：

在需要使用到echarts.js的HTML页面进行导入：

最后在view中通过模板传递echarts数据表所需的数据及格式
例如：
在view中传递模板变量：

    return render(request, 'index1.html', {'all_source': result_source,
                                           'source': source,})

使用模板变量：

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('echarts1'));

        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: '客户来源',
                link: '{% url 'department' %}',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: {{ source|safe }}
            },
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: ['60%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {% for key,value in all_source.items %}
                            {value: {{ value|safe }}, name: '{{key|safe}}'},
                        {% endfor %}
                    ]
                }
            ]
        };

        myChart1.setOption(option1);
    </script>

前端效果：