关于chartjs 屏幕大小自适应

最新推荐文章于 2023-01-12 13:33:02 发布

shmilyhq

最新推荐文章于 2023-01-12 13:33:02 发布

阅读量747

点赞数

分类专栏： HTML5 文章标签： javascript html5 ajax

本文链接：https://blog.csdn.net/shmilyhq/article/details/124317541

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html 代码

<div class="">
   <div id="popChart" style="width: 100%;height:300px;"></div>
</div>

引用 echarts.js

<!--echarts-->
	<script src="/js/chart/echarts.min.js" type="text/javascript"></script>

js代码

let system = "";
    if ($('#source').val().length != 0){
        system += '-'+ $('#source option:selected').text();
    }
    let text = '【'+$('#year').val()+system+'】数量柱状图';
    let myChart = echarts.init(document.getElementById('popChart'));
    myChart.clear();
    $.ajax({
        method: 'get',
        url: "xxx/list",
        data: date,
        success: function (r) {
            if (r.code == 0) {
                let dataTrans = JSON.parse(r.msg);
                let option = {
                    title:{
                        text: text, //标题
                        x: 'center', //水平居中
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} : {c}" //鼠标悬浮显示x/y轴的值
                    },
                    //x轴
                    xAxis: {
                        name: '月份',
                        type: 'category',
                        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
                    },
                    //y轴
                    yAxis: {
                        name: '数量',
                    },
                    series: [{
                        data: [
                            dataTrans['januaryNum'],
                            dataTrans['februaryNum'],
                            dataTrans['marchNum'],
                            dataTrans['aprilNum'],
                            dataTrans['mayNum'],
                            dataTrans['juneNum'],
                            dataTrans['julyNum'],
                            dataTrans['augustNum'],
                            dataTrans['septemberNum'],
                            dataTrans['octoberNum'],
                            dataTrans['novemberNum'],
                            dataTrans['decemberNum']
                        ],
                        type: 'bar', //图标类型 柱状图
                        itemStyle: {
                            background:'#3A7BD5', // 图形颜色
                            normal: {
                                color: '#3A7BD5', //字体颜色
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: '#3A7BD5', //数值颜色
                                        fontSize: 12, //字体大小
                                    },
                                },
                            },
                        },
                    }]
                };
                myChart.setOption(option, true); //加载数据
                //屏幕自适应关键代码
                window.addEventListener("resize", function () { myChart.resize(); });
            } else {
                layer.msg(r.msg);
            }
        }
    });