echart柱状图的使用

最新推荐文章于 2024-06-25 15:34:07 发布

Weather_

最新推荐文章于 2024-06-25 15:34:07 发布

阅读量627

点赞数

分类专栏： echart 文章标签： echart

本文链接：https://blog.youkuaiyun.com/Weather_/article/details/103366978

版权

本文详细介绍了如何使用ECharts库创建横向和纵向柱状图，包括设置数据、配置项以及实现动态交互效果，是ECharts图表应用的实用教程。

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

1、echart柱状图的使用（横向）

function initColumnEchart(idName , dayArray , fromClr , toClr, tipClr,type){
    var myChart = null;
    var xArry = [];
    var yArry = [];
    if(type=="A"){
        $.each(dayArray,function (i,iele) {
            yArry.unshift(iele.name);
            xArry.unshift(iele.avg);
        });
    }else {
        $.each(dayArray,function (i,iele) {
            yArry.unshift(iele.name);
            xArry.unshift(iele.sum);
        });
    }


    myChart = echarts.init(document.getElementById(idName));
    var columnOption = {
        grid: {
            left: '15px',
            right: '15px',
            bottom: '10px',
            top: '10px',
            x:20,
            x2:20,
            containLabel: true
        },
        tooltip: {
            padding: 10,
            backgroundColor: tipClr,
            borderColor: '#79ABCC',
            borderWidth: 1,
            textStyle: {
                color: "#D4F7FF",
                fontSize:12,
                textAlign:'center'
            },
            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
            formatter: function (obj) {
                var value = obj.value;
                var index = obj.dataIndex;
                if(type=="A"){
                    var clickDate = yArry[index];
                    var count = xArry[index];
                    return clickDate+"<br>分数："+count+"分";
                }else {
                    var clickDate = yArry[index];
                    var count = xArry[index];
                    return clickDate+"<br>数量："+count+"次&

最低0.47元/天解锁文章