Use sprite icon for echarts x-axis

Use sprite icon for echarts x-axis

by gnijuohz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.5.4/echarts.js"></script>
<div id="main" style="width: 600px;height:600px;"></div>

JavaScript

// 基于准备好的dom，初始化echarts实例
 const myChart = echarts.init(document.getElementById('main'));
 const emojiSize = 56;
 const symbolSize = 32;
 const emojiOffset = 20 + symbolSize/2;
 const emojiPos = {
   cry: {
     x: emojiSize * 3,
     y: emojiSize
   },
   determinded: {
     x: 26 * emojiSize,
     y: 4 * emojiSize
   },
   good: {
     x: 13 * emojiSize,
     y: 4 * emojiSize
   },
   cool: {
     x: 13 * emojiSize,
     y: emojiSize
   },
 }
 const emotions = ['cry', 'determinded', 'cry', 'good', 'cool'];
 let markpointData = [];

 let option = {
   title: {
     text: '在Ｘ轴上用Sprite图标',
     subtext: '某员工一周效率与情绪变化'
   },
   grid: {
     x: 60,
     y: 100
   },
   xAxis: {
     data: ['周一', '周二', '周三', '周四', '周五']
   },
   yAxis: {
     name: '效率 %',
   },
   tooltip: {},
   series: [{
     type: 'bar',
     label: {
       normal: {
         show: true
       }
     },
     itemStyle: {
       normal: {
         color: '#41b883'
       }
     },
     data: [60, 100, 100, 80, 50]
   }]
 };

 myChart.setOption(option, true);

 const emojiCanvas = document.createElement('canvas');
 emojiCanvas.width = emojiSize;
 emojiCanvas.height = emojiSize;
 const ctx = emojiCanvas.getContext('2d');
 const img = new Image();
 img.setAttribute('crossOrigin', 'anonymous');
 img.onload = function() {
   emotions.map(function(emotion, index) {
     let x = emojiPos[emotion].x;
     let y = emojiPos[emotion].y;
     ctx.drawImage(img, x, y, emojiSize, emojiSize, 0, 0, emojiSize, emojiSize);
     let dataURL = emojiCanvas.toDataURL();
     markpointData.push({
       coord: [index, 0],
       symbol: `image://${dataURL}`,
       symbolSize: symbolSize,
       symbolOffset: [0, emojiOffset],
       label: {
         normal: {
           show: false
         },
         emphasis: {
           show: false
         }
       }
     });
     ctx.clearRect(0, 0, emojiSize, emojiSize);
   });
   myChart.setOption({
     series: [{
       markPoint: {
         data: markpointData
       }
 ...