Echarts柱状图的相关设置

第一步：基于准备好的dom，初始化echarts实例

            var myChart = echarts.init(document.getElementById('插入图表的id名'));

第二步：制定图表的配置项和数据

var option = {

//设置图表的标题
    title: [{
        //设置标题的内容
        text: '年龄比例',
        //设置标题的位置
        textAlign: 'center',
        textStyle: {
            //设置标题字体的颜色
            color: '#53e3fb'
        }

    }],
//设置柱状图x轴的信息

    xAxis: [{  
        type: 'category',//设置category类型可以自定义x轴的文字信息     
        data: ['30岁以下', '30-40', '40-50', '50-60', '60以上'],//设置x轴需要显示的数据信息    
        axisTick: {show: false},//设置x轴刻度线不显示
        axisLabel:{  
              //x轴的信息都显示                                           
              interval:0,
              //-30度交倾斜显示x轴的内容
              // rotate:-30
              //x轴文字颜色的变化
              color:'#ccc',
              //x轴字体大小的设置
              fontSize:'12'

        }

    }],

//设置柱状图y轴的信息
yAxis: [{
    //类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
    type: 'value',
    //不显示网格线
    splitLine: {
        show: false
    },
    axisLine:{
        lineStyle:{
            color:'#48b8f0',
        }
    },
    //设置y轴的间隔，显示的数目
    interval:500,
    barWidth : 10,
    width:200,
    //y轴的刻度线不显示
    axisTick: {show: false},
    axisLabel:{       
        //y轴文字颜色的变化
        color:'#ccc',
        //y轴字体大小的设置
        fontSize:'12',
    }
}],
//柱状图表设置
series: [
    {
    //图表块的大小
    data: [569, 869, 365, 237, 198],
    //类型设置bar表示柱状图
    type: 'bar',    
    barWidth : 12,//柱状图的宽度  

    label: {
   show: true,//设置标签显示
            //标签的文字在上方显示 position: 'top', color:'#aaa' },}],

  itemStyle: {
        // 设置图表块的颜色
        color: '#50e1df',
        //设置阴影及阴影的颜色
        shadowBlur: 5,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

第三步:使用刚指定的配置项和数据显示图表

myChart.setOption(option);