【ECharts】报表联动，动态数据设计
说明：
数据没有拉取后台数据，仅仅前端模拟数据，Copy即可有效果。联动后台时，使用异步获取数据即可。鼠标点击，动态展示点击项的数据。有关更多实例，请移步到echarts官网查看。
成果展示：
相关代码：
html中的部分代码
<div class="row"> <div class="col-sm-3" id="row-item"> </div> <div class="col-sm-9"> <div id="echarts2" style="width:100%;height:350px;"> </div> <div id="echarts" style="width:100%;height:350px;"> </div> </div> </div>
js有关代码
<script type="text/javascript"> function choseItem(column,title){ // 柱状图 var column_yData = []; var column_title = title+'各公司详细数据'; var column_seriesData =[]; // 饼状图 var pie_title = title+'各公司数据占比'; var pie_seriesData =[]; for(var i = 0 ;i<rows.length;i++){ column_yData.push(rows[i].name); column_seriesData.push(rows[i][column]); pie_seriesData.push({name:rows[i].name,value:rows[i][column]}); } var option = { title : { text: column_title }, tooltip : { trigger: 'axis', show:true }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'value', boundaryGap : [0, 0.01] } ], yAxis : [ { type : 'category', data : column_yData } ], series : [ { type:'bar', itemStyle:{ normal:{ label:{ show:true, position: 'right' } } }, data:column_seriesData } ] }; ets.setOption(option); var option2 = { title : { text: pie_title , }, tooltip : { show:true, trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'数据占比', type:'pie', radius : '45%', center: ['50%', '50%'], itemStyle:{ normal:{ label:{ show:true, }, labelLine:{ length:30 } } }, data:pie_seriesData } ] }; ets2.setOption(option2); } var totalRows =[ {title:'病例1',totalNum:1234,name:'num1'}, {title:'病例2',totalNum:1234,name:'num2'}, {title:'病例3',totalNum:1234,name:'num3'}, {title:'病例4',totalNum:1234,name:'num4'}, {title:'病例5',totalNum:1234,name:'num5'}, {title:'病例6',totalNum:1234,name:'num6'}, {title:'病例7',totalNum:1234,name:'num7'}, {title:'病例8',totalNum:1234,name:'num8'}, {title:'病例9',totalNum:1234,name:'num9'}, {title:'病例10',totalNum:1234,name:'num10'}, {title:'病例11',totalNum:1234,name:'num11'}, {title:'病例12',totalNum:1234,name:'num12'}, {title:'病例13',totalNum:1234,name:'num13'}, {title:'病例14',totalNum:1234,name:'num14'} ]; var rows =[ { name:'公司名字有待南昌的健康还是看到回复1', num1:16, num2:17, num3:19, num4:123, num5:459, num6:123, num7:23, num8:123, num9:123, num10:123, num11:123, num12:123, num13:123, num14:123 }, { name:'公司暗红色的咖啡机哈萨克东方红路2', num1:'28', num2:'123', num3:'123', num4:'123', num5:'123', num6:'123', num7:'123', num8:'123', num9:'123', num10:'123', num11:'123', num12:'123', num13:123, num14:123 }, { name:'公司阿斯顿发生地方就会看见爱上对方3', num1:99, num2:123, num3:123, num4:123, num5:123, num6:123, num7:123, num8:123, num9:23, num10:12, num11:123, num12:123, num13:123, num14:123 }, { name:'公司奥斯卡接电话反馈就爱上的花费4', num1:45, num2:123, num3:123, num4:123, num5:123, num6:123, num7:123, num8:123, num9:23, num10:123, num11:12, num12:123, num13:123, num14:123 }, { name:'公司名字有点长有香肠有点长大厦水电费卡仕达5', num1:300, num2:123, num3:123, num4:123, num5:123, num6:123, num7:123, num8:123, num9:23, num10:12, num11:123, num12:123, num13:123, num14:123 }, { name:'公司熟练度空间发过了圣诞节发了个6', num1:500, num2:123, num3:123, num4:123, num5:123, num6:123, num7:123, num8:123, num9:123, num10:123, num11:123, num12:123, num13:123 }, { name:'公司奥会计师电话费咖技术的活雷锋7', num1:900, num2:123, num3:123, num4:123, num5:123, num6:123, num7:123, num8:123, num9:23, num10:123, num11:123, num12:123, num13:123, num14:123 }, { name:'公司空间哈卡收到货付款8', num1:600, num2:123, num3:123, num4:123, num5:123, num6:123, num7:123, num8:123, num9:123, num10:12, num11:123, num12:123, num13:123, num14:123 } ]; var rowItemHtml = ""; for(var i = 0;i<totalRows.length;i++){ rowItemHtml += "<div class='col-sm-6' style='border:1px solid black;height:100px;' onclick=choseItem('"+totalRows[i].name+"','"+totalRows[i].title+"')>"+totalRows[i].title+":"+totalRows[i].totalNum+"</div>"; } $("#row-item").html(rowItemHtml); // 实例化echarts var ets = echarts.init(document.getElementById("echarts")); var ets2 = echarts.init(document.getElementById("echarts2")); // 设置数值 choseItem(totalRows[0].name,totalRows[0].title); </script>
