echarts 好看的柱形图

option = {
    legend: {},
    // 鼠标放上显示提示
    tooltip: {
        trigger: 'axis',    //触发类型 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用，'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。  
        axisPointer: {  //坐标轴指示器，坐标轴触发有效
            type: 'cross',      //默认为直线，可选line shadow cross
            crossStyle: {
                color: '#fff'
            }
        }
    },
    // x轴
    xAxis: {
        show:true,
        axisPointer: {  //写到X轴就是给X轴改的鼠标放上后的样式
            type: 'shadow',     
            
        },
        // 坐标轴标签
        axisLabel: {
            inside: true,
            textStyle: {
                color: '#fff'
            }
        },
        //X坐标刻度
        axisTick: {
            show: false,    //坐标轴线是否显示
            inside:true,     //坐标轴线是否朝内
            
        },
        //X坐标标签 就是文字
        axisLabel:{
            show:true,      //坐标标签是否显示
            inside:false,   //坐标标签是否朝内
        },
        //grid 区域中的分隔线
        axisLine: {
            show: true
        },
        // 网格区域
        splitArea:{
            show:true
        },
        data: ["1月","2月","3月","4月","5月"],
        z: 10
    },
    // y轴
    yAxis: {
        show:true,      //是否显示
        position:'left',   //显示位置
        offset:0,      //y轴相对于默认位置的偏移
        type:'value',   //轴的类型
        name:'',    //轴的名称
        nameLocation:'end',
        // 坐标名称的样式 颜色 内边距 字体大小等
        nameTextStyle:{
            color:"#000",
            padding:[5,0,0,10],
        },
        nameGap:20, //坐标名称和轴线的距离
        // nameRotate:270, //坐标名字的旋转
        // 坐标轴 轴线
        axisLine: {
            show: true,
            // 箭头
            symbol:['none','arrow'], //['none','arrow']这是只在末端显示箭头，'arrow'两端都显示箭头 'none'就是不显示
            symbolSize:[8, 8] ,            //---箭头大小
            symbolOffset:[0,7],            //---箭头位置
            //线
            lineStyle:{
                color:'green',  //线的颜色
                width:1,    //线的宽度
                type:'solide' //显得类型
            }
        },
        //坐标轴 刻度 就是纵向多出来的小线
        axisTick: {
            show: true,
            inside:false,        //---是否朝内
            lengt:3,            //长度
            lineStyle:{
                //color:'red',            //---默认取轴线的颜色
                width:1,
                type:'solid',
            },
        },
        //坐标轴标签 坐标轴显示的数值
        axisLabel: {
            show:true,                    //---是否显示
            inside:false,                //---是否朝内
            rotate:0,                    //---旋转角度
            margin: 8,                    //---刻度标签与轴线之间的距离
            textStyle: {
                color: '#999'
            }
        },
        //--网格区域
        splitArea:{                    
            show:false,                    //---是否显示，默认false
        },  
    },
    // 数据区域的缩放
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    //内容数据
    series: [
       {
      name: '全部的',
      type: 'bar',
       itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        // 柱子0%的颜色
                        {offset: 0, color: '#E27BF6'},
                        //柱子50%的颜色
                        {offset: 0.5, color: '#D575F2'},
                        //柱子100%的颜色
                        {offset: 1, color: '#D14CFB'}
                    ]
                )
            },
      // barWidth:'30', //调节柱子的宽度
      data: [900, 23438, 4200, 3000, 4000, 5000]
    },
       {
            name: '已完成的',
            type: 'bar',
            // 图形形状
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        // 柱子0%的颜色
                        {offset: 0, color: '#01F4D4'},
                        //柱子50%的颜色
                        {offset: 0.5, color: '#02E2E8'},
                        //柱子100%的颜色
                        {offset: 1, color: '#02D2F9'}
                    ]
                )
            },
            //鼠标放到柱子上的样式
            // emphasis: {
            //     itemStyle: {
            //         color: new echarts.graphic.LinearGradient(
            //             0, 0, 0, 1,
            //             [

            //                 {offset: 0, color: '#2378f7'},
            //                 {offset: 0.7, color: '#2378f7'},
            //                 {offset: 1, color: '#83bff6'}
            //             ]
            //         )
            //     }
            // },
            // barWidth:'30', //调节柱子的宽度
            // barCategoryGap:'50%',   //调节柱子之间的距离
            data: [3020, 4800, 3600, 6050, 4320, 6200,5050]
        },
         {
      name: '未完成的',
      type: 'bar',
       itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        // 柱子0%的颜色
                        {offset: 0, color: '#FA86CC'},
                        //柱子50%的颜色
                        {offset: 0.5, color: '#F65CB9'},
                        //柱子100%的颜色
                        {offset: 1, color: '#F73FAE'}
                    ]
                )
            },
      // barWidth:'30', //调节柱子的宽度
      data: [1000, 9356, 2356, 3000, 5000, 4832]
    },
     {
      name: '超期已完成',
      type: 'bar',
       itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        // 柱子0%的颜色
                        {offset: 0, color: '#C9EC8D'},
                        //柱子50%的颜色
                        {offset: 0.5, color: '#B2E951'},
                        //柱子100%的颜色
                        {offset: 1, color: '#99E218'}
                    ]
                )
            },
      // barWidth:'30', //调节柱子的宽度
      data: [900, 23438, 4200, 3000, 4000, 5000]
    },
     {
      name: '超期未完成的',
      type: 'bar',
       itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        // 柱子0%的颜色
                        {offset: 0, color: '#F1F288'},
                        //柱子50%的颜色
                        {offset: 0.5, color: '#EEEF51'},
                        //柱子100%的颜色
                        {offset: 1, color: '#E5E709'}
                    ]
                )
            },
      // barWidth:'30', //调节柱子的宽度
      data: [900, 23438, 4200, 3000, 4000, 5000]
    },
    ]
};