eachars报表折线图通用方法

  报表通用格式(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
    });
}

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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

枯枫叶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值