玩转Echarts-使用Echarts开发过程中的配置项总结

本文将介绍自己在工作中遇到的小问题;每次遇到需要动态扩展的内容,都需要去查找官方文档,现将常用的几个API进行总结,便于后期查找使用。

legend:图例

配置项

默认值

其他值

效果图

type:类型 plain:普通图例

scroll:可滚动翻页的图例。默认横向滚动。

设置orient: 'vertical',实现纵向滚动

legend: { type: 'scroll', orient: 'vertical' },

legend: { type: 'scroll', bottom: 10 },

show:是否展示图例 true:默认展示 false:不显示图例
left/top/right/bottom图例距离容器的距离

auto 自适应

left: 'left''center''right'

top: 'top''middle''bottom'

eg: number:20; string: '20%'

formatter格式化图例文本

// 使用字符串模板,模板变量为图例名称 {name}

formatter: 'Legend {name}'

// 使用回调函数

formatter: function (name) {

return 'Legend ' + name;

}

legend: {
formatter: function (name) {
return 'Legend ' + name;
},
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},

 

tooltip:图例的tooltip

icon

'circle''rect''roundRect''triangle''diamond''pin''arrow'

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Delicia_Lani

你的鼓励将是我写作的动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值