2使用Echarts绘制图表。①绘制两条折线图顶部居中显示主标题显示图例曲线平滑。②x坐标轴显示商品名称y坐标轴显示销售额；图形美观无文字溢出。

下面是使用Echarts绘制两条折线图的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Echarts折线图</title>
    <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 400px; margin: 0 auto;"></div>
    <script>
        // 模拟数据
        var data = [
            { name: '商品A', sales: [120, 200, 150, 80, 70, 110] },
            { name: '商品B', sales: [80, 90, 120, 100, 150, 130] }
        ];

        // 创建图表实例
        var chart = echarts.init(document.getElementById('chart'));

        // 设置图表配置项
        var option = {
            title: {
                text: '商品销售额',
                top: 'top',
                left: 'center'
            },
            legend: {
                data: ['商品A', '商品B'],
                top: 'bottom'
            },
            xAxis: {
                type: 'category',
                data: data.map(function(item) { return item.name; }),
                axisLabel: {
                    interval: 0,
                    rotate: 45
                }
            },
            yAxis: {
                type: 'value'
            },
            series: data.map(function(item) {
                return {
                    name: item.name,
                    type: 'line',
                    smooth: true,
                    data: item.sales
                };
            })
        };

        // 渲染图表
        chart.setOption(option);
    </script>
</body>
</html>

在上述代码中，我们使用了Echarts的折线图类型（line）。通过设置title属性的text、top和left属性来设置主标题的文本和位置。通过设置legend属性的data和top属性来设置图例的数据和位置。通过设置xAxis属性的type为category来设置x坐标轴的类型为类目型，data属性设置x坐标轴的数据。通过设置yAxis属性的type为value来设置y坐标轴的类型为数值型。通过设置series属性来设置数据系列，包括名称、类型、平滑曲线和数据。

在示例代码中，我们使用了模拟数据来展示两个商品的销售额。你可以根据实际情况替换为自己的数据。通过调整chart的width和height属性来设置图表的宽度和高度，通过调整axisLabel的interval和rotate属性来控制x坐标轴的标签显示间隔和旋转角度，以使图形美观且无文字溢出

2使用Echarts绘制图表。①绘制两条折线图顶部居中显示主标题显示图例曲线平滑。②x坐标轴显示商品名称y坐标轴显示销售额；图形美观无文字溢出。