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

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);
}