echarts绘制折线图

Echarts绘制折线图

大前提是做实验想将数据可视化做的漂亮好截图之类的用于展示，于是上手了百度的echarts，从简单的demo修改代码，到最后将实验数据通过折线图的形式展现，主要解决了一下问题：

• echarts的x轴的数组自动赋值问题；
• 纵坐标函数值的字符串切割，转化为float型数据，并赋给数组接收；
  折线图绘制；

---

代码展示

var xv = [];
var str = "2.227524784236213     0.853304145127455     0.592880562102494     0.686338706245567     0.309197992355436     0.761955111690508     1.076266118527815     2.381444652924746     0.602427655482033     0.543595590522338     0.770783757455377     0.857129981331261     0.883815788306822     0.699549132399454     0.836247987498165     1.518716449161166     1.501300929328461";
var temp = str.split(/\s+/);
var yd = [];
for (var i=0;i <=16; i++){
    xv.push(i);
    yd.push(parseFloat(temp[i]));
}

option = {
    xAxis: {
        type: 'category',
        data : xv
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: yd,
        type: 'line'
    }]
};

图片展示

Echart绘制曲线图

代码展示

var x1 = "-0.942 -0.884 -0.826 -0.775 -0.757 -0.695 -0.526 -0.44 -0.338 -0.23 -0.163 -0.094 0 0.07 0.134 0.218 0.306 0.382 0.441 0.584 0.696 0.749 0.886 0.943 0.972";
var tempx1 = x1.split(/\s+/);
var xv1 = [];
var y1 = "0.655 0.677 0.791 0.843 0.868 0.9110 0.96 0.973 0.982 0.986 0.987 0.99 1 0.94 0.857 0.675 0.61 0.55 0.541 0.531 0.596 0.596 0.571 0.583 0.577";
var tempy1 = y1.split(/\s+/);
var yv1 = [];
for (var i=0;i <=24; i++){
    xv1.push(parseFloat(tempx1[i]));
    yv1.push(parseFloat(tempy1[i]));
}


var x2 = "-0.9 -0.8 -0.695 -0.6 -0.5 -0.4 -0.3 -0.2 -0.094 0 0.1 0.218 0.306 0.4 0.5 0.6 0.696 0.8 0.9";
var tempx2 = x2.split(/\s+/);
var xv2 = [];
var y2 = "0.64 0.796 0.919 0.953 0.97 0.983 0.988 0.993 1 1 0.882 0.593 0.611 0.465 0.524 0.589 0.594 0.575 0.579";
var tempy2 = y1.split(/\s+/);
var yv2 = [];
for (var i=0;i <=18; i++){
    xv2.push(parseFloat(tempx2[i]));
    yv2.push(parseFloat(tempy2[i]));
}

option = {
    xAxis:[ {
        type: 'category',
        data : xv1
        },
        {
        type: 'category',
        data : xv2
        }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
        data: yv1,
        xAxisIndex: 0,
        type: 'line',
        smooth: true
    }, {
        data: yv2,
        xAxisIndex: 1,
        type: 'line',
        smooth: true
    }]
};

图片展示