echarts柱图显示

最新推荐文章于 2022-08-05 18:44:13 发布

fish0402

最新推荐文章于 2022-08-05 18:44:13 发布

阅读量149

点赞数

分类专栏： layui 文章标签： js html

本文链接：https://blog.csdn.net/fish0402/article/details/105745775

版权

layui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<div class="layui-card-body ">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="total" style="width: 100%;height:300px;"></div>                            
</div>

通过ajax获取后台数据xaxisdata,totalyaxisdata.

初始化echarts实例:

var totalChart = echarts.init(document.getElementById('total'));

设置显示个数：

var exStart = 101-Math.floor((15/xaxisdata.length)*100);

具体配置：

var totaloption = {
    color: ['#18629E','#18629E', '#3E88C5'],
    title:{text:'总数'},
    tooltip:{
        trigger:'axis',
        axisPointer:{
            type:'line'
        }
    },
    grid:{
        top:80,
        bottom:30
    },
    xAxis:{
        data: xaxisdata,
        splitNumber:20,
        lineHeight:30
    },
    yAxis:{},
    series:[
        {
            name:'人数',
            type:'bar',
            label:{
                normal:{
                    show:true,
                    position:'top'
                }
            },
            data:totalyaxisdata,
            barWidth:20
        }
    ],
    dataZoom:[
        {
            type:'slider',
            start:exStart,
            end:100,
            show:true,
            handleSize:5
        }
    ]
};

totalChart.setOption(totalOption);