ehcarts 柱状图x轴坐标值改为图片

news/2024/7/24 8:39:18

需求

方法:

1参考网站:http://www.echartsjs.com/gallery/editor.html?c=bar-rich-text&theme=dark

代码:x坐标值设置,尤其是


图片路径提前设置好


xAxis: {
            type: 'category',
            show: true,
            data: ['Line', 'Bar', 'Scatter', 'Ka', 'Pie', 'Radar', 'Chord', 'Force'],
            axisLabel: {
            formatter: function (value) {
                return '{'+ value + '| }';
            },
            rich: {
                Line: {
                    width: 25,
                    height:25,
                    align: 'top',
                    backgroundColor: {
                        image: schlogoIcon.schlogo1
                    }
                },
                Bar: {
                    width: 25,
                     height:25,
                    align: 'top',
                    backgroundColor: {
                        image: schlogoIcon.schlogo2
                    }
                }
            }
        }

    }

小插曲,我同一页面有做换环形图和柱状图,所以文件有冲突图片一直报错。


http://www.niftyadmin.cn/n/1529053.html

相关文章

wow.js使用

参考:https://www.cnblogs.com/xgxm13/p/7667296.html wow.js依赖animate.css,不需要jquery;animate.css是纯css动画 官网:http://mynameismatthieu.com/WOW/ 建议去官网一看 bootstrap CDN服务:http://www.bootcdn.…

选择框可以同时输入和选择选项

<li> <p class"address">校区</p> <div class"addresschoice"> <span class"addressel"> …

OwlCarousel使用

参考&#xff1a;http://www.jq22.com/jquery-info6010 使用方法 Owl Carousel 2是上一版Owl Carousel的升级版本。Owl Carousel 2可以让你创建漂亮的响应式旋转木马的jQuery插件&#xff0c;它支持移动触摸屏&#xff0c;功能十分强大。Owl的新特性有&#xff1a; 可以无限循…

百度地图标注

for(i0;i<循环次数;i){var markernew BMap.Marker(Point对象);//创建标注var html你自己的html;var infoWindow new BMap.InfoWindow(html);//创建窗口信息marker.infoWindowinfoWindow;//给当前标注新增一个属性以便保存窗口信息infoWindowmarker.addEventListener("…

html页面video标签

1.video标签禁止下载 将属性改为controls"true" controlslist"nodownload"即可实现 2.禁止自动播放 html代码如下&#xff1a; <video width"500" height"300" controls"controls" poster"../images/test.png&q…

css控制文字超出部分

CSS控制文字&#xff0c;超出部分显示省略号 http://www.daqianduan.com/6179.html <p style"width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellips…

HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

原链接&#xff1a;https://www.cnblogs.com/libaoli/p/5779629.html 作者&#xff1a;请叫我阿力 这几天都在修改博客上面的样式。本来用的是d83.0的模板。自己又修改了许多地方&#xff0c;其中自己修改的一些地方在手机里面显示的效果不是很理想&#xff0c;于是想改成自适…

小程序开发小游戏注意事项

原文&#xff1a;https://blog.csdn.net/weixin_41326021/article/details/80969811 今天研究小游戏开发&#xff0c;总结了一些自己遇到的问题 : 一. 注册appId 用小程序开发的小游戏跟用小程序开发其他项目不是公用的一个appId 如果你现在的小程序账号已经选了别的类目&am…