Django+echarts实现【柱形图+百分比】两种方法附主代码）

最新推荐文章于 2023-10-18 16:42:42 发布

weixin_74

最新推荐文章于 2023-10-18 16:42:42 发布

阅读量1.9k

点赞数

分类专栏： Visual 文章标签： echarts django python

本文链接：https://blog.csdn.net/weixin_44727274/article/details/116488679

版权

Visual 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

先上结果图（有两种显示类型）

数据库数据：
在这里插入图片描述

图一：

在这里插入图片描述

index.html

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:620px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
		
		//*************这里就是控制显示的样式************
        tooltip: {
            trigger: 'axis', //这里用的是坐标轴触发,多个数据
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            
            formatter: function (params) {
                var relVal = params[0].name;
                var value = 0;
                for (var i = 0, l = params.length; i < l; i++) {
                    value += parseFloat(params[i].value);
                }
                console.log(value)
                for (var i = 0, l = params.length; i < l; i++) {
                    //marker 就是带颜色的小圆圈 seriesName x轴名称  value  y轴值 后面就是计算百分比
                    relVal += '<br/>' + params[i].marker + params[i].seriesName + '  : 数量 : ' + parseFloat(params[i].value) +
                        ', 百分比 : '
                        + (100 * parseFloat(params[i].value) / parseFloat(value)).toFixed(2) + "%";
                }
                return relVal;
            },

        },


        legend: {
            data: ['支持', '反对', '不发表意见']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: {{ political_issue|safe }},
                axisLabel: {
                    interval: 0,
                    rotate: 40
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '支持',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
           
                data: {{ support|safe }}
            },
            {
                name: '反对',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                data: {{ oppose|safe }}
            },
            {
                name: '不发表意见',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                data: {{no_opinion|safe}}
            },
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

views.py(仅使用‘列表’)

def echarts4(request):
    # 查询出表对象信息，也就是数据表中的所有数据
    # 一行数据就是一个对象，一个格子的数据就是一个对象的一个属性值
    all_things = models.PresidentialApprovalRate.objects.all()
    political_issue = []  # 设置为list类型，一会儿将其填入data中
    support = []  # 设置为list类型，一会儿将其填入data中
    oppose = []  # 设置为list类型，一会儿将其填入data中
    no_opinion = []  # 设置为list类型，一会儿将其填入data中
    for user in all_things:  # 遍历
        support.append(user.support)
        oppose.append(user.oppose)
        no_opinion.append(user.no_opinion)
        political_issue.append(user.political_issue)

    return render(request, 'index4.html', {'political_issue': political_issue, 'support': support,
                                           'oppose': oppose,'no_opinion':no_opinion})

图二：

在这里插入图片描述

index.html

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:620px;"></div>

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

    // 指定图表的配置项和数据
    var option = {
//*************这里就是控制显示的样式************
        tooltip: {
            trigger: 'axis', //这里用的是坐标轴触发,多个数据
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {//这里就是控制显示的样式
                var relVal = params[0].name;
                var value = 0;
                for (var i = 0, l = params.length; i < l; i++) {
                    value += parseFloat(params[i].value);
                }
                console.log(value)
                for (var i = 0, l = params.length; i < l; i++) {
                    if (params[i].seriesType === "bar") {
                        let value1
                        if (params[i].value) {
                            value1 = (100 * parseFloat(params[i].value) / value).toFixed(2)
                        } else {
                            value1 = 0
                        }
                        relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + value1 + "%";
                    }
                }
                return relVal;
            },
        },




        legend: {
            data: ['支持', '反对', '不发表意见']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: {{ political_issue|safe }},
                axisLabel: {
                    interval: 0,
                    rotate: 40
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '支持',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                label: {
                    show: true,
                    position: 'insideTop',

                },

                data: {{ support|safe }}
            },
            {
                name: '反对',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                label: {
                    show: true,
                    position: 'insideTop',

                },
                data: {{ oppose|safe }}
            },
            {
                name: '不发表意见',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                label: {
                    show: true,
                    position: 'insideTop',
                },
                data: {{no_opinion|safe}}
            },
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>

该views.py中的方法与上述相同，均只使用列表

echart中param参数包含的内容

name：X轴的值
data：Y轴的值
value：Y轴的值
type：点击事件均为click
seriesName：legend的名称
seriesIndex：系列序号（series中当前图形是第几个图形第几个，从0开始计数）
dataIndex：数值序列（X轴上当前点是第几个点，从0开始计数）

weixin_74

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
Django+echarts实现【柱形图+百分比】两种方法附主代码）

先上结果图（有两中显示类型）图一：index.html<div id="main" style="width: 1000px;height:620px;"></div><script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElem
复制链接

扫一扫