关于echarts

本文介绍如何在ECharts中配置鼠标悬停时显示百分比及单位的方法,并提供了一个示例代码,展示了tooltip的配置方式,包括显示百分比、换行等细节。

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

好久没更新啦 最近在努力工作  当然工作上也会遇到大大小小问题 比如来了 

鼠标经过echarts 图表时  让显示百分比 以及 单位

那么  我也是搜了很多资料才想到该怎么写 下面我把代码展示上来

//  解释一下 {a}{b}{c}{d} 
 Option.tooltip = {
                        // 是否展示
                        show: true,
                        // 提示信息
                        //% 也就会显示出百分比 然后如果想加换行  就'<br>' 记得用 + 号隔开哦
                        formatter: '{b}' + ':' + '({c}%)' + 'km²',
                        // 指示器样式
                        trigger: 'item',  //这个可以是'item'  'axis'
                    },

    


折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)

散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)

地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)

饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

以上就是解释 {a}{b}{c}{d}

还有就是让echarts 显示图例 

legend: {
	show: true, // 是否显示图例
    type: 'scroll', // 可滚动翻页的图例。当图例数量较多时可以使用。
    orient:'horizontal', // 图例列表的布局朝向。
    left: '0%', // 图例组件离容器左侧的距离。
    top: '0%', // 图例组件离容器上侧的距离。
    itemWidth: 8, // 图例标记的图形宽度。
    itemHeight: 8, // 图例标记的图形高度。
    textStyle: { // 图例的公用文本样式。
      color: '#333333',
      fontSize: 12
    },
    icon: 'rect' // 图例项的 icon。
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值