码迷,mamicode.com
首页 > 其他好文 > 详细

echarts 动态生成多条折线图和动态获得x轴并于数字相对应

时间:2017-05-22 21:22:05      阅读:2120      评论:0      收藏:0      [点我收藏+]

标签:echarts 动态生成折线

function drawZXT(id, data) {
    myChart = echarts.init(document.getElementById(id));
    option = {
        title: {
            text: ‘流量计折线图‘,
            //subtext: ‘纯属虚构‘
        },
        tooltip: {
            trigger: ‘axis‘,
            axisPointer: {
                show: true,
                type: ‘cross‘,
                lineStyle: {
                    type: ‘dashed‘,
                    width: 1
                }
            },
            formatter: function(params) {
                var value=formatDate(params.value[0])
                return params.seriesName + ‘ : [ ‘ +
                    value + ‘, ‘ +
                    params.value[1] + ‘ ]‘;
            }
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataZoom: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: [‘line‘, ‘bar‘]
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        xAxis: [{
            type: ‘time‘,//定义x轴的显示形式有1、categor(类目) 2、time(时间) 3、value(数值)
//              
//            }
        }],
        yAxis: [{
            type: ‘value‘,
            axisLine: {
                lineStyle: {
                    color: ‘#dc143c‘
                }
            }
        }],
        series: functionNodname(data)//引入方法创建折线
    };
    myChart.setOption(option);
}

//动态创建折线对象

function functionNodname(data) {
    var series = []

    for(var p = 0; p < data.length; p++) {
        var xyData = [];
        var arr = data[p].data;
        var nameArr = [];
        arr.sort(function(a, b) {
            if(a.num === b.num) {
                return new Date(b.createTime) - new Date(a.createTime)
            } else {
                return b.num - a.num;
            }
        });
        for(var o = 0; arr.length > o; o++) {
            var coordinate = [];
            nameArr.push(arr[o].flowmetername)
            coordinate.push(arr[o].createTime);
            coordinate.push(arr[o].value);
            xyData.push(coordinate)
            xyData.push(coordinate)
        }
        var item = {
            name: data[p].name,
            type: ‘line‘,
            data: xyData
        }

        series.push(item)
    }

    return series;

}

本文出自 “12933278” 博客,谢绝转载!

echarts 动态生成多条折线图和动态获得x轴并于数字相对应

标签:echarts 动态生成折线

原文地址:http://12943278.blog.51cto.com/12933278/1928340

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!