echarts实现象形柱状图(三角锥形柱状图)

367 阅读1分钟

象形柱状图效果如下:

image.png

option = {
   grid: {
     top: 30,
     bottom: 20
   },
   // 双横坐标轴
   xAxis: [{
    type: 'category',
    data: ['6/10', '6/11', '6/12', '6/13', '6/14', '6/15', '6/16'],
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#E5E6EB'
      }
    },
    axisLabel: {
      color: '#86909C',
      fontFamily: 'font-family: AlibabaPuHuiTi_3_65_Medium',
      fontSize: 11
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#EFF0F3',
        type: 'dashed',
      }
    },
  }, {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#E5E6EB'
      }
    },
    axisLabel: {
      color: '#86909C',
      fontFamily: 'AlibabaPuHuiTi_3_65_Medium',
      fontSize: 11
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#EFF0F3',
        type: 'dashed',
      }
    },
  }],
  yAxis: {
    type: 'value',
    position: 'right', // 右侧显示纵坐标轴
    minInterval: 1, // 刻度最小间隔1
    max: (value) => value.max + value.max*0.1, 
    axisLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: '#E5E6EB'
      }
    },
    axisLabel: {
      color: '#86909C',
      fontFamily: 'AlibabaPuHuiTi_3_65_Medium',
      fontSize: 11
    },
    splitLine: {
      show: false
    },
    splitNumber: 10
  },
  series: [
    {
      name: "动物监测(次)",
      // 象柱形图
      type: "pictorialBar",
      barCategoryGap: "-50%",
      symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z", // 自定义svg 图标-----三角锥形的关键
      label: {
        show: true,
        position: 'top',
        distance: 10,
        color: '#4E5969'
      },
      itemStyle: {
        borderColor: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(23,119,255,0.9)"
            },
            {
              offset: 1,
              color: "rgba(51, 175, 255, 0.05)"
            }
          ]
        },
        borderWidth: 1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(23,119,255,0.75)"
            },
            {
              offset: 1,
              color: "rgba(23,119,255,0)"
            }
          ]
        }
      },
      data: [
        700,
        800,
        1000,
        850,
        900,
        950,
        880
      ],
      z: 10
    }
  ]
};