百度Echarts柱状图系列之3d立体-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;height:450px;"></div>
    <script type="text/javascript">
        let yList = [32, 58, 64, 64, ];
        let xList = [10, 55, 44, 55, ];
        let xData = ['HTML5', 'CSS3', 'VUEJS', 'JQUERY'];
        let color = ['#CC1CAA', '#8D67FF', '#00FFFF', '#48DE13', '#FFC516', '#DC3E14', '#8E16F8'];
        
        dom = 800;
        barWidth = dom / 20;
        let colors = []
        for(let i = 0;i<4;i++){
          colors.push({
            type: 'linear',
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
            {
              offset: 0,
              color: '#73fcff' // 最左边
            }, {
              offset: 0.5,
              color: '#86eef1' // 左边的右边 颜色
            }, {
              offset: 0.5,
              color: '#5ad6d9' // 右边的左边 颜色
            }, {
              offset: 1,
              color: '#3dc8ca'
            }]
          })
        }
        option = {
          backgroundColor: '#030c2b',
          tooltip: {
            trigger: 'axis',
            formatter: "{b} : {c}",
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
              left: '12%',
              right: '8%',
              top: '10%',
              bottom: '15%',
            },
          xAxis: {
            data: xData,
            type: 'category',
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,1)',
                shadowColor: 'rgba(255,255,255,1)',
                shadowOffsetX: '20',
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 25]
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 30,
              fontSize: 15,
            },
          },
          yAxis: {
            show: true,
            splitNumber: 4,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type:'dashed',
                color: '#075858'
              },
            },
            axisLabel: {
              color: '#FFFFFF',
              margin: 30,
              fontSize:15
            }
          },
          series: [
            {
              type: 'bar',
              barWidth: barWidth,
              itemStyle: {
                normal: {
                  color: function(params) {
                    return colors[params.dataIndex % 7];
                  }
                }
              },
              label: {
                show: false,
                position: [barWidth / 2, -(barWidth + 20)],
                color: '#ffffff',
                fontSize: 14,
                fontStyle: 'bold',
                align: 'center',
              },
              data: yList
            },
            {
              z: 2,
              type: 'pictorialBar',
              data: yList,
              symbol: 'diamond',
              symbolOffset: [0, '50%'],
              symbolSize: [barWidth, barWidth * 0.5],
              itemStyle: {
                normal: {
                  color: function(params) {
                    return colors[params.dataIndex % 7];
                  },
                }
              },
            },
            {
              z: 3,
              type: 'pictorialBar',
              symbolPosition: 'end',
              data: yList,
              symbol: 'diamond',
              symbolOffset: [0, '-50%'],
              symbolSize: [barWidth, barWidth * 0.5],
              itemStyle: {
                normal: {
                  borderWidth: 0,
                  color: function(params) {
                    return colors[params.dataIndex % 7].colorStops[0].color;
                  },
        
                }
              },
            },
          ],
        };
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：