echarts使用（3） 曲线图

在vue框架中，我们可以使用echarts来实现图表。

假如我们有x,y,z,a随着时间变动的数据，
x=[1,2,3,4,5,6]
y=[1,2,3,4,5,6]
z=[1,2,3,4,5,6]
a=[1,2,3,4,5,6]
xyza_time=["2014","2015","2016","2017","2018","2019"]
这里需要注意的是x,y,z,a与xyza_time的数组长度要一致

var chartDom = document.getElementById("id");
var myChart = echarts.init(chartDom);
var option;

option = {
    legend: {
        data: ['x', 'y', 'z', 'a'],
        left:0,
        selected:{
            'y':false,
            'z':false,
            'a':false,
            'x-bias':false,
            'y-bias':false,
            'z-bias':false,
            'a-bias':false
        }
    },
    xAxis: {
        type: 'category',//表示横坐标是目录模式，可伸缩
        data: xyza_time,//横坐标数据数组
        scale: true
    },
    yAxis: {
        type: 'value',
        scale: true,
        splitArea: {
            show: true
        }
    },
    dataZoom: [//目录模式所需要对应的设置，start,end表示初始化的范围，取值0-100
        {
            type: 'inside',
            start: 0,
            end: 100
        },
        {
            show: true,
            type: 'slider',
            top: '90%',
            start: 0,
            end: 100
        }],
    series: [
        {
            name: 'x',
            type: 'line',
            data: x,
            smooth: true
        },
        {
            name: 'y',
            type: 'line',
            data: y,
            smooth: true
        },
        {
            name: 'z',
            type: 'line',
            data: z,
            smooth: true
        },
        {
            name: 'a',
            type: 'line',
            data: a,
            smooth: true
        }
    ]
};

option && myChart.setOption(option);

以上代码可得到类似下列图像：