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

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

效果图：

 

html

  <script src="js/4.2.1/echarts.min.js"></script>
 <div class="box-echarts" id="Echarts09"></div>

js

var loadEcharts09 = function () {
        var myChartss = echarts.init(document.getElementById("Echarts09"));
        var option = {
            title:{
                text:'单位：万人',
                top:chartsRelativeSize(2, 'r'),
                left:chartsRelativeSize(1, 'r'),
                textStyle:{
                    color:'#F0BF04',
                    fontSize:chartsRelativeSize(.7, 'r'),
                }
            },
            tooltip : {
                trigger: 'axis',
                formatter: function (params) {
                    var arr = [];
                    params.forEach(function (item,index) {
                        var N=item.seriesName;
                        var V = '';
                        if(item.value>100000000){//亿
                            V += (item.value/100000000).toFixed(1) + '亿';
                        }else if( item.value>10000){//万
                            V += (item.value/10000).toFixed(1) + '万';
                        }else{
                            V += item.value;
                        }
                        a = {name:N,value:V};
                        arr.push(a);
                    });
                    var num = '';
                    arr.forEach(function (item,index) {
                        num += item.name+":"+item.value+"<br/>";
                    });
                    return params[0].name +"<br>"+ num;
                }
            },
            grid: {
                left: chartsRelativeSize(2, 'r'),
                right: chartsRelativeSize(2, 'r'),
                bottom: chartsRelativeSize(1, 'r'),
                top:chartsRelativeSize(6, 'r'),
                containLabel: true
            },
            legend: {
                orient: 'horizontal',
                icon:'rect',
                top:chartsRelativeSize(4, 'r'),
                right: chartsRelativeSize(2, 'r'),
                itemWidth:chartsRelativeSize(0.7, 'r'),
                itemHeight:chartsRelativeSize(0.7, 'r'),
                textStyle:{
                    color:'#fff'
                },
                data:['人口密度','案件比例']
            },
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#2E3950',//左边线的颜色
                            width: '1'//坐标线的宽度
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色
                        },
                        interval:0
                    },
                    axisTick:false,
                    data: ['平阴县','长阴区','槐荫区','市中区','天桥区','历下区','济阳区','商河县','历城区','章丘区','莱芜区','钢城区']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#2E3950',//左边线的颜色
                            width: '1'//坐标线的宽度
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#e6e6e6',//坐标值得具体的颜色

                        }
                    },
                    axisTick:false,
                    splitLine: {  //坐标轴在grid区域中的分隔线（网格中的横线）
                        show: true,
                        lineStyle: {
                            color: ['#2E3950'],
                            width: 1,
                            type: 'solid',
                        }
                    },
                    splitArea: {//坐标轴在grid区域中的分隔区域（间隔显示网格区域）
                        interval: 1, //显示间隔的规律
                        show: true,
                        areaStyle: {//分隔区域的样式
                            color: ['rgba(255,255,255,0.03)', 'rgba(255,255,255,0)']
                        }
                    }
                }
            ],
            series : [
                {
                    name:'人口密度',
                    type:'bar',
                    barGap:0.2,
                    barWidth:chartsRelativeSize(.8, 'r'),
                    itemStyle: {
                        normal: {
                            show: true,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FFCF01'
                            }, {
                                offset: 1,
                                color: '#FF7122'
                            }]),
                            barBorderRadius: chartsRelativeSize(1.1, 'r')
                        }
                    },
                    data:[15,48,40,32,21,41,38,65,9,18,8,45]
                },
                {
                    name:'案件比例',
                    type:'bar',
                    barGap:0.2,
                    barWidth:chartsRelativeSize(.8, 'r'),
                    itemStyle: {
                        normal: {
                            show: true,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#22EEFF'
                            }, {
                                offset: 1,
                                color: '#2340FF'
                            }]),
                            barBorderRadius: chartsRelativeSize(1.1, 'r')
                        }
                    },
                    data:[43,12,56,67,12,45,41,15,25,37,55,34]
                }
            ]
        };
        myChartss.clear();
        myChartss.setOption(option);
        // $.ajax({
        //     type:"post",
        //     url:'ajax.jsp',
        //     data:{"ac":'dwrs'},
        //     dataType:'json',
        //     success:function (data) {
        //         data.forEach(function (item,index) {
        //             option.xAxis[0].data.push(item.fjmc);
        //             option.series[0].data.push(item.rs);
        //             option.series[1].data.push(item.bj_je);
        //             option.series[2].data.push(item.je);
        //             myChartss.setOption(option);
        //         });
        //     },
        //     error:function () {
        //         console.error("Ajax请求失败!");
        //     }
        // });

    };