echarts数据可视化图表(二)：双柱状图

效果图：

html

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+"";                    });                    return params[0].name +""+ 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请求失败!");        //     }        // });    };

原创不易，记得点赞关注转发哦！