首页 前端知识 echarts折线柱状图等legend图例,自定义为图片或者设置为复选框多选框checkbox的样式

echarts折线柱状图等legend图例,自定义为图片或者设置为复选框多选框checkbox的样式

2024-05-29 10:05:47 前端知识 前端哥 288 633 我要收藏

echarts折线柱状图等legend图例,自定义为图片或者设置为复选框多选框checkbox的样式
中心思想,想要把lengend图例设置为复选框checkbox那样的样式,直接设置是行不通的,只有通过设置为选中图片,未选中的图片;我们需要把复选框的两种选中未选中的复选框切成图片,然后把图片转为 64位的,就可以实现了
在这里插入图片描述

下面是复选框的两类情况的 64的图片,因为我的项目中基本上都是用的这个,所以专门用了一个js文件存放,你们在用的时候可以直接复制相关信息即可

const icon = {
  checked:  //复选框选中样式图片65位
    "image://data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAHXSURBVDhPY2CQdPtPNQwmpNz/85hl/tes3fPfYtGL/5bL3+HHy97+N5p8/b9EcPd/RmlPVMO4DJP/67Qe+2+/5d9/+63/icNAtRaLXv4XD+pENUzIteq/7brv2DWhYeftEAxi223+81+zfj+qYcIedRiasGGnbf/+L7j19//Ma3/+20F9odN2nHTDHIC48tTf/19//v3ff/YL0FV/weJkGRa+99//B5/+/j/6+Nt/5w1fiXeZGzBM/Hb9/+8CDRv37f/+b7j/9//TT7/+x+/8CDcIhAkalnjw7/8Z1/7+zz/2978r0KDGs3//v/oG9N7pj/9tN/1CUYvXMJCtcXt//t//6Mf/I8/+/G89//f/tXf//u+9//W/x6ZvKK4iaBgYb/r9P+/A5/9nn/8Ah9Pddz//p+/5jDUdEhUBjkDvlB789P/A/S//O098/O+8BdV7MEyUYSDstOnn/9hdQO9tBiZoLK4CYQzDhNyq/9tu+IlVsd0WYHrCYRAorWk1HkQ1jMcs47/BhEtYNeDDVsBMLxM7DdUwJjkfcP406LuA04UoGOhSi8Uv/8unzv/PohKMahgIM8p4/mdRCvzPqhYKxGGEsWrIfyZ5X4RByIZRBWMVJAu7/QcA5TtU0Ee8qOUAAAAASUVORK5CYII=",
  normol: //复选框未选中样式图片65位
    "image://data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAATABMDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDN8N6PpraBbzy2UM0soLM0qBu+O9aEmjaaY2B0yzwR/DCAfzpnhOSOXw7aBXDGMEMAehya2XKLGxc7QAck9BX1MFHkWh8hWnU9q9XueMSlVmdQMAMePSiluUH2qXD7hvOCOh560V5j3PolawgJHQkUbm9T+dFFACUUUUAf/9k="
};

export default icon;

下面就是在legend中的配置

legend: {
          data: ["A相", "B相", "C相"],
          textStyle: { color: "white" },
          x: "middle",
          padding: [10, 50, 0, 0]
        },
        icon:icon.checked//初始状态默认选中样式

下面就是切换点击了

var myChart = echarts.init(this.$refs["jyxn_qtYL"]);
myChart.setOption(option, true);
   //点击切换icon
myChart.on("legendselectchanged", function(obj) {
	var selected = obj.selected;
	if (!selected.A) {
   		option.legend[0].data[0].icon = icon.normol;
	}
	myChart.setOption(option);
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10012.html
标签
评论
发布的文章

使用 mapstructure 解析 json

2024-06-05 13:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!