Echarts可视化教程（三）——折线图的绘制第1关：折线图的绘制

ECharts是一个强大的JavaScript数据可视化库，用于创建交互式图表。折线图是其中的基础图形之一，常用于展示数据随时间变化的趋势。要开始绘制折线图，首先需要准备一些基本配置项。以下是绘制折线图的简单步骤：

1. 引入ECharts库：在HTML文件中引入ECharts的CDN链接，如：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>

2. 创建一个绘图区域（div）：在HTML中为图表预留一个容器，例如：

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

3. 初始化ECharts实例：在JavaScript中，获取这个容器并初始化ECharts实例，设置数据和配置选项：

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

// 定义数据，这里是简单的二维数组，第一维代表x轴数据，第二维代表y轴数据
var data = [
    {year: '2016', value: 3},
    {year: '2017', value: 4},
    {year: '2018', value: 5},
    {year: '2019', value: 4.9},
    {year: '2020', value: 6}
];

// 折线图的基本配置
var option = {
    title: {
        text: '折线图示例'
    },
    xAxis: {
        type: 'category',
        data: data.map(item => item.year) // x轴标签
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'line', // 设置为折线图
        data: data.map(item => item.value)
    }]
};

// 绘制图表
myChart.setOption(option);