本站消息

站长简介/公众号


站长简介:逗比程序员,理工宅男,前每日优鲜python全栈开发工程师,利用周末时间开发出本站,欢迎关注我的微信公众号:幽默盒子,一个专注于搞笑,分享快乐的公众号

  价值13000svip视频教程,python大神匠心打造,零基础python开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长

+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2020-07(11)

2020-08(42)

Django+echarts实现【百分比堆叠柱形图】/柱形图显示百分比(两种方法附主代码)

发布于2021-05-09 08:36     阅读(518)     评论(0)     点赞(19)     收藏(2)



先上结果图(有两种显示类型)

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

图一:

在这里插入图片描述

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开始计数)

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






所属网站分类: 技术文章 > 博客

作者:python好学吗

链接:https://www.pythonheidong.com/blog/article/964907/041a7b5361759b08879e/

来源:python黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

19 0
收藏该文
已收藏

评论内容:(最多支持255个字符)