vue使用canvas生成地图图例

1.写canvas标签

 <canvas ref='cvs' width="150px" height="200px"></canvas>

2.数据

  ldata:[{
                 "label": "30000 以上",
                "value": ">= 30000",
                "color": "rgba(227, 122, 113,0.5)"
            }, {
                 "label": "20000 - 30000",
                "value": "20000 - 30000",
                "color": "rgba(254, 183, 148,0.5)"
            }, {
                "label": "10000 - 20000",
                "value": "10000 - 20000",
                "color": "rgba(253, 236, 185,0.5)"
            }, {
                 "label": "6000 - 10000",
                "value": "6000 - 10000",
                "color": "rgba(211, 225, 158,0.5)"
            }, {
                "label": "3000 - 6000",
                "value": "3000 - 6000",
                "color": "rgba(168, 217, 131,0.5)"
            }, {
                "label": "0 - 3000",
                "value": "0 - 3000",
                "color": "rgba(104, 169, 132,0.5)"
            }]

3.页面挂载的时候生成图例

 mounted(){
        this.showCanvas()
  },

//展示图例
      showCanvas(){
          let canvas=this.$refs.cvs;
           let ctx = canvas.getContext('2d');
           let legendData=this.ldata
           let _interval=this.interval
            for (let i = 0, len = legendData.length; i < len; i++) {
                    let _color = legendData[i];
                    ctx.fillStyle = _color.color;
                    ctx.fillRect(0, i * _interval, 40, 16); //x,y,xoff,yoff
                    //使用strokeRect方法
                    // ctx.lineWidth = 0.5;
                    // ctx.strokeStyle = "#000000";
                    // ctx.strokeRect(0, i * _interval, 40, 16);
                    ctx.font = 'normal 12px 宋体';
                    ctx.fillStyle = 'black';
                    ctx.fillText(_color.label, 52, 12 + i * _interval); //x,y
           }
      },