可视化——环形图（展示一天各时间段人在房间活动情况）

效果图：

                            

工具：

    ECharts

JSON：

   {
  "success": true,
  "data": {
    "rooomNames": [ "卧室B","厨房","客厅","户外" ],
    "oldManLive_rooms": [
      {
        "roomName": "卧室B",
        "time": "00:00-06:30",
        "value": "390"
      },
      {
        "roomName": "厨房",
        "time": "06:30-07:00",
        "value": "30"
      },
      {
        "roomName": "户外",
        "time": "07:00-11:00",
        "value": "240"
      },
      {
        "roomName": "厨房",
        "time": "11:00-11:30",
        "value": "30"
      },
      {
        "roomName": "客厅",
        "time": "11:30-13:30",
        "value": "120"
      },
      {
        "roomName": "卧室B",
        "time": "13:30-15:30",
        "value": "120"
      },
      {
        "roomName": "户外",
        "time": "15:30-17:30",
        "value": "120"
      },
      {
        "roomName": "厨房",
        "time": "17:30-18:30",
        "value": "60"
      },
      {
        "roomName": "客厅",
        "time": "18:30-20:30",
        "value": "120"
      },
      {
        "roomName": "卧室B",
        "time": "20:30-24:00",
        "value": "210"
      }
    ]
  },
  "error": null
}

html:

<div id="main"  style="width: 300px;height:200px;margin-left: 100px;"></div>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
</script>
//这段js要放到<div>后面 不能放到js代码中 不然会出错

JS代码：

放在$(function())中 

$.ajax({
    type: "POST",
    url: pathJs+"/visual/getLiveVisual",
    dataType: "json",
    data: {
        oldId: row.oid
    },
    async:false,
    success:function(data){
        if(data.success){
                var piedata=[];//具体显示数据
                var legendData=data.data.roomNames;
                for(var k=0;k<data.data.oldManLive_rooms.length;k++) {
                     //设置显示的具体数据  value和name是必要数据, name是数据的类别，此处是哪个房间 value是占的比例，此处是该房间活动的时间（单位分钟），
                     //值随便取，比例是当前值除以综合，  time是自己加的，用于提示框，会通过params数据集获得  此处是该房间活动的时间段
                   piedata.push({value: data.data.oldManLive_rooms[k].value, 
                                 name: data.data.oldManLive_rooms[k].roomName,
                                 time:data.data.oldManLive_rooms[k].time});
                }
                var option= {
                    title : {//标题,可以设置子标题详见官方文档
                        text: '生活规律',
                        x:'center',
                        y:'center',
                        textStyle: {
                            fontSize:24,
                            fontFamily:'Arial',
                            fontWeight:100
                        }
                    },
                    tooltip: {//设置图二的提示框信息，有两种方式 字符串模板和回调函数  此处用回调函数 更加灵活  params是数据集详见官方文档
                        trigger: 'item',
                        formatter: function(params) {
                            var res = params.name+"<br/>时间段："+ params.data.time+"<br/>一共"+params.value+"分钟 (占全天"+params.percent+"%)";
                            return res;
                        }
                    },
                    legend: { //左上方的颜色信息
                        orient: 'vertical',
                        x: 'left',
                        data:legendData
                    },
                    series: [
                        {
                            name:'类型',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:piedata //具体数据
                        }
                    ]
                };
                myChart.setOption(option);
        }
    }
});