echarts 创建3D渐变柱状图

说明：实际项目美工效果图需要，网上找了相关的案例，发现有用图片的，但是发现图片的如果数据比较复杂会出现变形的，不实用，因此还是使用代码控制比较好，看看是否差不多了呢，细节后面大家可以自己调试。

美工效果图：

什么都不说，直接上代码：

1.配置项option

 var color1 = new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: "#38a0d6"}, {offset: 1, color: "#6dcde6"}], false);
    var color2 = new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: "#4366f3"}, {offset: 1, color: "#1d43f3"}], false);
    var color3 = new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: "#4721ca"}, {offset: 1, color: "#8651f4"}], false);
    var color4 = new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: "#9837dd"}, {offset: 1, color: "#e23af5"}], false);
    var color5 = new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: "#ff934c"}, {offset: 1, color: "#fc686f"}], false);

    var option = {
        color: [color1,color2,color3,color4,color5], //控制主要渐变色用
        color2:["#38a0d6","#4366f3","#4721ca","#9837dd", "#ff934c"], //背景色不需要渐变，后面改透明度即可
        tooltip: {axisPointer: {type: 'shadow'}},
        xAxis: {type: 'category', axisLabel: {margin:20}, data: []},
        yAxis: {type: 'value', axisLabel: {margin:20}},
        grid: {top:'3%',left: '7%',right:'7%'},
        series: [
            {
                name: '标签',
                type:'pictorialBar',
                symbol: 'rect',
                symbolSize: ['50', '100%'],
                data: [],
                z: 2,
                symbolOffset: ['0', '-15']
            },
            {
                name: 'b',
                stack: 'amount',
                tooltip: {show: false},
                type: 'pictorialBar',
                symbol: 'diamond',
                symbolSize: ['50', '30'],
                symbolOffset: ['0', '-29'],
                symbolPosition:'end',
                data: [],
                z: 3
            },
            {
                name: 'c',
                stack: 'amount',
                tooltip: {show: false},
                type: 'pictorialBar',
                symbol: 'diamond',
                symbolSize: ['50', '30'],
                symbolPosition:'start',
                data: [],
                z: 3
            },
            {
                name: 'd',
                tooltip: {show: false},
                type:'pictorialBar',
                symbol: 'rect',
                symbolSize: ['50', '100%'],
                data: [],
                z: 0,
                symbolOffset: ['0', '-15']
            },
            {
                name: 'e',
                stack: 'amount',
                tooltip: {show: false},
                type: 'pictorialBar',
                symbol: 'diamond',
                symbolSize: ['50', '30'],
                symbolOffset: ['0', '-28.4'],
                symbolPosition:'end',
                data: [],
                z: 0
            },
            {
                name: 'f',
                stack: 'amount',
                tooltip: {show: false},
                type: 'pictorialBar',
                symbol: 'triangle',
                symbolSize: ['50', '15'],
                symbolOffset: ['0', '-28.4'],
                symbolPosition:'end',
                data: [],
                z: 0
            },
        ]
    };

2.绑定数据

//假数据如下开始
    option.series[0].name = "数量";
    var data = [
        {name:"周一",value:280,maxvalue:1000},
        {name:"周二",value:1000,maxvalue:1000},
        {name:"周三",value:560,maxvalue:1000},
        {name:"周四",value:400,maxvalue:1000},
        {name:"周五",value:800,maxvalue:1000}
    ];
    for(var i=0;i<data.length;i++){
        option.xAxis.data.push(data[i].name);
        option.series[0].data.push({
            value: data[i].value,
            itemStyle:{color:option.color[i%(option.color.length)]},
            animation :false
        });
        option.series[1].data.push({
            value: data[i].value+ 4.5,
            itemStyle:{color:option.color[i%(option.color.length)]},
            animation :false
        });
        option.series[2].data.push({
            value:  4.5,
            itemStyle:{color:option.color2[i%(option.color2.length)]},
            animation :false
        });
        option.series[3].data.push({
            value: data[i].maxvalue,
            itemStyle:{color:option.color2[i%(option.color.length)], opacity:0.3},
            emphasis:{itemStyle:{color:option.color2[i%(option.color.length)]}},
            animation :false
        });
        option.series[4].data.push({
            value: data[i].maxvalue+ 4.5,
            itemStyle:{color:option.color2[i%(option.color.length)], opacity:0.3,},
            emphasis:{itemStyle:{color:option.color2[i%(option.color.length)]}},
            animation :false
        });
        option.series[5].data.push({
            value: data[i].maxvalue+ 4.5,
            itemStyle:{color:option.color2[i%(option.color.length)], opacity:0.3,},
            emphasis:{itemStyle:{color:option.color2[i%(option.color.length)]}},
            animation :false
        });
    }
    //初始化echarts
    var mychart = echarts.init(document.getElementById('chart1'),"halloween"); //halloween是我的theme，根据你们的需要可以不写
    mychart.setOption(option);

3.运行起来

哈哈，是不是很不错呢，细节大家可以再调整哦。