美文网首页
4.柱形图

4.柱形图

作者: 半生_温暖纯良_Junzer | 来源:发表于2020-07-09 15:15 被阅读0次

    1.label位置

     data: [
                                     {
                                        name:"民间投资",
                                        value:-4,
                                        label:{position:"right"}
                                    },{
                                        name:"工业投资",
                                        value:2,
                                        label:{position:"left"}
                                    },{
    
    运行结果

    2.柱形宽度

    series: [
                            {
                                type: 'bar',
                                data: [],
                                barWidth: 15,
    

    3.柱状图每列颜色不同

    https://blog.csdn.net/LzzMandy/article/details/78982960?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2

    4.自定义柱形图样式

    https://jingyan.baidu.com/article/fea4511a151747f7bb91251f.html

    5.柱形图各参数

    https://blog.csdn.net/Gaowahaha/article/details/78512731

    6.消除多列柱形图间隙

    https://blog.csdn.net/weixin_42340514/article/details/91988115?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2

    7.柱形图背景

    https://blog.csdn.net/qq_41694696/article/details/80077896
    等宽背景图
    https://echarts.apache.org/examples/zh/editor.html?c=bar-background
    https://echarts.apache.org/examples/zh/editor.html?c=doc-example/barGrid-barGap
    https://gallery.echartsjs.com/editor.html?c=xkZFtowaDl

    color: 'rgba(255, 255, 255, 0.14)' //rgba设置透明度0.14
    
    运行结果
    {
              name: '背景',
              type: 'bar',
              // xAxisIndex: 1,
              data: [100, 100, 100, 100, 100,],
              itemStyle: {
                normal: {
                  color: 'rgba(102, 102, 102,0.5)'
                }
              },
              barWidth: 40,
              zlevel: -1
            },
    

    8.柱形图颜色

    https://blog.csdn.net/weixin_43798882/article/details/89848153

    series: [
          {
            type: 'bar',
            // barWidth: 30,
            data,
            barWidth: 20,
            itemStyle: {
              normal: {
                //好,这里就是重头戏了,定义一个list,然后根据所以取得不同的值,这样就实现了,
                color: function (params) {
                  // let data = params.data
                  return params.data.color
                },
    

    9.柱形图单独样式

    https://gallery.echartsjs.com/editor.html?c=xgsltvi9c

    10.文字百分比

    https://blog.csdn.net/GrootBaby/article/details/89211013

    相关文章

      网友评论

          本文标题:4.柱形图

          本文链接:https://www.haomeiwen.com/subject/xacscktx.html