echarts折线图 分段柱形图

发布时间 2023-09-28 09:58:40作者: 张哲Zeo
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {
    textStyle: {
      color: '#D0E6FF',
      fontSize: 30,
      padding: [0, 0, 0, 15]
    },
    top: 35,
    itemWidth: 30,
    itemHeight: 30,
    itemGap: 40
  },
  color: ['#3B98FE', '#00C891', '#FFA448', '#FF6977'],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: 120,
    containLabel: true
  },
  backgroundColor: '#15187F',
  xAxis: {
    type: 'value',
    offset: 0,
    position: 'top',
    boundaryGap: ['10%', '10%'],

    axisLine: {
      show: true,
      lineStyle: {
        color: '#0068B7'
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#0068B7'
      }
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      color: '#8CCDFF',
      fontSize: 28
    }
  },
  yAxis: {
    boundaryGap: true,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#fff',
      fontSize: 28,
      margin: 20
    },
    type: 'category',
    data: [
      '康复医院',
      '眼科医院',
      '妇产科医院',
      '呼吸内科',
      'F肿瘤医院',
      '消化内科',
      '儿童医院'
    ].reverse(0)
  },
  series: [
    {
      name: '一级',
      type: 'bar',
      stack: 'total',
      barWidth: 36,
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 24,
        // lineHeight: 36,
        offset: [0, 2]
        // verticalAlign: 'middle'
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: '二级',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 24,
        // verticalAlign: 'middle'
        formatter: function (params) {
          // console.log(params)
          if (params.data == 0) {
            return '';
          }
          return params.data;
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 0, 101, 134, 90, 230, 0]
    },
    {
      name: '三级',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 24,
        // verticalAlign: 'middle'
        formatter: function (params) {
          if (params.data == 0) {
            return '';
          }
          return params.data.value || params.data;
        }
      },

      emphasis: {
        focus: 'series'
      },
      data: [
        220,
        80,
        191,
        234,
        { value: 290, itemStyle: { borderRadius: [0, 18, 18, 0] } },
        330,
        310
      ]
    },
    {
      name: '四级',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 24,
        // verticalAlign: 'middle'
        formatter: function (params) {
          console.log(params);
          if (params.data == 0) {
            return '';
          }
          return params.data.value || params.data;
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, { value: 154 }, 0, 100, 410],
      itemStyle: {
        borderRadius: [0, 18, 18, 0],
        color: ''
      }
    }
  ]
};