zoukankan      html  css  js  c++  java
  • echarts 的柱状图 填充色为透明

    itemStyle控制柱形的样式。如下:

    itemStyle: {
    normal: {
    color: '#fff', //填充色
    barBorderColor: '#4876FF', //边框色
    barBorderWidth: 3, //边框宽度
    barBorderRadius:2, //圆角半径
    label : { //标签显示位置
    show: true,
    position: 'top' //insideTop 或者横向的 insideLeft

    }
    }
    }

    例子:

    option = {
    title : {
    text: '世界人口总量',
    subtext: '数据来自网络'
    },
    tooltip : {
    trigger: 'axis'
    },
    legend: {
    data:['2011年', '2012年']
    },
    toolbox: {
    show : true,
    feature : {
    mark : {show: true},
    dataView : {show: true, readOnly: false},
    magicType: {show: true, type: ['line', 'bar']},
    restore : {show: true},
    saveAsImage : {show: true}
    }
    },
    calculable : true,
    xAxis : [
    {
    type : 'value',
    boundaryGap : [0, 0.01]
    }
    ],
    yAxis : [
    {
    type : 'category',
    data : ['巴西','印尼','美国','印度','中国','世界人口(万)']
    }
    ],
    series : [
    {
    name:'2011年',
    type:'bar',
    itemStyle: {
    normal: {
    color: '#fff',
    barBorderColor: '#4876FF',
    barBorderWidth: 3,
    barBorderRadius:2,
    label : {
    show: true,
    position: 'insideLeft'

    }
    }
    },
    data:[18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
    name:'2012年',
    type:'bar',
    itemStyle: {
    normal: {
    color: '#fff',
    barBorderColor: '#4876FF',
    barBorderWidth: 3,
    barBorderRadius:2,
    label : {
    show: true,
    position: 'top'

    }
    }
    },
    data:[19325, 23438, 31000, 121594, 134141, 681807]
    }
    ]
    };

  • 相关阅读:
    OZ Report 오즈 리포트 개발
    日期 英文 英语 韩文 韩语
    行合并
    R内存扩展 win7内存扩展
    计算日期函数
    C#颜色 Color.FromArgb ColorTranslator 16进制
    Phone
    浏览器 UserAgent
    context.Request.Files post 上传问题件
    The connection to adb is down, and a severe error has occured.
  • 原文地址:https://www.cnblogs.com/IT-shen/p/4244086.html
Copyright © 2011-2022 走看看