柱状图(网格形式)

最新推荐文章于 2024-09-12 15:08:36 发布

hw成长记录

最新推荐文章于 2024-09-12 15:08:36 发布

阅读量219

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/H_Wnnnn/article/details/122067850

版权

效果图:

代码块:

var getsyzl = [
  '2014',
  '2015',
  '2016',
  '2017',
  '2018',
  '2019',
  '2020',
  '2021',
  '2022',
  '2023',
  '2020',
  '2021',
  '2022',
  '2023',
  '2020',
  '2021',
  '2022',
  '2023'
];
var getwkrs = [
  20, 673, 588, 782, 779, 1000, 20, 673, 588, 0, 0, 10, 20, 673, 588, 782, 0,
  1000
];
//splitNumber 方法(坐标轴的分割段数)
let splitNumbers = getsyzl.length / 2;

let symbolColors = ['#1CF407'];
let markPointDatum = [];
for (var i = 0; i < getwkrs.length; i++) {
  if (getwkrs[i] != 0) {
    let _obj = {
      symbol: 'pin',
      symbolOffset: [0, '-20%'],
      coord: [i, getwkrs[i]],
      value: getwkrs[i],
      itemStyle: {
        // borderWidth: 3,
        // borderColor: symbolColors[i],
        // color: symbolColors[i]
      }
    };
    markPointDatum.push(_obj);
  }
}
option = {
  backgroundColor: '#000',
  xAxis: [
    {
      data: getsyzl,
      boundaryGap: false,
      axisLabel: {
        interval: 0, //解决文字超过数量不显示问题
        margin: 10,
        color: '#A1D5FF',
        textStyle: {
          fontSize: 12
        }
      },
      axisLine: {
        // show:true,
        lineStyle: {
          color: '#102E74'
        }
      },
      axisTick: {
        show: true,
        alignWithLabel: true
      },
      splitLine: {
        show: true,
        interval: 0,
        lineStyle: {
          color: '#102E74'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      offset: 20,
      splitNumber: splitNumbers,
      axisLabel: {
        color: '#A1D5FF',
        textStyle: {
          fontSize: 12
        }
      },
      // axisLine: {
      //   show: false,
      //   lineStyle: {
      //     color: '#102E74'
      //   }
      // },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#102E74'
        }
      }
    }
  ],
  series: [
    {
      name: '文科',
      type: 'bar',
      data: getwkrs,
      barWidth: '12px',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(6,251,253,0.9)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'transparent' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [30, 30, 0, 0]
        }
      },
      markPoint: {
        data: markPointDatum
      }
    }
  ]
};