echarts画交错柱状图

echarts画交错柱状图

老板要画一个交错的柱状图，要自适应屏幕大小。难度就在要搞清楚每个数据块是哪一块控制，要如何能够自适应屏幕的大小。

比较关键的地方就是字体全用rem的方式不用px来固定，echarts的涉及到的属性也全用百分比就基本解决切分辨率的时候出现变形的问题，毕竟用响应式布局实在麻烦。。。

至于数据块的问题一边参考echarts文档一边调试基本都搞清楚了控制逻辑。

        console.log(req.data[0].patientCount);var data = {"_data": [{"_name": "85岁以上","_left": req.data[0].patientCount,"_right": req.data[1].patientCount},{"_name": "76-85岁","_left": req.data[2].patientCount,"_right": req.data[3].patientCount},{"_name": "66-75岁","_left": req.data[4].patientCount,"_right": req.data[5].patientCount},{"_name": "56-65岁","_left": req.data[6].patientCount,"_right": req.data[7].patientCount},{"_name": "46-55岁","_left": req.data[8].patientCount,"_right": req.data[9].patientCount},{"_name": "36-45岁","_left": req.data[10].patientCount,"_right": req.data[11].patientCount}]}var zongjine = [0];var myData = [];var myData_l = [];var myData_r = [];var garybar = [];var data_l = [];var data_r = [];function dataConvert(data) {for (var i = 0; i < data['_data'].length; i++) {myData.push(data['_data'][i]['_name']);var l = parseFloat(data['_data'][i]['_left']);var r = parseFloat(data['_data'][i]['_right']);myData_l.push(data['_data'][i]['_left']);myData_r.push(data['_data'][i]['_right']);garybar.push(1);var l2 = l / (l + r);var r2 = r / (l + r);data_l.push(l2);data_r.push(r2);}}dataConvert(data);var myChart = echarts.ElementById('xbbl'));myChart.setOption({legend: {data: ['男', '女'],itemWidth: 8,itemHeight: 7,textStyle: {color: 'rgb(189,204,237)',fontSize:'80%'},top: 2