本文主要是介绍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.init(document.getElementById('xbbl'));myChart.setOption({legend: {data: ['男', '女'],itemWidth: 8,itemHeight: 7,textStyle: {color: 'rgb(189,204,237)',fontSize:'80%'},top: 2这篇关于echarts画交错柱状图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
