柱状图

function (data, params) {
  const myChart = this.myChart;
  const twoYearData = [17, 45, 4, 34, 23, 54]
  const threeYearData = [11, 35, 9, 24, 12, 50]

  const twoYearBarColor = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      { offset: 0, color: '#00F8FF' }, // %0 处的颜色
      { offset: 1, color: '#17B9BE' }, // %100 处的颜色
    ],
    global: false, // 缺省为 false
  }
  const threeYearBarColor = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      { offset: 0, color: '#BAFA54' }, // %0 处的颜色
      { offset: 1, color: '#4EDE74' }, // 100% 处的颜色
    ],
    global: false, // 缺省为 false
  }
  // 配置图表选项
  const option = {
    title: {
      text: ''
    },
    tooltip: {},
    legend: {
      textStyle: {
        color: '#E4F0FF',
        fontSize: 14
      }
    },
    xAxis: {
      name: '年',
      nameTextStyle: {
        color: '#9AA6B8',
        fontSize: 16
      },
      type: 'category',
      data: [2020, 2021, 2022, 2023, 2024, 2025],
      axisLine: {
        lineStyle: { // 轴线样式
          type: 'solid',
          color: '#333'
        },
      },
      axisLabel: {
        show: true,
        fontSize: 16,
        textStyle: {
          color: '#9AA6B8',
        }
      },
    },
    yAxis: {
      name: '单位: 人',
      nameTextStyle: {
        color: '#9AA6B8',
        fontSize: 16
      },
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置刻度线为虚线个数
        }
      },
      axisLabel: {
        show: true,
        fontSize: 16,
        textStyle: {
          color: '#9AA6B8',
        }
      }
    },
    series: [
      {
        name: '两年制',
        type: 'bar',
        data: twoYearData,
        barWidth: 20,
        itemStyle: {
          color: twoYearBarColor
        }
      },
      {
        name: '三年制',
        type: 'bar',
        data: threeYearData,
        barWidth: 20,
        itemStyle: {
          color: threeYearBarColor
        }
      },
    ]
  }
  return option;
}

 

posted @ 2024-06-21 22:39  ladybug7  阅读(2)  评论(0编辑  收藏  举报