eachars报表折线图通用方法

飞熊 • 2023年4月23日上午10:47 • 后端开发 • 阅读 201

报表通用格式（eachar，highchars）通用

第一步，先将需要展示的数据封装成下面方式

数据格式为：
[
    { 
      "xAxis":"所有科室",
      "yAxis":[
           {"name":"报修量","value":"100"},
           {"name":"完修量","value":"50"},
           {"name":"维修总费用","value":"15"},
           {"name":"紧急单数","value":"2"},
           {"name":"维修总工时","value":"56"}
         ]
    },{ 
      "xAxis":"急诊科",
      "yAxis":[
           {"name":"报修量","value":"130"},
           {"name":"完修量","value":"20"},
           {"name":"维修总费用","value":"10"},
           {"name":"紧急单数","value":"2"},
           {"name":"维修总工时","value":"53"}
         ]
    }
]

第二步，在将上面的数据封装成插件需要的格式

//得到折线图
function getComunLine(){
    var dataJSON = getLineObj(); //得到上面的数据JSON，

    var xAxis = [];  //报表的x轴  xAxis
    var yAxis = [];   //报表的y轴  series

	//封装X轴值
	for(var i=0;i<dataJSON.length;i++){
		xAxis.push(dataJSON[i].xAxis); //对应X轴值
	}

	//封装Y轴值
    var index = 0;
    for(var i = 0;i < dataJSON[0].yAxis.length; i++){   //每一次的第一列的数量和名称都是固定的
        var scz = {};
		scz.name = dataJSON[0].yAxis[index].name;
        scz.type = 'line';
        scz.stack = '总量';

        //封装Y轴值
        var da = [];
        for(var j = 0; j < xAxis.length; j++){  //2
            if(dataJSON[j].yAxis[index]){
                da.push(Number(dataJSON[j].yAxis[index].value));  //值
            }else{
                da.push(0);   //没有值的补充为 0
            }
        }

        scz.data = da;
        yAxis.push(scz); //对应y轴值

        index++;//当前索引加 1
    }

    //调用折线图方法  第一个参数，div显示的容器，第二个是title，第三个是X轴，第四个是Y轴
    eachatsReport('container',"维修报表统计",xAxis,yAxis); 
}

第三步，调用插件方法即可

function eachatsReport(container,title,xAxis,yAxis){
    //添加折现图
    Highcharts.chart(container, {
        chart: {
            type: 'line'
        },
        title: {
            text:title
        },
        xAxis: {
            //categories: ['admin','赖*蕾', '周*明', '倪*强', '高*巍','朱明']
            categories: xAxis
        },
        yAxis: {
            title: {
                text: 'value',
                style: {
                    color: '#006400',
                    fontSize : '14px'
                }
            }
        },
        credits:{enabled:false},
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true,          // 开启数据标签
                    formatter: function() {
                        return this.y + '' ;
                    }
                },
                enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            }
        },
        // series:[{
        //     name: 'admin',
        //     data: [43934, 52503, 57177, 69658, 97031,48]
        // }, {
        //     name: '赖*蕾',
        //     data: [24916, 24064, 29742, 29851, 32490,95]
        // }, {
        //     name: '周*明',
        //     data: [11744, 17722, 16005, 19771, 20185,62]
        // }, {
        //     name: '倪*强',
        //     data: [78,0, 7988, 12169, 15112,4825]
        // }, {
        //     name: '高*巍',
        //     data: [12908, 5948, 8105, 11248, 8989,682]
        // },{
        //     name: '朱明',
        //     data: [12908, 5948, 8105, 11248, 8989,682
        // }]
        series:yAxis
    });
}

效果：由于是数据关系，所以这里效果图就不实际展示了，