echart 利用formatter和rich 给坐标轴添加自定义图片

最新推荐文章于 2024-04-08 18:04:02 发布
最新推荐文章于 2024-04-08 18:04:02 发布
阅读量9.3k 收藏 39
点赞数 14
文章标签： javascript echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c327127960/article/details/124046457
版权

先看效果
在这里插入图片描述

Y轴的值前面的这个皇冠和绿色的蓝色的圈都是自己的图

实现方法 （先上代码）

		var rankPic = {
            first: '../assets/clfx/icon_t1@2x.png',
            second: '../assets/clfx/icon_t2@2x.png',
            third: '../assets/clfx/icon_t3@2x.png',
            fourth: '../assets/clfx/icon_t4@2x.png',
            fifth: '../assets/clfx/icon_t5@2x.png',
            sixth: '../assets/clfx/icon_t6@2x.png',
            seventh: '../assets/clfx/icon_t7@2x.png',
            eighth: '../assets/clfx/icon_t8@2x.png',
        }
        var data1 = [
            {
                id: 1,
                rank: 1,
                title: '第一名第一名第一名第一名',
                count: 9000
            },
            {
                id: 2,
                rank: 2,
                title: '第二名第二名',
                count: 8500
            },
            {
                id: 3,
                rank: 3,
                title: '第三名',
                count: 7500
            },
            {
                id: 4,
                rank: 4,
                title: '第四名',
                count: 7000
            },
            {
                id: 5,
                rank: 5,
                title: '第五名',
                count: 6000
            },
            {
                id: 6,
                rank: 6,
                title: '第六名',
                count: 5500
            },
            {
                id: 7,
                rank: 7,
                title: '第七名',
                count: 5000
            },
            {
                id: 8,
                rank: 8,
                title: '第八名',
                count: 4000
            },
        ]
        var dataTitle = data1.map(item => {
            return item.title
        })

        //柱状图1
        var histogramChart1 = echarts.init(document.getElementById('histogram1'));
        option = {
            title: {
                text: '长期积压（未借出）机具金额排名前10的机具金额',
                left: 'center',
                top: '24',
                textStyle: {
                    color: '#00FFF4',
                    fontSize: 16
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                show: false
            },
            grid: {
                left: '-25%',
                right: '7%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                show: false,
                type: 'value',
                boundaryGap: [0, 0.01],
                axisTick: {       //轴刻度线
                    show: false
                },
                splitLine: {     //网格线
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                inverse: true,
                axisLabel: {
                    margin: 180,
                    textStyle: {
                        align: 'left'
                    },
                    formatter: function (value) {
                        return '{' + value + '|} {s|' + dataTitle[value - 1] + '}'
                    },
                    rich: {
                        1: {
                            height: 20,
                            align: 'center',
                            backgroundColor: {
                                image: rankPic.first
                            }
                        },
                        2: {
                            height: 20,
                            align: 'center',
                            backgroundColor: {
                                image: rankPic.second
                            }
                        },
                        3: {
                            height: 20,
                            align: 'center',
                            backgroundColor: {
                                image: rankPic.third
                            }
                        },
                        4: {
                            height: 20,
                            align: 'center',
                            backgroundColor: {
                                image: rankPic.fourth
                            }
                        },
                        5: {
                            height: 20,
                            align: 'center',
                            backgroundColor: {
                                image: rankPic.fifth
                            }
                        },
                        6: {
                            height: 20,
                            align: 'center',
                            backgroundColor: {
                                image: rankPic.sixth
                            }
                        },
                        7: {
                            height: 20,
                            align: 'center',
                            backgroundColor: {
                                image: rankPic.seventh
                            }
                        },
                        8: {
                            height: 20,
                            align: 'center',
                            backgroundColor: {
                                image: rankPic.eighth
                            }
                        },
                    }
                },
                data: data1.map(item => item.rank),
                axisTick: { //轴刻度线
                    show: false
                },
                splitLine: { //网格线
                    show: false
                },
                axisLine: { //y轴线
                    show: false
                }
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    data: [9000, 8500, 7000, 6500, 6000, 5500, 5000, 4500],
                    label: {
                        show: true,
                        position: "right",
                        color: "#fff"
                    },
                    barWidth: 17,
                    itemStyle: {
                        emphasis: {
                            barBorderRadius: 7
                        },
                        normal: {
                            barBorderRadius: 7,
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    { offset: 0, color: '#0F87FA' },
                                    { offset: 1, color: '#00C0FE' }

                                ]
                            )
                        }
                    }
                }
            ]
        };
        histogramChart1.setOption(option)

