2、使用echarts绘图

ECharts是一个强大的JavaScript图表库，由阿里巴巴团队开发，用于创建各种交互式数据可视化图表。使用ECharts绘图主要包括以下几个步骤：

1. 引入ECharts库：首先需要在HTML文件中引入ECharts的JS文件以及对应的样式文件。

<script src="path/to/echarts.min.js"></script>
<link rel="stylesheet" href="path/to/echarts.css">

2. 创建图表容器：在HTML中创建一个div元素作为图表容器，并设置其id，后续将通过这个id引用图表。

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

3. 初始化图表：在JavaScript中，使用`echarts.init()`方法初始化图表实例，传入容器id。

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

4. 定义图表配置：根据需求，设置图表的基本信息，如图表类型（柱状图、折线图、饼图等）、数据源、标题、坐标轴等。

var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {},
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'bar', // 曲线图
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
};

5. 渲染图表：最后，调用`myChart.setOption(option)`方法将配置渲染到图表上。

myChart.setOption(option);