echarts日历图-自定义图标(最近30天心情展示)

问题场景

获取最近30天时间，随机显示每天的心情，利用echarts的日历图，实现每天自定义显示图标

代码实现

<template>
    <div class="chart"  ref="chart" style="border:1px solid #000;width: 98%;height: 500px;"></div>
</template>
<script>
    import echarts from "echarts";
    function getLastMonth(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var day = date.getDay();
        day = day>9 ? day:"0"+day
        if(month==1) {
            var startMonth=12;
            var startYear=year-1;
        }
        else {
            var startMonth = month - 1;
            var startYear = year;
        }
        var start=startYear+"-"+(startMonth>9 ? startMonth:"0"+startMonth)+"-"+ day
        var end=""+year+"-"+(month>9 ? month:"0"+month)+"-"+day
        return [start,end]
    }
    function getVirtulData(range) {
        // ["sad","angry","haha","like","love","wow","ya",]
        var arr = new Array(100)
        arr.fill("sad",0,5).fill("angry",5,10).fill("haha",10,35).fill("like",35,55).fill("love",55,80).fill("love",80,90).fill("ya",90,100)
        var date = +echarts.number.parseDate(range[0]);
        var end = +echarts.number.parseDate(range[1]);

        var dayTime = 3600 * 24 * 1000;
        var data = [];
        for (var time = date; time <= end; time += dayTime) {
            data.push([
                echarts.format.formatTime('yyyy-MM-dd', time),
                arr[Math.floor((Math.random()*arr.length))]
            ]);
        }
        return data;
    }

    export default {
        mounted(){
            this.showCharts();
        },
        methods:{
            showCharts(){
                var range=getLastMonth();
                var data =getVirtulData(range);
                let myChart = echarts.init(this.$refs.chart);
                window.onresize = myChart.resize;
                myChart.setOption({
                    backgroundColor: "#fff",
                    tooltip: {
                        show:true,
                        formatter:function (params) {
                            return params['data'][0]+"：<b>"+params['data'][1]+"。。</b>"
                        }
                    },
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 1
                    },
                    calendar: {
                        top: 'middle',
                        left: 'center',
                        cellSize: 45,
                        yearLabel: {
                            margin: 50,
                            textStyle: {
                                fontSize: 30,
                            }
                        },
                        monthLabel: {
                            show: true,
                            nameMap: 'cn'
                        },
                        dayLabel: {
                            show: true,
                            nameMap: 'cn'
                        },
                        range:range,
                    },
                    series: [
                        {
                            type: 'custom',
                            coordinateSystem: 'calendar',
                            data: data,
                            renderItem: function (params,api) {//具体实现自定义图标的方法
                                return addImage(params,api, data);
                            },
                        }
                    ],
                })

                function addImage(params, api, realData){
                    var cellPoint = api.coord(api.value(0));
                    var cellWidth = params.coordSys.cellWidth;
                    var cellHeight = params.coordSys.cellHeight;
                    var value = realData[params['dataIndex']][1]
                    if(value){
                        return  {
                            type: 'image',
                            style: {
                                image: "/static/images/SVGs/"+value+".svg",
                                x:4,
                                y: 4,
                                width: 37,
                                height: 37,
                            },
                            position: [
                                cellPoint[0] - cellWidth/2,
                                cellPoint[1] - cellHeight/2
                            ],
                        }
                    }else{
                        return null;
                    }
                }
            },
        }

    }
</script>

最终展示