双坐标轴（左横向，右竖立）

最新推荐文章于 2024-01-28 20:05:38 发布

甜菜，是我鸭！

最新推荐文章于 2024-01-28 20:05:38 发布

阅读量323

点赞数

本文链接：https://blog.csdn.net/baicai_123/article/details/127008053

版权

ECharts 数据可视化双轴图表收入支出 Bar Chart

关键词由CSDN通过智能技术生成

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  axisPointer: {
    link: { xAxisIndex: 'all' }
  },
  grid: [
    {
      top: 20,
      bottoom: 60,
      left: 10,
      height: '65%',
      width: '40%'
    },
    {
      top: 20,
      bottoom: 60,
      height: '65%',
      right: '40%',
      width: '10%'
    }
  ],
  xAxis: [
    {
      type: 'value',
      boundaryGap: false,
      inverse: true,
      position: 'right',
      axisLine: { onZero: true },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff',
          width: 1 //这里是为了突出显示加上的
        }
      }
    },
    {
      type: 'category',
      gridIndex: 1,
      boundaryGap: false,
      axisLine: { onZero: true, show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      data: ['A区']
    }
  ],
  yAxis: [
    {
      type: 'category',
      position: 'right',
      axisTick: { show: false },
      axisLabel: {
        fontSize: 10
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff',
          width: 1 //这里是为了突出显示加上的
        }
      },
      data: ['A区', 'B区', 'C区', 'D区']
    },
    {
      type: 'value',
      gridIndex: 1,
      inverse: true,
      axisLine: { onZero: true, show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: {
        show: false,
        fontSize: 10
      }
    }
  ],
  series: [
    {
      name: '收入',
      type: 'bar',
      label: { show: true },
      hoverAnimation: false,
      itemStyle: {
        normal: {
          show: true,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: '#fff'
              },
              {
                offset: 1,
                color: '#05FF10'
              }
            ],
            false
          )
        }
      },
      barWidth: '50%', //柱状图的间距
      // barCategoryGap:'0',
      data: [12, 4, 35, 17]
    },
    {
      name: '支出',
      type: 'bar',
      label: {
        show: true
        //position: 'left'
      },
      xAxisIndex: 1,
      yAxisIndex: 1,
      hoverAnimation: false,
      itemStyle: {
        normal: {
          show: true,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#fff'
              },
              {
                offset: 1,
                color: '#FF8C03'
              }
            ],
            false
          )
        }
      },
      data: [6]
    }
  ]
};