双y轴----(左侧Y轴)堆叠图+（右侧Y轴）折线图

最新推荐文章于 2023-01-03 14:04:09 发布

甜菜，是我鸭！

最新推荐文章于 2023-01-03 14:04:09 发布

阅读量392

点赞数

分类专栏： echart 文章标签： echarts 前端 javascript

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

版权

echart 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    textStyle: {
      color: '#ffffff'
    },
    data: ['已使用', '未使用', '使用率']
  },
  grid: {
    left: '5%',
    right: '5%',
    bottom: '5%',
    top: '20%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      axisTick: false,
      axisLine: {
        show: false,
        lineStyle: {
          color: '#00548D',
          width: 0.5
        }
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff'
        }
      },
      data: ['name1', 'name2', 'name3', 'name3', 'name4', 'name45']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '（个）',
      position: 'left',
      alignTicks: true,
      splitLine: { show: false },
      nameTextStyle: { color: '#ffffff' },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#00548D',
          width: 0.5
        }
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff'
        }
      }
    },
    {
      type: 'value',
      name: '(%)',
      position: 'right',
      alignTicks: true,
      splitLine: { show: false },
      nameTextStyle: { color: '#ffffff' },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#00548D',
          width: 0.5
        }
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff'
        }
      }
    }
  ],
  series: [
    {
      name: '已使用',
      type: 'bar',
      stack: 'total',
      yAxisIndex: 0,
      barWidth: 20,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: '#02C9B4'
            },
            {
              offset: 1,
              color: '#02C9B488'
            }
          ])
        }
      },
      data: [1, 3, 1, 2, 6, 2]
    },
    {
      name: '未使用',
      type: 'bar',
      stack: 'total',
      yAxisIndex: 0,
      barWidth: 20,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: '#C89936'
            },
            {
              offset: 1,
              color: '#C8993688'
            }
          ])
        }
      },
      data: [2, 3, 1, 3, 2, 3]
    },
    {
      name: '使用率',
      type: 'line',
      yAxisIndex: 1,
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#188BD9'
      },
      data: [20, 10, 14, 38, 56, 80]
    }
  ]
};