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请求失败!");//}// });};
