数据可视化_echars

echars教程
引入js文件

<script src="{% static 'js/echarts.min.js' %}"></script>

js代码
官方文档

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

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '上架设备',
                subtext: '在线展示',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x: 'center',
                y: 'bottom',
                data: ['服务器', '路由器', '交换机', '防火墙', ]
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            series: [{

                name: '上架设备',
                type: 'pie',
                radius: [30, 110],
                center: ['75%', '50%'],
                roseType: 'area',
                data: arr  # 后端直接提供数据放入

            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
获取数据调用
    $(function () {
        $.getJSON(
            '/dash/',
            function (res) {
                assetPie(res)
            }
        )
    })
</script>

url

path('dash/', DashView.as_view()),  

views.py

class DashView(View):
    def get(self, request):
  # 聚合查询
        type_qs = (
            Asset.objects.filter(device_status_id=1)
            .values_list("device_type_id")
            .annotate(value=Count("device_type_id"))
        )
        type_value = list(dict(list(type_qs)).values())  # (3,1)
        type_key = list(dict(list(type_qs)).keys())
        # print(type_key)
        qst = []
        for m in type_key:
            qst .append(dict(Asset.device_type_choices).get(m))
            
        li = []
        a = zip(qst, type_value)
        for k, v in a:
            dic = {}
            dic["name"] = k
            dic["value"] = v
            li.append(dic)

        return JsonResponse(li, safe=False)