echarts数据可视化图表（一）：柱状图

echarts数据可视化图表（一）：柱状图

效果图：

代码如下：

注意：需引用echarts.js

  <script src="js/4.2.1/echarts.min.js"></script>

html

<div class="box-echarts" id="Echarts05"></div>

css

.box-echarts{
    width:500px;
    height:500px;
}

js

var loadEcharts05 = function (){
        var myChartss = echarts.init(document.getElementById("Echarts05"));
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    return params[0].name + ': ' + params[0].value;
                }
            },
            grid: {
                left: chartsRelativeSize(1, 'r'),
                right: chartsRelativeSize(1, 'r'),
                bottom: chartsRelativeSize(0.5, 'r'),
                top:chartsRelativeSize(1, 'r'),
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ["济宁","泰安","烟台","枣庄","日照","青岛","淄博"],
                    axisLine: {
                        lineStyle: {
                            color: '#363A51'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#fff'
                        },
                        interval: 0
                    }
                }],
            yAxis: [
                {
                    type: 'value',
                    splitLine:{
                        lineStyle:{
                            color:"#363A51"
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#363A51'
                        }
                    },
                    axisTick: {
                        show: false,
                        interval: 2

                    },
                    axisLabel: {

                        textStyle: {
                            color: '#019ABA'
                        },
                        formatter:function(value,index){
                            var r = '';
                            if(value>100000000){//亿
                                r = (value/100000000).toFixed(1) + '亿';
                            }else if(value>10000){//万
                                r = (value/10000).toFixed(1) + '万';
                            }else{
                                r = value;
                            }
                            return r;
                        }
                    }
                }
            ],
            series: [
                {
                    "name": "",
                    type: 'pictorialBar',
                    symbolSize: [30, 16],
                    symbolOffset: [0, -10],
                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#EA5353', '#f27326', '#9DD530', '#38CFCA', '#6C54E2', '#4D86DB', '#DBD64D'];
                                return colorList[params.dataIndex%colorList.length]
                            }
                        }
                    },
                    data: [100,55,58,12,45,48,78]
                },
                {
                    name: '',
                    type: 'pictorialBar',
                    symbolSize: [30, 16],
                    symbolOffset: [0, 5],
                    z: 12,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#EA5353', '#f27326', '#9DD530', '#38CFCA', '#6C54E2', '#4D86DB', '#DBD64D'];
                                return colorList[params.dataIndex%colorList.length]
                            }
                        }
                    },
                    data: [100,55,58,12,45,48,78]
                },
                {
                    type: 'bar',
                    barWidth: "30",
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#EA5353', '#f27326', '#9DD530', '#38CFCA', '#6C54E2', '#4D86DB', '#DBD64D'];
                                return colorList[params.dataIndex%colorList.length]
                            },
                            opacity: .7
                        }
                    },
                    data: [100,55,58,12,45,48,78]

                }


            ]
        };
        myChartss.setOption(option);
    };