echart 在x轴上显示图标的方式 symbol相关

需求

模拟写出来

<template>
  <div ref="chart" :style="{width,height}" class="container">
  00000
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: "500px"
    },
    height: {
      type: String,
      default: "300px"
    },
    data: {
      type: Array,
      required: true
    },
    options: {
      required: true
    }
  },
  data(){
    return{
     //图标换其他图片也行 symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
    }
  },
  mounted() {
    let option = {
  color:['#2e86de'],//预定义线条的颜色    
  title: {
    text: 'Stacked Line',
    show:false
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
    show:false,
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
            lineStyle:{
                    type:'dotted',
                    // width :10,
            },
            show: true,
        },
  },
  yAxis: {
    splitLine: { show: false }, //去除网格线
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      symbol: "none",
      //用markline来模拟的
      markLine: {
                //不想有字
                label:{ 
                        show:false,
                        shadowColor: 'rgb(150, 150, 250)',
                        shadowBlur: 10,
                },
                silent: true,
                symbol: 'none',//数据标识
                data: [
                    {
                        xAxis: 'Mon',
                        symbol: this.symbol,//当前标识
                        symbolSize: 50,
                        lineStyle: {
                            color: '#3EC6F0',
                            width: 0
                        },
                    }, {
                        xAxis: 'Tue',
                        symbol: 'circle',//当前标识
                        lineStyle: {
                            color: '#7CB854',
                            width: 0
                        }
                    }, {
                        xAxis: 'Wed',
                        symbol: 'circle',//当前标识
                        lineStyle: {
                            color: '#DB2F2C',
                            width: 0,
                            
                        }
                    }
                ]
    },
       areaStyle: {
         color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: '#2e86de' // 0% 处的颜色
    }, {
        offset: 1, color: 'rgba(0,0,0,0)' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
         
       },//默认折线下面填充颜色
      data: [120, 132, 160, 200, 210, 220, 250]
      
    },
  ]
}
    //事件传递的是点击的数据点
    this.initChart(this.$refs.chart, option, data => {
      console.log(data);
    });
  }
};
</script>

<style  lang="scss" scoped >
.container {
  width: 500px;
  height: 300px;
}
</style>