代码完整 最上面的rankPic 也就是图片地址自行替换，复制即可看到效果

再解释一下什么意思，说实话官方文档没找到，只能自己慢慢试出来

首先说一下这个formatter 可以写成函数形式，自定义y轴的内容

比如： 你想在y轴每个值的后面都加一个单位 ‘m’ 可以写成

formatter: function (value) {
	return value + 'm'
}

这个formatter函数里面的value值就是y轴的值，也就是 yAxis 对象中的 data值

比如你的y轴的值是 [5, 10, 15, 20, 25, 30]

你想给每个数的后面加一个 单位 米

就可以写成

formatter: function (value) {
	return value + '米'
}

echart会帮我们自动遍历每一个y轴的值 所以并不需要在里面写循环函数

知道了formatter函数的作用 下面再说一下插入自定义图片的另一个重要属性 rich

rich 富文本

看了官网的案例 应该是 rich 里面的值的 key 如果 和 y 轴的值相等 就可以关联到当前key值对应的value中的 backgroundColor 从而完成 插入图片的功能 (有点绕口)

展开说说

如果你的y轴 是 [‘hello’, ‘world’]

此时rich 如果写成

 rich: {
      hello: {
          height: 20,
          align: 'center',
          backgroundColor: {
              image: '图片地址'
          }
      },
      world: {
          height: 20,
          align: 'center',
          backgroundColor: {
              image: '图片地址'
          }
      	}
     }

这样 y 轴就会关联到 rich 中的图片

但前提是你的formatter函数 要写成如下

 formatter: function (value) {
        return '{' + value + '| }\n{value|' + value + '}';
      }

这是官网的案例

我只能猜测 这个 ｜ 在 value 前后的应该是控制 图片和文字位置的，如果value｜ 代表 图片 如果是xx| 接 value应该是
文字，也就是value 的值 （只是猜的 没看到官网的说明）但确实，如果写成

 formatter: function (value) {
        return '{value|' + value + '}\n{' + value + '|}'
      }

这样的话就是文字在前，图片在后

之前说了 value 的值 就是 y轴定义的 data 这里是 [‘hello’, ‘world’]

如果 rich 中的两个属性的 key 值分别是 hello 和 world 那么 在y 轴 的后面就会 接上 你自定义的图片

但是官网案例是将y轴的值 和 rich 的key 值写的一样，实际开发中这样肯定不灵活，数据一定会从后台返回的数组或json中取

我的解决方案是

首先定义一个y轴值的数组

var data1 = [
            {
                id: 1,
                rank: 1,
                title: '第一名第一名第一名第一名',
                count: 9000
            },
            {
                id: 2,
                rank: 2,
                title: '第二名第二名',
                count: 8500
            },
            {
                id: 3,
                rank: 3,
                title: '第三名',
                count: 7500
            },
            {
                id: 4,
                rank: 4,
                title: '第四名',
                count: 7000
            },
            {
                id: 5,
                rank: 5,
                title: '第五名',
                count: 6000
            },
            {
                id: 6,
                rank: 6,
                title: '第六名',
                count: 5500
            },
            {
                id: 7,
                rank: 7,
                title: '第七名',
                count: 5000
            },
            {
                id: 8,
                rank: 8,
                title: '第八名',
                count: 4000
            },
        ]
		var dataTitle = data1.map(item => {
            return item.title
        })

将title单独提取出来生成一个新数组

但是你会发现我上面 y轴 data的值并不是用的 title 属性 而是用的 rank 属性 却又能显示 title 的值是为什么呢

因为首先y 轴的值会影响到 formatter函数的参数，但这个参数必须和rich中的key值相同 才能获取到对应属性值的
backgroundColor，但key值不可以是中文，所以只能用 rank 数字来赋值，但是这样的话 y轴的值就不对了，本来应该是 title的值，但现在变成的rank 的值，所以可以通过索引去获取，这也是我将数组中每个对象的title单独提取出来组成新数组的原因，因为title的索引值等于对应的 rank - 1

这样在formatter函数中，我就可以利用 索引和rank 的值 给value 赋值 dataTitle[value -1]

我感觉应该还有更好的解决方案，如果大神们有更好的方案，可以评论一下，总感觉我这个方法还是有点冗杂

