echarts圆柱体正方体柱状图

322 阅读2分钟
var data1 = [200, 100, 200, 50, 100];
option = {
  backgroundColor: '#191970',
 xAxis: {
    data: ['北京', '上海', '深圳', '广州', '杭州'],
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: '#fff',
        fontSize: 20
      },
      margin: 40
    }
  },
 yAxis: {
    splitLine: {
      show: false
    },
    axisTick: {
      show: true,
      alignWithLabel: true,
      inside: true
    },
    axisLine: {
      show: true
    },
    axisLabel: {
      textStyle: {
        color: '#fff',
        fontSize: 20
      }
    }
  },
  grid: {
    top: '20%',
    bottom: '20%',
    right: '10%',
    left: '18%'
  },
  graphic: [
    {
      type: 'image', // 图形元素类型
      id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素,如果不需要用可以忽略。
      right: 'center', // 根据父元素进行定位 (居中)
      bottom: '0%', // 根据父元素进行定位   (0%), 如果bottom的值是 0,也可以删除该bottom属性值。
      z: 0, // 层叠
      bounding: 'all', // 决定此图形元素在定位时,对自身的包围盒计算方式
      style: {
        image:
          'https://img0.baidu.com/it/u=3846011338,1538056540&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500', // 这里一定要注意、注意,必须是https开头的图片路径地址
        width: 1345,
        height: 800
      }
    }
  ],
  series: [
  // 底部的光晕
    {
      name: '',
      type: 'pictorialBar',
      tooltip: {
        show: false
      },
      symbolSize: [90, 40],
      symbolOffset: [0, 20],
      z: 1,
      itemStyle: {
        normal: {
          color: 'transparent',
          borderColor: '#26B2E8',
          borderType: 'solid',
          borderWidth: 4
        }
      },
      data: [1, 1, 1, 1, 1]
    }, {
      //三个最低下的圆片
      name: '',
      type: 'pictorialBar',
      symbolSize: [46, 22],
      symbolOffset: [0, 11],
      symbol: 'diamond',
      z: 12,
      itemStyle: {
        opacity: 1,
        color: function (params) {
          var a = params.name.slice(0, 2);
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'red' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'red' // 100% 处的颜色
                }
              ],
              false
            );
        }
      },
      data: [0, 0, 0, 0, 0]
    },
             //下半截柱状图
    {
      name: '2020',
      type: 'bar',
      barWidth: 45,
      barGap: '-100%',
      itemStyle: {
        opacity: 0.7,
        color: function (params) {
          var a = params.name.slice(0, 2);
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#26B2E8' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#26B2E8' // 100% 处的颜色
                }
              ],
              false
            );
        }
      },
      data: data1
    },
    {
      name: '', // 头部
      type: 'pictorialBar',
      symbolSize: [46, 22],
      symbolOffset: [0, -11],
      symbol: 'diamond',
      z: 12,
      symbolPosition: 'end',
      itemStyle: {
        color: 'red',
        opacity: 1
      },
      data: data1
    },
  ]
};

如果要柱状立方体 symbol: 'diamond' 这个去掉即可!