zoukankan      html  css  js  c++  java
  • Echarts-柱状图柱图宽度设置

    先看两张图

    图中柱图只需要设置series中的坐标系属性barWidth就可以,

    这种图柱状图,折叠柱状图都适应

    eg:

    /**
     * 堆积柱状图
     * @param xaxisdata x轴:标签(数组)
     * @param serieszs 柱状图图数据(数组)
     * @param seriesyx 柱状图图数据(数组)
     */
    function drawDJZZT(xaxisdata,serieszs,seriesyx){
        var myChart = echarts.init(document.getElementById('main1'));
        myChart.setOption({
            title : {
                text : ""
            },
            tooltip : {
                trigger : 'axis',
                showDelay : 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            legend: {
                data:['做市', '协议']
            },
            xAxis : [{
                    type : 'category',
                    data : xaxisdata,
                    axisLabel:{
                         textStyle:{
                             color:"#222"
                         }
                     }
            }],
            yAxis : [{
                type : 'value'
            }],
            series : [
                 {
                     name:'做市',
                     type:'bar',
                     stack: '总量',
                     /*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/
                     data:serieszs
                 },
                 {
                     name:'协议',
                     type:'bar',
                     stack: '总量',
                     barWidth : 30,//柱图宽度
                     /*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/
                     data:seriesyx
                 }
             ]
        });
    }

    调用方式

                //console.log(data);
                var xaxisdata = [];//月份
                var serieszs = [];
                var seriesyx = [];
                var year = new Date().format("yyyy");
                for(var i=(data.list.length-1);i>=0;i--){
                    var monthDate = data.list[i].month_date;
                    //if( year == monthDate.substring(0,4)){
                        //xaxisdata.push(monthDate.substring(4)+"月");
                    //}else{
                        xaxisdata.push(monthDate.substring(0,4)+"年"+monthDate.substring(4)+"月");
                    //}
                    serieszs.push(data.list[i].zszrmygpsl);
                    seriesyx.push(data.list[i].xyzrmygpsl);
                }
                drawDJZZT( xaxisdata, serieszs, seriesyx);
  • 相关阅读:
    索引,约束
    C# Dictionary 的几种遍历方法
    唯一性约束和唯一性索引的区别
    JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
    Dictionary学习笔记嵌套Dictionary的遍历与排序(按Key值)(二)
    Dictionary学习笔记Dictionary定义与输出(一)
    集体智慧编程笔记搜索和排序
    emacs键盘映射
    集体智慧编程笔记推荐系统
    使用SRILM训练大的语言模型
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/4762410.html
Copyright © 2011-2022 走看看