echarts的legend 将图形与文字叠在一起

要将图形和文字叠在一起，可以使用 echarts 的 `formatter` 属性。可以在 `legend` 中设置 `formatter` 属性来自定义图例的显示内容。

例如，以下代码可以将图例的文字和相应的图形叠在一起：

legend: {
    data: ['图例1', '图例2', '图例3'],
    formatter: function (name) {
        return '<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background-color:' 
               + colorList[this.indexOfName(name)] + ';margin-right:5px;"></span>' + name;
    }
},

在上面的代码中，`formatter` 属性是一个函数，它返回一个 HTML 字符串。这个字符串包含一个 `<span>` 元素和图例的名称。`<span>` 元素中的样式指定了图例的图形，例如圆形或方块，并将其与图例的名称分隔开。`colorList` 是一个包含图例颜色的数组，可以通过 `indexOfName` 方法获取当前图例的索引。

相关问题

e-charts堆叠折线图

eCharts是一个非常流行的JavaScript图表库，它支持多种图表类型，包括堆叠折线图。堆叠折线图是一种用于展示数据序列变化的图表，不同系列的数据会被堆积在一起，形成一条条折线。每条折线代表一个系列，总值会由各部分累加得出。例如，在财务报告中，你可以用堆叠折线图来显示每个部门的收入和支出随时间的变化。

在eCharts中创建堆叠折线图的步骤大致如下：
1. 引入ECharts库和所需的API模块（如`echarts.init`、`echarts.setOption`等）。
2. 创建一个图表实例并设置其大小。
3. 定义数据，并确定系列的颜色、标记点等属性。
4. 使用`setOption`方法配置选项，包括图形类型（`type: 'line'`）、堆叠模式（`stack: true`）以及数据（`series`数组）。
5. 渲染图表。

下面是一个简单的堆叠折线图配置示例：

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

// 堆叠折线图配置
var option = {
    title: {
        text: '堆叠折线图示例'
    },
    tooltip: {},
    legend: {
        data: ['销售额', '成本']
    },
    xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月']
    },
    yAxis: {},
    series: [
        {
            name: '销售额',
            type: 'line',
            stack: '总量',
            data: [50, 60, 70, 80, 90, 100]
        },
        {
            name: '成本',
            type: 'line',
            stack: '总量',
            data: [40, 45, 43, 55, 50, 60]
        }
    ]
};

chart.setOption(option);