echart设置将图例文字放置在图例图标icon中

本文介绍了如何使用ECharts将图例的文字放置在图例的图标内部,通过调整配置项legend,实现了图例文字与图例图标的一体化展示。示例代码和ECharts官方文档链接提供了详细实现方法。
摘要由CSDN通过智能技术生成

将图图表的图例设置如图所示,将图例文字放置在图例图标中。

原图图表是这样的:https://echarts.apache.org/examples/zh/editor.html?c=line-stack

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', 
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ECharts ,可以通过 `legend.textStyle` 和 `legend.itemStyle` 分别设置图例文字的样式和图例项的样式。以下是一个示例: ```javascript option = { // ... 其他配置项 legend: { data: ['图例1', '图例2', '图例3'], textStyle: { color: '#333', // 设置图例文字颜色 fontSize: 14, // 设置图例文字大小 fontWeight: 'bold' // 设置图例文字加粗 }, itemWidth: 20, // 设置图例项宽度 itemHeight: 10, // 设置图例项高度 itemGap: 20, // 设置图例项之间的间隔 itemStyle: { borderColor: '#ccc', // 设置图例项边框颜色 borderWidth: 1, // 设置图例项边框宽度 borderRadius: 5, // 设置图例项边框圆角 shadowColor: 'rgba(0, 0, 0, 0.5)', // 设置图例项阴影颜色 shadowBlur: 10, // 设置图例项阴影模糊度 shadowOffsetX: 0, // 设置图例项阴影 X 方向偏移量 shadowOffsetY: 0, // 设置图例项阴影 Y 方向偏移量 color: ['#c23531', '#2f4554', '#61a0a8'] // 设置图例项颜色 } }, // ... 其他配置项 }; ``` 在 `legend.itemStyle` ,可以使用 `color` 属性设置图例项的颜色,可以传入一个数组来设置每个图例项的颜色。如果需要设置单独的图例项颜色,可以在 `series` 指定每个数据项的 `itemStyle` 属性,例如: ```javascript option = { // ... 其他配置项 series: [{ name: '图例1', type: 'line', data: [10, 20, 30, 40, 50], itemStyle: { color: '#c23531' // 设置该数据项的颜色 } }, { name: '图例2', type: 'line', data: [20, 30, 40, 50, 60], itemStyle: { color: '#2f4554' // 设置该数据项的颜色 } }, { name: '图例3', type: 'line', data: [30, 40, 50, 60, 70], itemStyle: { color: '#61a0a8' // 设置该数据项的颜色 } }] // ... 其他配置项 }; ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值