echarts3D柱状图

最新推荐文章于 2024-06-02 12:02:03 发布

孛儿只斤·苏日娜

最新推荐文章于 2024-06-02 12:02:03 发布

阅读量1.4k

点赞数 1

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_44827865/article/details/124404196

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

样式

在这里插入图片描述

代码

option = {
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'shadow'
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [30, 22],//调整截面形状
      symbolOffset: [0, 10],
      z: 12,
      itemStyle: {
          "normal": {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(89,211,255,1)"
              },
                  {
                      offset: 1,
                      color: "rgba(23,237,194,1)"
                  }
              ])
          }
      },
      data: [10, 52, 200, 334, 390, 330, 220],
    },
    {
      name: '',
      type: 'bar',
      barWidth: 30,
      barGap: '0%',
      itemStyle: {
          "normal": {
              "color": {
                  "x": 0,
                  "y": 0,
                  "x2": 0,
                  "y2": 1,
                  "type": "linear",
                  "global": false,
                  "colorStops": [{//第一节下面
                      "offset": 0,
                      "color": "rgba(0,255,245,0.5)"
                  }, {
                      "offset": 1,
                      "color": "#43bafe"
                  }]
              }
          }
      },
      data: [10, 52, 200, 334, 390, 330, 220],
    },
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [30, 22],//调整截面形状
      symbolOffset: [0, -10],
      z: 12,
      symbolPosition: "end",
      "itemStyle": {
          "normal": {
              color: new echarts.graphic.LinearGradient(0,0,0,1,
                  [{
                      offset: 0,
                      color: "rgba(89,211,255,1)"
                  },
                      {
                          offset: 1,
                          color: "rgba(23,237,194,1)"
                      }
                  ],
                  false
              ),
          }
      },
      data: [10, 52, 200, 334, 390, 330, 220],
    }
  ]
};