echarts⽇历图-⾃定义图标（最近30天⼼情展⽰）问题场景
获取最近30天时间，随机显⽰每天的⼼情，利⽤echarts的⽇历图，实现每天⾃定义显⽰图标
代码实现
<template>
<div class="chart"  ref="chart" ></div>
</template>
<script>
import echarts from "echarts";
function getLastMonth(){
var date = new Date();
var year = FullYear();
var month = Month()+1;
var day = Day();
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);
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,
setoption}
},
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 = d(api.value(0));
var cellWidth = llWidth;
var cellHeight = llHeight;
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>
最终展⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。