Echart 自定义拐点 自定义图例。以及图例与拐点不一致

1.自定义拐点：

   showSymbol: false,
          symbolSize: 26,
          symbol: 'circle',   //可以写官方文档里磨人的 也可以写自定义图片， 如果自定义图片失效 请查看 html5分类  图片失效文章
          //拐点球配置
          itemStyle: {
            normal: {
              color: color[index][2],
              shadowColor: color[index][2],
              shadowBlur: 10,
            },
          },

2.自定义图例

 const symbol=[
      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAcCAYAAAFKV+zSAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAPKADAAQAAAABAAAAHAAAAABKHsZYAAADRElEQVRYCeVYPY8TQQz1bIJoKNB1oEOCHAVClDQgSigOhQ7xA0CCjp6Ojp4OJPgFdJyggBJBQ4nQFVw46VZHhyhoTpAMfpvzxpnMrmezK4LESMl4xh4/2/PlWSJdvvq7hF+0gDHyvvgpoSwqrDr7JX3GPWX1ZVMIJwTt+TX6TTdpwv8b7jn6Z0xgSxm4or8We4br6J4MrK6BrV0E3K7fj8XDMWOTjXxVra0JZ8ffLpAkuFKrIIu6WTSkB/XI3+I4HS+7xvSJzrr3ZfuQWBw8RRiSpxulcI/us2sHhMlSJR5qPRDCY3qsxpSkKxZN2WxE5IvS4TTVBCxu9qLKaM9sBWl2bDVN6LMWAb0Y7VAC7R0/pIxOxljRvtP0jJwbR3mHnTbwbL3MT32VVvE4WBKhuB1rWaThsgk1NWxjee3xmPWG41qL26GWPezpSRJaZ6HGGYCC7WwVR98tEeHbHkPS+x7t0h0ZVFtj62y4d7UyzEwDhpYv/jJLn+NtFd+/nn7QEXpLp1yS1zZwE29h4IT22eMtkHUlbr0eISHO6Cgf4Q9Y8QnNLmlHL5neKg4aXHOG5/Y+Fs047qtAITPd58NC/BddlWFVdTpwlQbdL4eMHDqaF9DdAgfK65qrObkyut7mRq5zyOLl9nZa2ZFp2b4kv9vFldG3wg6kyEZJB065ABw9KvA8bRu4CWf1jr/Cp9F5S9Ec38g+IGt7jJsmkqzNAekG8q2EYq/qBCWFCC6TEV1qHB1LP5we0AcrebTUCL8bh5dZBmJBap2YX1jq2juMvKRHF0og3NoTesiX5FrZtwyBzZuxHjzapFS8AIWdUtt7ydKCJEwXpChtnYU+6IAuXUIszUuk2zscZpx1qVGiUaVYqCvEKgXTifYOp2P9E5KrybZW53qe8cGAr3n56mz4a8g5fG1/Skv2KXanPtxF3qrlgS9yCVmNiMbq/24Pt3cY739dpq9j3bM8HeoKsZbQ3H5Jy1d1DT5NPq5xqn6x9gWvxwiNJ4inj7zf3swlHeD36YX1eUHUVNXtHYbmaR69yUamf1ytsijWj484A3rdRT7djcPaSMz4QfEJbJ1n6hgHoa/ZJo3HpaOfPLs5J6nbbWc0xPsDBB8IrZ8Rxd8AAAAASUVORK5CYII="
      ,"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAcCAYAAAFKV+zSAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAPKADAAQAAAABAAAAHAAAAABKHsZYAAADXElEQVRYCeVZP2sUQRR/c57YWMh1Shq1EbEzCgZLLZTYST6Agnb2dlcI9nYK+gHEzqCFlhIhiZ1IGpPCQ7tgYRM8b/y93Z3Z2dmZfbO3S05w4dj33ry/M2/evJ0jch69Rff455BKMBvcJK355zANSpYwNDRkdYmeQbL2KEPRGzSio3Qb+BTML5heDsKuYVSXc3qjbWsXvPeNpHlbtYZgbWt6amgQ/AF4zI5bGgCFKG7AmzcuMRWuW96iOxB+BIUnK0rgds1yhaFAsCJrcPWEHdP0GTO0YfECCFnmtV6F5VuWeUAPgB/4lsNT7Qqyhhk9sYocQHHSOHgbcBJ2210moy4wYWG3jYDwLjPIZQxkE2b/i8vCcM1tn4Fx/QmzP6NTobEgbY+eqzX6ExwriKJhJ1+qSx/TWkTsp4TPLs+1SVI/bXxNLXFOr2+QWWop15ldnmpTKEPpGjLf21SjBmT6eTvLz77MknOIETObfklH6DTdTVKKraOW6YPEm2Q4M75JK9h85wCH96+mnzSl92qFkqIWDbeKlj0c0Hd1kdYZbHrC3rsSZooVHUN5fYhf9QAxvIpeA1znQsPHnBS5vI+NYi73MaPMk+/z1Yx9SNeMWOydbjimwaWbImOKjjvmwf0a9pQ3oYupXIpudjmRmwKSxuqnuS9he8tDL5m+Jz3h/SZX3pKya1PJvzaG5VKo6HFmUNOOZFgumdt0FcXhvKTIHZe6D+YVI85OmkCz5hqqwOi3KngEESOOyNXI2WFyhq60nZ2aIp/AQe/SR6l59MVieC8B6znSIOZQlJ7YX0Tli4HOAaNH5b7kgjXEp/aMxsBHljYfsI/EHyNjDqx45AvQjicA4l4SdeRNWMnGLUr3YFnfCMGyrvLxbZUjyVD3gP2Os6k1SnarYKzrkvtDwUYfAQsm/q3hxXRbi5uDyQAFh294Jovz4dAsTzjW7lXafLAbv1O7UMMvvb3bo5Supknlf7eHuwfM3//uk38du5T5YV+Xb2sOzd1TurxVL83nVwbXQVjGWRq+Nii5q1D+CbKN/fau0nQw1296JV0vVJXVsc4Bs8qsjz6LW/o2l6t1X+IUXOLQV3rbRz/dS8Cup9l/GcPsCmwJq3QcY22bhSlW9hfkJvjM3Om6oq5vDP8FmJ7VbYxkXUgAAAAASUVORK5CYII="
      ,"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAcCAYAAAFKV+zSAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAPKADAAQAAAABAAAAHAAAAABKHsZYAAADTklEQVRYCeVZP2sVQRCfjWIiWIhdQj6AiKWNYqmFYtRC8gEUYmdvl0Kwt1PQD5DKvIgWWoo2liLp84iVYiGYiGb9zd673Xl7u7dz3pEnuHDvZndmfjOzt39m9xHJYkdrxE+yOOamJctPEJpLCovGo542159A01drwtQE2Y1TRAu3iOwvMjeecXvQpvkvYNSyjtlqW2iau7Va/Q4265Zg+3HdhPdnIrNO7LgoBlFcgS8vRZuaTFjevA3tB3gWp1HgdsPytERVs6NVECcD6+AjmZvvQr2iEpbdZ7yGUFaCsLkHej+2nOlqqcgQ9lEAChQ6DIPm78o447aVn2kC3eywjNs6V8QIkgrN0YRB8klKMN10O5bguh2h92kpxUq37T0ls/o7zatay4bDeIk+fQ52EnE0GGNpTV9PBmk8bGKobnUeXjtQWe6m1l9a09WT1TQ1XFMODNbVWANccdM5ZUm0ma+i0kqWI2Z1u3EE6/idViTPxNQxK299NUPoDLOyfX4Bs+80nsz8pW9Ee28wjVRRlw13itaFt4vV9UUmUN+c894LiC6eR9j3wYg2kFrUbIFig0tuiy1ErpnHE2S33GeMsoib57zCoSxcqt753w6G8yCB4xcZsTMGrqQGNiyh2+kZrVzmap8duT2kdm5iN48VfG556Etm7Mkw9aEHF1JSLkiRC6WDYc0GYB5W9ux2wa7M2XOinC/ZM+Bi1SqvsA4lkdHG6OWI3U7TTNZioFBHvqUoyhAUSG4zOX5+0jsKBa0IB/3jfSl5VKNpBVvl7NbF4QONLeryi1grrvf/wi4vmTsrgLFr0zo6AIfePsVNXuDg0OZL+gTo2QqiPJeKIJyEycIpSt9gGY8xXLojwGNbgqUkhwg4ztkWlbY1YhFWNrvVYDmZAQJW2/onBGeUbc0s9jG+sOHz53hmLhyeYcRo1gZYpcPNZuW7NgvVRhrdHhXuVEqo/90cHiJgnP9lcadj2dCDbmBFtrpDx1tKdwS+7HC36l4VVwHmNWqXsY+ewzvaWrxcjsARxHwAkzH2p4XYVr/Sfw6z/epSBrf0XS5XOzm+i1ukV0Pk08MELH13/2UcQ/Y1t4yeOIGv1XEU8eHSfCc6wKr6c1t7VSZdaKP/AF8uyrvfJoi3AAAAAElFTkSuQmCC"
    ]



  //图例
      legend: {
        data:[{name:dataList[0].name,icon:`image://${symbol[0]}`},{name:dataList[1].name,icon:`image://${symbol[1]}`},{name:dataList[2].name,icon:`image://${symbol[2]}`}],
        show: true,
        top: 36,
        right: 40,
        selectedMode: false,
        textStyle: {
          color: '#6EC0FF',
          fontSize: 28,
          lineHeight: 28,
        },
        itemStyle: {
          // borderCap: 'butt',
        },
        itemWidth: 56,
        itemHeight: 28,
        itemGap: 56,
      },

3.图片与图例不一致的设置方法

既设置symbol，又设置legend：data:[{icon:`image://${img}`}}]    //注意：1.此处img很容易解析不到，需要用前方所给的引入图片的方式，帮助浏览器解析

2.legend 里的data必须为数组，且每个数组里都要有name与拐点数据name保持一致 ，才能使自定义图例正常显示