Echarts的使用之柱状图

官网 ： https://echarts.apache.org/zh/index.html
官网模板：https://echarts.apache.org/examples/en/index.html
代码编辑页面： https://echarts.apache.org/examples/en/editor.html?c=line-simple

柱状图：

var option = {
            title: {
                text: '单位：亿元',
                left:'12%',
                top:'4%',
                textStyle: {    
                color: "#ffffff",
                fontSize: 18,
                }
            },
            backgroundColor:'#031d7c',
            grid:{//直角坐标系内绘图网格
                show:false,//是否显示直角坐标系网格。[ default: false ]
                left:"10%",//grid 组件离容器左侧的距离。
                right:"30px",
                top:'10%',
                borderColor:"#c45455",//网格的边框颜色
                bottom:"20%" //
            },
            tooltip: {
                 trigger: "axis",  
            },
            legend: {
                icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
                itemWidth:20,  
                itemHeight:20,
                data:['累计','近60天'],
                textStyle:{//图例文字的样式
                    color:'#ccc',
                    fontSize:16
                },
                x:'right',      //可设定图例在左、右、居中
                y:'up',     //可设定图例在上、下、居中
                padding:[25,100,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
            },
            xAxis: {
                data: ["应收账款保理","订单融资","应收账款信托","票据贴现","电e贷",'电e票','电e盈','投标保证保险','履约保证保险','其他'],
                //设置轴线的属性
                axisLine:{
                    lineStyle:{
                        color:'#ffffff',
                        width:1,//这里是为了突出显示加上的
                    }
                },
                splitLine:{
                    show:false,
                },
				axisTick:{
                    show:false,
                    length: 0
                },
                axisLabel: {
                    color: '#ffffff',
                    //  让x轴文字方向为竖向
        			interval: 0,
                    formatter: function(value) {
                      return value.split('').join('\n')
                    },
                    textStyle: {
                      color: '#c3dbff',  //更改坐标轴文字颜色
                      fontSize : 23      //更改坐标轴文字大小
                    }
                }
               
            },
            yAxis: {
                axisLine:{
                    show:false,
                    lineStyle:{
                        color:'#ffffff',
                        width:1,//这里是为了突出显示加上的
                    }
                },
                axisTick:{
                    show:false,
                    length: 0
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        type:'dashed'
                    }
                }
            },
            series: [{
                name: '累计',
                type: 'bar',
                stack:'使用情况',
                data: [68, 60, 58, 55, 52, 50,43,41,40,30],
                itemStyle:{
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#1335ea'},                   //柱图渐变色
                                {offset: 0.5, color: '#1591f2'},                 //柱图渐变色
                                {offset: 1, color: '#1335ea'},                   //柱图渐变色
                            ]
                        )
                    },
                }
            },{
                name: '近60天',
                type: 'bar',
                stack:'使用情况',
                data: [5, 4, 4, 6, 6, 4,4,5,4,5],
                itemStyle:{
                     normal:{color:"#3FBB49"},
                }
            }]
        };