Django2.* 模板语言结合使用百度ECharts,支持bootstrap4

最新推荐文章于 2024-01-02 14:15:00 发布

C_SF_C

最新推荐文章于 2024-01-02 14:15:00 发布

阅读量362

点赞数

CC 4.0 BY-SA版权

分类专栏： Django 文章标签： Django2.0 ECharts 模板语言 bootstrap4

本文链接：https://blog.csdn.net/weixin_42295194/article/details/100688374

Django 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在Django框架中结合使用百度ECharts图表库，通过具体实例展示了如何展示不同出版社每月新书数量的数据。文章深入探讨了Model、View及Template的实现细节，包括如何生成月份列表和获取每月出版书籍数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Django2.* 模板语言结合使用百度ECharts,支持bootstrap4

学习Django过程中遇到一个使用ECharts，记录下遇到的坑

ECharts官方示例

使用如图样板官方示例，展示4个出版社，每个月新书量，
在这里插入图片描述

Model

以书出版社简单关系为例

view

根据ECharts需要两个数据source：[]、encode:｛｝，首先根据当前时间，生成月份列表，这里使用了count()取每个月出版书的数量,最后返回数据

from django.shortcuts import render
from models import Books, Publisher
import datetime

def list(request):
    if request.method == "GET":
        today = datetime.datetime.now()
        one_year_data = Publisher.objects.filter(pub_time = today.year) # 取出一年的数据
        source_list = []
        yue_list = ['month'] #定义月份数据
        for m in range(1,today.month+1):
            m = str(m)+'月'
            yue_list.append(m)# 取 12个月
        source_list.append(yue_list)
        for item in Publisher.objects.all():
            temp_list = [item.title]
            for m in range(1,today.month+1):
                count = one_year_data.filter(pub_time__month = m,title = item.id).count()
                temp_list.append(count)# 取出一个月有多少本书
            source_list.append(temp_list)
        now_month = str(today.month)+'月'
        return render(request,"list.html",
                      {
                          "source_list":source_list,
                          "now_month":now_month
                      }
                      )

list.html

div:

<div id ="main" style="width:100%;height:400px;"></div>

js:

var myChart = echarts.init(document.getElementById('main'));
var source_list = {{source_list |safe}};
setTimeout(function () {

    option = {
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: source_list
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                label: {
                    formatter: '{b}: {@ {{now_month |safe}}} ({d}%)'
                },
                encode: {
                    itemName: 'product',
                    value: {{now_month |safe}},
                    tooltip: {{now_month |safe}}
                }
            }
        ]
    };

    myChart.on('updateAxisPointer', function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });

    myChart.setOption(option);

});

兼容bootstrap4

首先需要将div height设置100%，在 myChart.setOption(option);后添加如下代码

window.addEventListener("resize",function(){
   	myChart.resize();
｝)