2 个回答

试试markLine这个配置项

app.title = '坐标轴刻度与标签对齐';

option = {

xAxis: {
      data: ['流入','流出'],
      axisTick: {
        show: false
      },
      axisLabel: {
        // formatter: '流入'
        margin: 8,
        color: "#5F6370",
        fontSize: 14,
        fontFamily: "MicrosoftYaHei"
      },
      axisLine: {
        lineStyle: {
          color: "#BABABA"
        }
      }
    },
    yAxis: {
      show: false,
      splitLine: { show: false },
      axisLine: {
        show: false
      }
    },
    grid: {
      y: 0,
      backgroundColor: "#fff"
    },
    // animation:false,
    animationDurationUpdate: 300,
    series: [
      {
        name: ['计划'],
        type: "bar",
        silent: true,
        barWidth: 40,
        barGap: "-88%",
        data: ['174.11','160.5'],
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            barBorderColor: "#6B98D3",
            barBorderWidth: 1,
            color: "transparent",
            barBorderRadius: [3, 3, 0, 0]
          }
        },markLine: {
            symbol: ['none', 'none'],
            symbolRotate:300,
            
            lineStyle:{
                 normal : {
                        color : 'rgba(44,38,21,0.3)',
                        width : '1',
                        type : 'solid', //线的类型 'solid'(实线)'dashed'(虚线)'dotted'(点线)
                        curveness : 0.3, //线条的曲线程度,从0到1
                        opacity : 1
                    // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。默认0.5
                    },
            },
            data:[[
                {
                    coord:['流入','80'],
                    
                },
                {
                    coord:['1','80'],
                    x:'40%',
                    
                    value:'实际:144.11',
                    label:{
                        show:true,
                        formatter:'11'
                    }
                }
            ],
            [
                {
                    coord:['流出','160'],
                    x:'32.2%'
                },
                {
                    coord:['1','160'],
                    x:'40%',
                    value:'计划:164.11',
                }
            ],
            
            [
                {
                    coord:['流出','111.11'],
                    x:'72.2%'
                },
                {
                    coord:['1','80'],
                    x:'80%',
                    
                    value:'实际:111.11',
                    label:{
                        show:true,
                        formatter:'11'
                    }
                }
            ],
            [
                {
                    coord:['流入','160'],
                    x:'32.2%'
                },
                {
                    coord:['1','160'],
                    x:'50%',
                    value:'计划:164.11',
                }
            ]]
        }
      },
      {
        name: '实际',
        yAxisIndex: 0,
        type: "bar",
        barWidth: 30,
        z: 10,
        data: ['144.11','110.5'],
        itemStyle: {
          normal: {
            color: "#6B98D3",
            barBorderRadius: [3, 3, 0, 0]
          },
          emphasis: {
            color: "#6B98D3"
          }
        }
      },
    ]

};

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题