【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>