给视图中的echars图命名,并且在折线图边上显示出来

要给Echarts图命名并在折线图边上显示出来，可以采用以下步骤：

1. 在Echarts初始化时，指定图表的名称，例如：

var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption({
    title: {
        text: '销售额趋势图'
    },
    // 其他配置项
});

2. 如果要在折线图边上显示图表名称，可以设置grid的top值，并在x轴上方添加一个类似于表头的元素，例如：

myChart.setOption({
    title: {
        text: '销售额趋势图'
    },
    grid: {
        top: '20%',
        // 其他配置项
    },
    xAxis: {
        name: '日期',
        // 其他配置项
    },
    yAxis: {
        name: '销售额',
        // 其他配置项
    },
    series: [{
        type: 'line',
        name: '销售额',
        data: [120, 200, 150, 80, 70, 110, 130],
        // 其他配置项
    }],
    graphic: {
        elements: [{
            type: 'text',
            right: 'center',
            top: '5%',
            style: {
                text: '销售额趋势图',
                fontSize: 16,
                fontWeight: 'bold'
            }
        }]
    }
});

在这个例子中，设置了grid的top值为'20%'，并在x轴上方添加了一个文字元素，用于显示图表名称。

3. 如果需要在图表中使用多个系列，可以为每个系列指定一个名称，并将名称显示在折线图边上，例如：

myChart.setOption({
    title: {
        text: '销售额趋势图'
    },
    grid: {
        top: '20%',
        // 其他配置项
    },
    xAxis: {
        name: '日期',
        // 其他配置项
    },
    yAxis: {
        name: '销售额',
        // 其他配置项
    },
    series: [{
        type: 'line',
        name: '产品A',
        data: [120, 200, 150, 80, 70, 110, 130],
        // 其他配置项
    }, {
        type: 'line',
        name: '产品B',
        data: [80, 150, 90, 120, 160, 110, 100],
        // 其他配置项
    }],
    graphic: {
        elements: [{
            type: 'text',
            right: 'center',
            top: '5%',
            style: {
                text: '销售额趋势图',
                fontSize: 16,
                fontWeight: 'bold'
            }
        }]
    },
    legend: {
        top: '10%',
        data: ['产品A', '产品B']
    }
});

在这个例子中，为每个系列指定了一个名称，并使用legend配置项将名称显示在折线图边上。