ECHART 格式化图例

最新推荐文章于 2025-01-10 21:46:08 发布

console__

最新推荐文章于 2025-01-10 21:46:08 发布

阅读量425

点赞数

分类专栏：日常代码文章标签： elasticsearch js

本文链接：https://blog.csdn.net/console__/article/details/115388580

版权

日常同时被 2 个专栏收录

15 篇文章

订阅专栏

代码

1 篇文章

订阅专栏

这篇博客展示了如何创建一个堆叠区域图，用于显示不同渠道（如银行转账、金融渠道和刷卡）的流量占比。通过ECharts库，详细解释了配置项如tooltip、legend、toolbox和series，以实现数据的可视化表达，便于理解各渠道在一周内的贡献比例变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        orient:'vertical',
        formatter: function (name) {
            console.log(name
              .split(" ").filter(i=>(i))
              .map((i, index) => {
                return "{" + index + "|" + i  + "}";
              })
              .join(""))
           return name
              .split(" ").filter(i=>(i))
              .map((i, index) => {
                return "{" + index + "|" + i  + "}";
              })
              .join("");
        },
        textStyle: {
            rich: {
              0: {
                width: 90,
              },
              1: {
                width: 90,
              },
            },
          },
        // data: ['邮件12%  营销', '联盟广 30%告', '视32频广告', '直接访问', '搜索引擎']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '银行转账 48.88% 21.957',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '金融渠道 28.17%        1704',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '刷卡 21.54% 8989',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
        },
       
    ]
};