一、引入echarts.js文件（下载页:http://echarts.baidu.com/download.html）
二、HTML代码：
<div style="width: 100%; height: 400px;" id="main"> </div>
三、js代码（获取数据以及对数据的处理方法）：
function loadData(callback){ $.ajax({ url: ‘test.json‘, dataType: ‘json‘, success: function(data){ if(data == ‘‘ || data == null){ return; } var nameArr = []; var totalGoalArr = []; var totalRealArr = []; var firstGoalArr = []; var firstRealArr = []; var secondGoalArr = []; var secondRealArr = []; var data = data.list; for(var i = 0; i < data.length; i++){ var orgSn = data[i].orgSn; //获取列表的orgSn var firstGoal = getTarget1(orgSn); //根据orgSn获取一类点规划量 var secondGoal = getTarget2(orgSn); //根据orgSn获取二类点规划量 var totalGoal = firstGoal + secondGoal; //总规划量 = 一类点规划量 + 二类点规划量 allData[data[i].orgName] = { //将得到的数据全部整合在allData对象中，在设置tooltip时方便使用 "totalGoal": totalGoal, "totalReal":data[i].total, "firstGoal ": firstGoal, "firstReal": data[i].count1, "secondGoal": secondGoal, "secondReal": data[i].count2 } nameArr.push(data[i].orgName); //将data列表中的orgName拼接在nameArr数组中，用于x轴数据的展示 //将通过orgSn获得的总规划量和data列表中的total值作比较，总规划量数组为totalGoal的集合。 //若前者大于后者，则未完成，未完成量为totalGoal - data[i].total,柱子颜色为白底红边； //若后者大于前者，则超额完成，超额完成量为data[i].total - totalGoal，柱子颜色为蓝色 if(data[i].total < totalGoal){ totalGoalArr.push({ itemStyle: { normal: { color: ‘rgb(255, 0 , 0)‘， barBorderColor: ‘rgb(255, 0, 0)‘ } }, value: totalGoal }); totalRealArr.push({ itemStyle: { normal: { color: ‘#FFF‘， barBorderColor: ‘rgb(254, 0 , 0)‘ } }, value: totalGoal - data[i].total }); } else { totalGoalArr.push({ itemStyle: { normal: { color: ‘rgb(86, 205 , 89)‘， barBorderColor: ‘rgb(86, 205 , 89)‘ } }, value: totalGoal }); totalRealArr.push({ itemStyle: { normal: { color: ‘rgb(0, 135 , 237)‘， barBorderColor: ‘rgb(0, 135 , 237)‘ } }, value: data[i].total - totalGoal }); } //将通过orgSn获得的一类点规划量和data列表中的count1值作比较，一类点规划量数组为firstGoal的集合。 //若前者大于后者，则未完成，未完成量为firstGoal - data[i].count1； //若后者大于前者，则超额完成，超额完成量为data[i].count1 - firstGoal if(data[i].count1 < fistGoal){ fistGoalArr.push({ itemStyle: { normal: { color: ‘rgb(255, 0 , 0)‘， barBorderColor: ‘rgb(255, 0 , 0)‘ } }, value: data[i].count1 }); fistRealArr.push({ itemStyle: { normal: { color: ‘#FFF‘， barBorderColor: ‘rgb(254, 0 , 0)‘ } }, value: fistGoal - data[i].count1 }); } else { fistGoalArr.push({ itemStyle: { normal: { color: ‘rgb(86, 205 , 89)‘， barBorderColor: ‘rgb(86, 205 , 89)‘ } }, value: fistGoal }); fistRealArr.push({ itemStyle: { normal: { color: ‘rgb(0, 135 , 237)‘， barBorderColor: ‘rgb(0, 135 , 237)‘ } }, value: data[i].count1 - fistGoal }); } // 将通过orgSn获得的一类点规划量和data列表中的count1值作比较，一类点规划量数组为firstGoal的集合。 //若前者大于后者，则未完成，未完成量为firstGoal - data[i].count1； //若后者大于前者，则超额完成，超额完成量为data[i].count1 - firstGoal if(data[i].count2 < secondGoal){ secondGoalArr.push({ itemStyle: { normal: { color: ‘rgb(255, 0 , 0)‘， barBorderColor: ‘rgb(255, 0 , 0)‘ } }, value: data[i].count2 }); secondRealArr.push({ itemStyle: { normal: { color: ‘#FFF‘， barBorderColor: ‘rgb(254, 0 , 0)‘ } }, value: fistGoal - data[i].count2 }); } else { fistGoalArr.push({ itemStyle: { normal: { color: ‘rgb(86, 205 , 89)‘， barBorderColor: ‘rgb(86, 205 , 89)‘ } }, value: secondGoal }); secondRealArr.push({ itemStyle: { normal: { color: ‘rgb(0, 135 , 237)‘， barBorderColor: ‘rgb(0, 135 , 237)‘ } }, value: data[i].count2 - secondGoal }); } } //回调函数，数据加载成功后再执行代表callback的函数 if(typeof callback == ‘function‘){ callback(); } } }); }
四、js方法（加载图表的方法）：
function initBarChart(){ var myChart = echarts.init(document.elementById(‘main‘)); var option = { title: { text: ‘视频点位分类统计图‘, x: ‘center‘, y: ‘top‘ }, tooltip: { trigger: ‘axis‘, axisPointer: { type: ‘shadow‘ //默认为直线，可选‘line | shadow‘ }, position: ‘top‘, formatter: function(params){ return param[0].name +"<br/>监控总指标量：" + allData[params[0].name]["totalGoal"] +"<br/>监控总完成量：" + allData[params[0].name]["totalReal"] +"<br/><br/>一类点规划量：" + allData[params[0].name]["firstGoal"] +"<br/>一类点完成量：" + allData[params[0].name]["firstReal"] +"<br/><br/>二类点规划量：" + allData[params[0].name]["secondGoal"] +"<br/>二类点完成量：" + allData[params[0].name]["secondReal"] } }, legend: { show: false }, xAxis: [{ type: ‘category‘, top: 20, axisTick: false, // data: nameArr }], yAxis: [{ type: ‘value‘, axisTick: false, //不显示刻度 splitLine: false //不显示分割线 }], series: [{ name: ‘监控总指标量‘, type: ‘bar‘, barWidth: 10, stack: ‘total‘, //stack相同的柱子则折叠在一起 data: totalGoalArr }, { name: ‘监控总完成量‘, type: ‘bar‘, barWidth: 10, stack: ‘total‘, data: totalRealArr }, { name: ‘一类点规划量‘, type: ‘bar‘, barWidth: 10, stack: ‘first‘, data: firstGoalArr }, { name: ‘一类点完成量‘, type: ‘bar‘, barWidth: 10, stack: ‘first‘, data: fiestRealArr }, { name: ‘二类点规划量‘, type: ‘bar‘, barWidth: 10, stack: ‘second‘, data: secondGoalArr }, { name: ‘二类点完成量‘, type: ‘bar‘, barWidth: 10, stack: ‘second‘, data: secondRealArr }] }; myChart.setOption(option); }
五、js方法（调用这两个方法）：
loadData(initBarChart);
六、json文件：
{ list: [{ "orgName": "海曙", "orgSn": "330203", "total": 304, "count1": 222, "count2": 50 }, { "orgName": "青州", "orgSn": "3302000", "total": 304, "count1": 222, "count2": 50 }, { "orgName": "安徽", "orgSn": "330205", "total": 304, "count1": 222, "count2": 50 }, { "orgName": "贵州", "orgSn": "330206", "total": 304, "count1": 222, "count2": 50 }, { "orgName": "海曙", "orgSn": "330207", "total": 304, "count1": 222, "count2": 50 }, { "orgName": "杭州", "orgSn": "330208", "total": 304, "count1": 222, "count2": 50 }, { "orgName": "双基", "orgSn": "330209", "total": 304, "count1": 222, "count2": 50 }, { "orgName": "余姚", "orgSn": "330201", "total": 304, "count1": 222, "count2": 50 }, { "orgName": "江干", "orgSn": "330210", "total": 304, "count1": 222, "count2": 50 }] }
七、js方法（根据orgSn获取一类指标量的方法）：
function getTarget1(orgSn){ var target = 0; switch(orgSn){ case "330203": target = 100; break; case "3302000": target = 139; break; case "330205": target = 145; break; case "330206": target = 56; break; case "330207": target = 189; break; case "330208": target = 166; break; case "330209": target = 122; break; case "330201": target = 339; break; case "330210": target = 554; break; default: break; } return target; }
八、js方法（根据orgSn获取二类指标量的方法）：
function getTarget2(orgSn){ var target = 0; switch(orgSn){ case "330203": target = 300; break; case "3302000": target = 239; break; case "330205": target = 45; break; case "330206": target = 156; break; case "330207": target = 89; break; case "330208": target = 66; break; case "330209": target = 222; break; case "330201": target = 239; break; case "330210": target = 154; break; default: break; } return target; }
