Echarts在线免费图表

 
            var hours = ['贵州矿业回采', '贵州矿业', '贵州矿业开拓', '', '西北矿业回采', '西北矿业', '西北矿业开拓', '', '新汶矿业回采', '新汶矿业', '新汶矿业开拓',];
var days = ['采集', '填报', '计划'];
var data = [
    [0, 0, 5],
    [0, 1, 1],
    [0, 2, 2],
    [1, 0, 2],
    [1, 1, 3],
    [1, 2, 5],
    [2, 0, 3],
    [2, 1, 4],
    [2, 2, 1],
    [4, 0, 1],
    [4, 1, 3],
    [4, 2, 5],
    [5, 0, 2],
    [5, 1, 3],
    [5, 2, 3],
    [6, 0, 5],
    [6, 1, 2],
    [6, 2, 4],
     [8, 0, 1],
    [8, 1, 3],
    [8, 2, 5],
    [9, 0, 2],
    [9, 1, 3],
    [9, 2, 3],
    [10, 0, 5],
    [10, 1, 2],
    [10, 2, 4]
];
option = {
    title: {
        text: '柱图分组',
        textStyle: {
            fontSize: 18,
            fontWeight: 600,
            fontFamily: 'siyuanheiti_Thin'
        },
        // subtext: '100万',
        subtextStyle: {
            fontSize: 16,
        }
    },
    tooltip: {
        show: false
    },
    visualMap: {
        show: false,
        max: 50,
        inRange: {
            color: ['#f7acbc', '#ef5b9c', '#f05b72', '#f69c9f', '#f58f98', '#f391a9', '#d71345']
        }
    },
    xAxis3D: {
        name: '',
        type: 'category',
        data: hours,
         axisLabel:{
        interval: (index, value) => {
            console.log(index,value)
            if(value.length === 4) {
            return true

            }
        }

         }
    },
    yAxis3D: {
        name: '',
        type: 'category',
        data: days
    },
    zAxis3D: {
        name: '',
        type: 'value'
    },
    grid3D: {
        boxWidth: 80,
        boxDepth: 200,
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#ccc',
                width: 1
            }
        },
        axisLabel: {
            textStyle: {
                color: '#000',
                fontSize: 14
            }
        },
        light: {
            main: {
                intensity: 1.2,
                shadow: false
            },
            ambient: {
                intensity: 0.7,
                shadow: false
            }
        },
        viewControl: {
            alpha: 20,
            beta: 10,
            autoRotate: false,
            zoomSensitivity: 0,
            autoRotateAfterStill: 5,
            distance: 250
        }
    },
    series: [{
        type: 'bar3D',
        name: '数量',
        barSize: [5, 1],
        data: data.map(function (item) {
            return {
                value: [item[0], item[1], item[2]]
            }
        }),
        shading: 'lambert',
        label: {
            show: true,
            distance: 1,
            textStyle: {
                color: '#333',
                fontSize: 18,
                borderWidth: 0,
                borderColor: 'none',
                backgroundColor: 'rgba(255,255,255,0)',
                fontFamily: 'impact, Simhei'
            },
        },
        itemStyle: {
            opacity: 1
        },
        /*emphasis: {
            label: {
                textStyle: {
                    fontSize: 20,
                    color: '#900'
                }
            },
            itemStyle: {
                color: '#900'
            }
        }*/
    },
    {
        type: 'line3D',
        name: '1',

        lineStyle: {
            width: 4,
            color: 'blue'
        },

        data: [
            [0, 0, 5.5],
            [1, 0, 2.5],
            [2, 0, 3.5],

        ],
    },
    ]
}