ECharts 3D柱状图

最新推荐文章于 2024-05-22 08:52:46 发布

ZionHH

最新推荐文章于 2024-05-22 08:52:46 发布

阅读量2k

点赞数 1

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

本文链接：https://blog.csdn.net/z291493823/article/details/123730235

版权

ECharts 专栏收录该内容

17 篇文章 11 订阅

订阅专栏

在这里插入图片描述

是一个视觉的实现方式，用到的柱状图bar和象形柱图pictorialBar

const data = [
  { name: '1班', num: 35, full: 40 },
  { name: '2班', num: 32, full: 42 },
  { name: '3班', num: 38, full: 45 },
  { name: '4班', num: 40, full: 50 },
  { name: '5班', num: 28, full: 41 },
  { name: '6班', num: 31, full: 43 }
]
let xData = []
let nData = []
let fData = []
let tData = []
data.forEach(item => {
  xData.push(item.name)
  nData.push({
    value: item.num,
    full: item.full
  })
  fData.push({
    value: item.full,
    num: item.num
  })
  tData.push(1)
})
function colorBg(index, light) {
  let colors = ['#c13f32', '#f39c28', '#eb6720', '#2aac63', '#2d7bd5']
  // 稍亮的颜色
  if (light) {
    colors = ['#e75042', '#f3c52c', '#f58447', '#2cc06f', '#3496d8']
  }
  let num = index
  if (index > (colors.length - 1)) {
    num = index % colors.length
  }
  return colors[num]
}
var chart = echarts.init(document.getElementById('chart'))
chart.setOption({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'none'
    },
    formatter: function (data) {
      var t = data[3]
      return t.axisValue + '<br/>' + '总人数:\xa0' + t.data.full + '<br/>签到数:\xa0' + t.value
    }
  },
  grid: {
    left: 100,
    bottom: 100
  },
  xAxis: {
    data: xData,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: '#000'
      },
      margin: 20, //刻度标签与轴线之间的距离。
    },

  },
  yAxis: {
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#000'
      },
    }
  },
  series: [
    // 顶部圆片
    {
      type: 'pictorialBar',
      symbolSize: [45, 8],
      symbolOffset: [0, -4],
      z: 2,
      symbolPosition: 'end',
      itemStyle: {
        color: '#c3d0e3',
        opacity: 1,
      },
      label: {
        show: true,
        color: '#000',
        position: 'top',
        formatter: function (data) {
          return data.data.num
        }
      },
      emphasis: {
        label: {
          fontWeight: 'bold'
        }
      },
      data: fData
    },
    // 未绑定区域
    {
      name: '',
      type: 'bar',
      barWidth: 45,
      barGap: '-100%',
      z: 0,
      itemStyle: {
        color: '#c3d0e3',
        opacity: .7,
      },
      data: fData
    },
    // 绑定区域圆片
    {
      type: 'pictorialBar',
      symbolSize: [45, 8],
      symbolOffset: [0, -4],
      z: 3,
      itemStyle: {
        opacity: 1,
        color: function (params) {
          return colorBg(params.dataIndex, 'light')
        }
      },
      symbolPosition: 'end',
      data: nData
    },
    // 绑定区域
    {
      name: '已绑定',
      type: 'bar',
      barWidth: 45,
      z: 2,
      barGap: '-100%',
      itemStyle: {
        color: function (params) {
          return colorBg(params.dataIndex)
        }
      },
      data: nData
    },
    // 底部圆片
    {
      type: 'pictorialBar',
      symbolSize: [45, 8],
      symbolOffset: [0, 4],
      z: 1,
      itemStyle: {
        color: function (params) {
          return colorBg(params.dataIndex)
        }
      },
      data: tData
    }
  ]
})