vue+Echart实现立体柱状图

本文实例为大家分享了Echart+Vue制作立体柱状图，供大家参考，具体内容如下

先来看一下制作完成后的效果：

废话不多说，直接上代码：

HTML代码：

<div class="lineOne">
      <span class="spanTitle">使用时长排行</span>
     <div id="timeRange" style="width:100%;height:400px">
     </div>
</div>

JS部分：

timeRangeInit(xdata,ydata) {
      let nc = document.getElementById("timeRange");
      var myChart = echarts.init(nc);
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        grid: {
          top: "15%",
          left: "8%",
          right: "12%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: xdata,
          name:'教室',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            symbolSize: [15, 17],
            lineStyle: {
              color: '#000000',
              width: 2 //  改变坐标线的颜色
            }
          },
          axisLabel: {
            //调整x轴的lable
            textStyle: {
              fontSize: 12 ,// 让字体变大
            }
          }
        },
        yAxis: {
          type: "value",
          name:'时长（小时）',
          splitLine: {    //刻度线
            show: false,
          },
          splitArea:{     //柱状图后面的背景色
            show:true,
            areaStyle: {
              color: ["rgba(221,247,250,0.7)","rgba(245,249,232,0.7)"]
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            //调整y轴的lable
            textStyle: {
              fontSize: 12 // 让字体变大
            },
            show: true
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            symbolSize: [15, 17],
            lineStyle: {
              color: '#000000',
              width: 2 //  改变坐标线的颜色
            }
          }
        },
        series: [
          {
            name: "时长统计",
            type: "bar",
            showSymbol: false,
            hoverAnimation: false,
            data: ydata,
            barWidth: 17, //柱图宽度
            itemStyle: {          //左面
              normal: {
                color:function(params) { 
                  let colorList = ["#EA5353","#DB8D4D","#9DD530","#38CFCA","#6C54E2","#749f83","#ca8622","#bda29a","#6e7074","#546570"];
                  return colorList[params.dataIndex];
                },
                barBorderRadius:[0,0,0,180],
              }
            }
          },{ 
            name:'a',
            tooltip:{
               show:false 
            },
            type: 'bar',
            barWidth:17, 
            itemStyle:{       //右面
                normal:{
                  color:function(params) { 
                    let colorList = ["#FA6363","#F1A363","#AEE93C","#41EBE5","#866FF5","#749f83","#ca8622","#bda29a","#6e7074","#546570"];
                    return colorList[params.dataIndex];
                  },
                  barBorderRadius:[0,0,180,0]
                }
            },
            data: ydata,
            barGap:0
        },{ 
            name:'b',
            tooltip:{
               show:false 
            },
            type: 'pictorialBar',
            itemStyle: {        //顶部
                 normal: {
                  color:function(params) { 
                    let colorList = ["#FC9F9F","#F7B177","#BBF64A","#4DF4EE","#947FFA","#749f83","#ca8622","#bda29a","#6e7074","#546570"];
                    return colorList[params.dataIndex];
                  }, 
                  borderColor:'',
                  borderWidth:0.01,
                  label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color :'black',
                            fontSize: 16,
                            fontFamily:'微软雅黑',
                        }
                    }
                }
            },
            symbol: 'rect',
            symbolRotate:45,
            symbolSize: ['24','24'],
            symbolOffset:['0','-11'],
            symbolPosition: 'end',
            data: ydata,
            z:3
        }
        ]
      });
    },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。