echarts 折线图 直线

ECharts是一个强大的JavaScript图表库，它提供了丰富的图表类型，包括折线图和直线图。折线图（Line Chart）通常用于展示数据随时间变化的趋势，而直线图（Line）在ECharts中可能指的是简单的一维数据展示，但ECharts通常将其视为折线图的一种特殊情况，没有单独的直线图类型。

使用ECharts创建折线图的基本步骤如下：

1. **初始化图表**：首先，你需要引入ECharts库，并在HTML中创建一个canvas元素作为图表容器。

<canvas id="main" style="width: 600px;height:400px;"></canvas>

2. **配置选项**：在JavaScript中，你可以设置图表的数据、系列、标题等配置信息。例如，创建一个简单的折线图：

var myChart = echarts.init(document.getElementById('main'));

// 数据
var data = [820, 934, 901, 930, 1290, 1330, 1320, 1370, 1350, 1380];

// 配置项
var option = {
    title: {
        text: '折线图示例'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'line', // 设置为折线图
        data: data
    }]
};

// 渲染图表
myChart.setOption(option);

对于直线图，如果你只是想显示一维数据，可以去掉`xAxis`和`series`中的时间或分类信息，只保留`yAxis`和`data`部分。