鸡汤辉
关注
  • 14
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
Echarts定制化Y轴，将其设置为图片
栗子的博客
09-21 530
vue3+setup 实现EchartsY轴定制化
xcpretty-travis-formatter:TravisCI 的 xcpretty 自定义格式化程序
05-30
XCPretty TravisCI 格式化程序 自定义格式化程序，带有一些语法糖，用于在 TravisCI 上进行演示。 。 “构建”、“清理”和测试阶段部分是分开折叠的，但最终完成消息和失败的测试会清楚地显示出来，以便更快地扫描。 安装 此格式化程序通过 RubyGems 分发，并且依赖于xcpretty >= 0.0.7（引入自定义格式化程序时）的版本。 跑步： gem install xcpretty-travis-formatter 用法 将xcpretty-travis-formatter指定为xcpretty-travis-formatter的自定义格式化xcpretty ： #! /bin/bash xcodebuild | xcpretty -f ` xcpretty-travis-formatter ` 这个怎么运作 --formatter选项将文件路径作为参数，
e-charts自定义柱状图
Bonjours的专栏
12-24 1676
先看完成效果，是这样子的： 可以说把默认的e-charts柱状图改的7788了。 罗列出来以下几点： 1、去掉y轴（刻度值的）刻度线 2、去掉y轴（刻度值的）边框 3、改变柱状图颜色为渐变色 4、tooltip显示横坐标的值（数字）+横坐标单位（月） 5、自定义tooltip左侧小圆点 6、xy轴文字属性设置 7、y轴分割线颜色（与x轴等长的横向刻度线颜色） 8、修改x轴（...
echarts条形图Y轴文字前面加小图标
最新发布
u011233151的博客
04-08 165
首先准备三个图片的pn文件，引入文件。然后Y轴配置的地方使用引入。
vue中echarts柱状图不同系列的同一背景实现、坐标轴刻度标签自定义图片实现
一个希望世界和平的前端程序猿的博客
12-20 582
echarts柱状图不同系列的同一背景实现、坐标轴刻度标签自定义图片实现
Echarts Y轴自定义设置图片
Teemo_shape的博客
12-13 421
如图Y轴有文字和图片，1-3的图片不同，后面的是特定的css 样式；
echarts rich设置动态图片/动态数据；echarts 人均收入柱状图 window系统显示不出国旗；echarts动态rich
mrliucx的博客
03-25 3487
一、echarts 人均收入柱状图window系统显示不出国旗问题分析 1.如下图所示：该柱状图在window下面只显示emoji 字符，能不能转化完全看系统支不支持 2.图中的国家标识是以emoji字符来命名，但是在苹果电脑下面显示会出现对应国家的国旗图标 二、让苹果电脑的效果在windows下面显示同样的效果 大概想法通过rich动态匹配显示对应国家的国旗（包括全世界国家对应的中英文以及编码的js、包括全世界国家的编码以及唯一标识的js、以唯一标识命名的图片列表） 注意：目前通过对比js了解到加拿大
echarts设置特殊背景的几种方法
奶牛纯牛蒙的博客
03-24 1567
echarts记录
echarts 圆图带图片显示
weixin_43856422的博客
12-12 3067
直接先上效果图 自我认为的难点分析 1. legend的图片显示 查找了很多的资料，和官方文档，图片选用本地地址出不来，所以我选择base64格式图片，通过转换png得到，通过 itemWidth修改icon宽 itemHeight修改icon高 ，itemGap:修改两个icon距离。 2. legend的echart图上图片显示 2.1直接上代码 formatter:function(...
echarts 折线图y轴自定义 使用icon
emoji111111的博客
06-28 1761
echarts 折线图y轴自定义 使用icon
echarts 使用地图，设置背景图片和高亮图片，点击实现高亮显示，更换散点图图片，高亮散点图形，3D悬浮效果展示地图，集成Vue组件
别人笑我太疯癫 我笑他人看不穿 流水落花春去也 游戏人间
09-30 1万+
echarts 使用地图，设置背景图片和高亮图片，点击实现高亮显示，更换散点图图片，高亮散点图形，3D悬浮效果展示地图，集成Vue组件
Matplotlib自定义坐标轴刻度的实现示例
12-17
虽然 Matplotlib 默认的坐标轴定位器（locator）与格式生成器（formatter）可以满足大部分需求，但是并非对每一幅图都合适。此次我将通过一些示例演示如何将坐标轴刻度调整为你需要的位置与格式。 在介绍示例之前，我们最好先对 Matplotlib 图形的对象层级有更深入的理解。Matplotlib 的目标是用 Python 对象表现任意图形元素。例如，想想前面介绍的 figure 对象，它其实就是一个盛放图形元素的包围盒（bounding box）。可以将每个 Matplotlib 对象都看成是子对象（sub-object）的容器，例如每个 figure 都会包含一个或多个 a
echarts的axisLabel添加tooltip功能
09-12
echarts插件默认不支持axisLabel的tooltip功能，本demo主要展示axisLabel新增tooltip后的显示效果。有不懂，可以联系我。
jsonformatter:jsonformatter 是python 的格式化程序，可以轻松输出自定义的json 日志，例如输出LogStash 所需的日志
05-30
jsonformatter -- 用于 python 日志 json jsonformatter是python 输出json 日志的格式化程序，例如输出LogStash所需的日志。 轻松自定义（添加/替换） LogRecord属性，例如在Flask Web 项目中，将username属性添加到LogRecord以自动输出用户名。 从 0.2.X 版本开始支持Python 2.7和python 3 ，如果您使用的版本低于 0.2.X，则仅支持python 3 。 安装 jsonformatter 在 PyPI 上可用。 使用pip安装： $ pip install jsonformatter 或者： $ git clone https://github.com/MyColorfulDays/jsonformatter.git $ cd jsonformatter $ python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
01-20
1.横坐标设置时间格式 import matplotlib.pyplot as plt import matplotlib.dates as mdates # 配置横坐标为日期格式 plt.gca().xaxis.set_major_formatter(mdates.DateFormatter('%Y/%m/%d')) plt.gca().xaxis.set_major_locator(mdates.DayLocator()) 例子: from datetime import datetime import matplotlib.dates as mdates import matplot
Highcharts学习之坐标轴
12-12
前言 所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。 下面一起来学习学习Highcharts的坐标轴。 tags: 1.标题 xAxis:{ title:{ text:'x轴标题' } } yAxis:{ title:{ text:'y轴标题' } } 2.标签 labels:enabled、formatter、setp yAxis:{ labels:{ enable
JavaScript格式化日期时间的方法和自定义格式化函数示例
12-10
很多时候，我们可以利用JavaScript中Date对象的内置方法来格式化，如： 代码如下:var d = new Date();console.log(d); // 输出：Mon Nov 04 2013 21:50:33 GMT+0800 (中国标准时间)console.log(d.toDateString()); /...
e-charts 使用rich（富文本）图片位置不对，记录
Humor_L的博客
06-01 737
如果想要x轴显示数值，y轴显示图片为坐标，xAxis和yAxis的type代表如何显示。最好要给图片设置height，width，不然会出现首次加载图片位置不对的错误。最好要给图片设置height，width，不然会出现首次加载图片位置不对的错误。最好要给图片设置height，width，不然会出现首次加载图片位置不对的错误。引入需要用的图片（目前这种引入比较好用）if(value==='行政'){为rich中定义的图片。
echarts坐标轴添加图片
热门推荐
A_Runner的博客
09-29 1万+
“水精帘动微风起，满架蔷薇一院香” 先上图，看结果： 如上图，4月和7月下有个红色图片，那是预警的。 需求是这样的：如果这个月的办理量比上个月降了50%就需要预警，也就是环比预警。 所以，那该如何在横轴下面加个图片呢？ 先参考官方案例： 富文本标签 我这里是这样的处理的，现在后台java中处理好，哪个月需要预警，就给这个月名字中加上“warn”，然后在js里面判断，哪些月份是要预警的： 这是j...
echart 利用formatter和rich 给坐标轴添加自定义图片,给出echarts示例
06-06
好的，以下是一个使用 ECharts 中 formatter 和 rich 给坐标轴添加自定义图片的示例： ```javascript option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel: { formatter: function(value, index) { // 自定义 formatter，用 rich 给文字添加图片 if (value === 'Sat') { return '{a|' + value + '}\n{b|<img src="./img/sat.png"/>}'; } else if (value === 'Sun') { return '{a|' + value + '}\n{b|<img src="./img/sun.png"/>}'; } else { return '{a|' + value + '}'; } }, rich: { a: { // 普通文字样式 color: '#333', fontSize: 14 }, b: { // 图片样式 height: 20, align: 'center', padding: [0, 5, 0, 5] } } } }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; ``` 在上述示例中，我们通过 `formatter` 和 `rich` 分别实现了自定义坐标轴标签的文字和图片样式。其中，`formatter` 函数中对 `Sat` 和 `Sun` 的判断实现了只在这两个标签上添加自定义图片的效果，`rich` 中则分别定义了文字和图片的样式。图片的路径可以根据实际情况进行修改。 希望这个示例能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值