Echarts在线免费图表

 
            var N_POINT = 90; // 角度
var YMAX = 10; // Y轴放大倍数

//正弦
var genSinItem = function (k) {
  return Math.sin((Math.PI / N_POINT) * 100 * k) * YMAX;
};
//方波
var genSquItem = function (k) {
  if (k % 2 === 0) {
    return 1;
  } else {
    return 0;
  }
};
option = {
    backgroundColor: "#02234c",
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    xAxis: [{
        gridIndex: 0,
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(151,184,216,0.5)',
                type: "dashed"
            }
        },
        type: 'category',
        boundaryGap: false,
        data: [-36,-24,-12,0,12,24,36,48,60,72]
    }, {
        gridIndex: 1,
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(151,184,216,0.5)',
                type: "dashed"
            }
        },
        type: 'category',
        boundaryGap: false,
         data: [-36,-24,-12,0,12,24,36,48,60,72]
    }, {
        gridIndex: 2,
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(151,184,216,0.5)',
                type: "dashed"
            }
        },
        type: 'category',
        boundaryGap: false,
        data: [-36,-24,-12,0,12,24,36,48,60,72]
    }, {
        gridIndex: 3,
        axisLine: {
            lineStyle: {
                color: '#97b8d8'
            }
        },
        axisLabel: {
            color: '#97b8d8',
            fontSize: 14
        },
        type: 'category',
        boundaryGap: false,
        data: [-36,-24,-12,0,12,24,36,48,60,72]
    }],
    yAxis: [{
        gridIndex: 0,
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: false
        },
        splitNumber: 1,
        name: '正弦',
        nameLocation: 'center',
        nameTextStyle: {
            color: '#97b8d8',
            fontSize: 14
        },
        nameRotate: 360
    }, {
        gridIndex: 1,
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: false
        },
        splitNumber: 1,
        name: '方波',
        nameLocation: 'center',
        nameTextStyle: {
            color: '#97b8d8',
            fontSize: 14
        },
        nameRotate: 360
    }, {
        gridIndex: 2,
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: false
        },
        splitNumber: 1,
        name: '其他',
        nameLocation: 'center',
        nameTextStyle: {
            color: '#97b8d8',
            fontSize: 14
        },
        nameRotate: 360
    }, {
        gridIndex: 3,
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: false
        },
        splitNumber: 1,
        name: '',
        nameLocation: 'center',
        nameTextStyle: {
            color: '#97b8d8',
            fontSize: 14
        },
        nameRotate: 360
    }],
    grid: [{
        top: '10%',
        left: '12%',
        right: '4%',
        bottom: '4%',
        height: '20%'
    }, {
        top: '30%',
        left: '12%',
        right: '4%',
        bottom: '4%',
        height: '20%'
    }, {
        top: '50%',
        left: '12%',
        right: '4%',
        bottom: '4%',
        height: '20%'
    }, {
        top: '70%',
         left: '12%',
        right: '4%',
        bottom: '4%',
        height: '20%'
    }],
    series: [
        //正弦
        {
        type: 'line',
        data: Array.apply(null, Array(N_POINT)).map((item, i) => [
        i,
        genSinItem(i)
      ]),
        xAxisIndex: 0,
        yAxisIndex: 0,
        smooth: true,
        lineStyle: {
              color: 'rgba(0,171,252,1)'
        },
        itemStyle: {
            normal: {
                color: '#92c690',
                borderColor: '#92c690'
            }
        },
    }, 
    //方波
    {
        type: 'line',
        data: Array.apply(null, Array(N_POINT)).map((item, i) => genSquItem(i)),
        xAxisIndex: 1,
        yAxisIndex: 1,
        step: 'start',
        smooth: false,
        lineStyle: {
            color: '#B89919'
        },
        itemStyle: {
            normal: {
                color: '#219cab',
                borderColor: '#219cab'
            }
        },
    }, {
        type: 'line',
        data: [0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0],
        xAxisIndex: 2,
        yAxisIndex: 2,
        smooth: true,
        lineStyle: {
            color: 'rgba(38,210,165,1)'
        },
        itemStyle: {
            normal: {
                color: '#6f68bf',
                borderColor: '#6f68bf'
            }
        },
    }]
};