导入echarts包
<script src='../scripts/libraries/echarts/echarts-all.js'></script>
js如下
loadhyzsxygpsldjzzt_pjjlrzxt(); function loadhyzsxygpsldjzzt_pjjlrzxt(){ $.ajax({ url : webPath + '/neeqgpqy/zjghyzsxygpslAndnpjjlr', type : 'post', dataType : 'json', data:{ }, success : function(data) { console.log(data); var names=[]; var xycounts=[]; var zscounts=[]; var xypjjlrs=[]; var zspjjlrs=[]; for(var i=(data.list.length-1);i>=0;i--){ names.push(data.list[i].name); xycounts.push(data.list[i].xycount == null ?0:data.list[i].xycount); zscounts.push(data.list[i].zscount == null ?0:data.list[i].zscount); xypjjlrs.push(data.list[i].xypjjlr == null ?0:data.list[i].xypjjlr); zspjjlrs.push(data.list[i].zspjjlr == null ?0:data.list[i].zspjjlr); } drawZZTZXTBJ(names,xycounts,zscounts,xypjjlrs,zspjjlrs); } }); } function drawZZTZXTBJ(names,xycounts,zscounts,xypjjlrs,zspjjlrs){ console.log(zspjjlrs); var myChart = echarts.init(document.getElementById('main2')); myChart.setOption({ title : { text : "" }, tooltip : { trigger : 'axis', showDelay : 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data:['做市','协议','做市平均净利润','协议平均净利润'] }, xAxis : [ { type : 'category', data : names } ], yAxis : [ { type : 'value', name : '企业数量', axisLabel : { formatter: '{value}' } }, { type : 'value', name : '净利润', axisLabel : { formatter: '{value}' } }], series : [ { name:'做市', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:zscounts }, { name:'协议', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:xycounts }, { name:'做市平均净利润', type:'line', yAxisIndex: 1, data:zspjjlrs }, { name:'协议平均净利润', type:'line', yAxisIndex: 1, data:xypjjlrs } ] }); }
html
<div class="chart" id="main2" style="margin-bottom:-70px;margin-top:-50px;"></div>