timeChart.vue

<template>
	<view class="timechart">
		<div :id='bindId' class="chart"></div>
	</view>
</template>

<script>
	export default {
	  data () {
		return {
			yMax:0
		}
	  },
	  mounted() {
	  },
	  watch:{
		  bindId:function(newValue,oldValue){
		  },
		  chartData:{
			handler(newValue,oldValue){
				this.drawTimeChart();
			},
			deep:true
		  },
	  },
	  props:{
			bindId:{
				type:String,
				default:''
			},
		   chartData: {
                type: Object,
                default: function(){
					return {}
				}
            }
	  },
	  methods: {
	  	 drawTimeChart() {
			 var  yMax=0;
            let myChart = {};
            let chartDom = document.getElementById(this.bindId);
			myChart = this.echarts.init(chartDom);
            myChart.showLoading('default', {
                text: '',
                color: '#409eff'
            });
			let yAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
            var option = {
				title:{
					show:true,
					 text:this.chartData.title,
					 left: uni.upx2px(18.11),
					 top: uni.upx2px(10.86),
					 textStyle: {
						 fontWeight: "normal",
						 fontSize: uni.upx2px(25.4),
						 color: '#4A4A4A'
					 }
				},
                tooltip:{
					padding:[5,15],
					position: function(pos, params, dom, rect, size){
						var obj={};
						if(pos[0]+size.contentSize[0]>size.viewSize[0]){
							obj['right']=size.viewSize[0]-pos[0]
						}else{
							obj['left']=pos[0]
						}
						if(pos[1]+size.contentSize[1]>size.viewSize[1]){
							obj['bottom']=size.viewSize[1]-pos[1]
						}else{
							obj['top']=pos[1]
						}
						 return obj;
					},
                },
                grid: {
					left:uni.upx2px(76.08),
					right: uni.upx2px(28.98),
					top: uni.upx2px(83.33),
					bottom: uni.upx2px(9.05)+uni.upx2px(21.74)+12+uni.upx2px(21.74)+12
				},
				 animation: false,
                yAxis: {
					 type: 'category',
                    splitArea: {
                        show: true
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#535353'
                        }
                    },
                    data: yAxisData
				},
                xAxis: {
					 type: 'category',
                    data: [],
                    nameTextStyle: {
                        color: '#444',
                        fontSize: uni.upx2px(21.74)
                    },
                    axisLabel: {
                        width: 140
                    },
                    splitArea: {
                        show: true
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#535353'
                        }
                    }
				},
				 visualMap: {
                    min: 0,
                    max: 20,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'left',
                    itemWidth: 15,
                    color: ['#0068FF', '#fff'],
                },
				legend : {
				    orient: "horizontal",
				    x: "center",
				    textStyle: {
				        fontSize: uni.upx2px(21.74),
						color:'rgba(74,74,74,1)'
				    },
				    itemWidth: uni.upx2px(12.7),
				    itemHeight: uni.upx2px(12.7),
				    itemGap: uni.upx2px(5.62),
				    bottom: uni.upx2px(9.05),
				    data: [],
					selected:{}
				},
				series:JSON.parse(JSON.stringify(this.chartData.series))
            }
           if(!option.series) return;
            try {
               option.xAxis.data = this.chartData.xaxis.data; 
            } catch (error) { }
            if(option.series.length > 0) {
                let seriesData = [], yIndex = null;
                let maxArr = [], onedimen = [], maxNum = null;
                for(let i = 0, len = option.series.length; i < len; i++) {
                    option.series[i].type = 'heatmap';
                    option.series[i].itemStyle = {
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    };
                    option.series[i].label = {
                        normal: {
                            show: true,
                            color: '#444'
                        }
                    };
                }
                // 处理series data
                option.series.forEach((item, index) => {
                    yIndex = getIndex(item.name, yAxisData);
                    maxArr.push(item.data);
                    for(let i = 0; i < item.data.length; i++) {
                        seriesData.push([parseInt(yIndex), i, item.data[i]]);
                    }
                });
                try {
                    onedimen = maxArr.join(',').split(',');
                    maxNum = Math.max.apply(null, onedimen);
                } catch (error) {
                    console.log('heatmap max value', error.message)
                }
                option.visualMap.max = maxNum;
                seriesData = seriesData.map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
                for(let i in option.series) {
                    option.series[i].data = [];
                    option.series[i].data = seriesData.splice(0, option.xAxis.data.length);
                }
                // 获取在Y轴的值
                function getIndex (val, arr) {
                    for(let i in arr) {
                        if(val == arr[i]) {
                            return i;
                        }
                    }
                }
            } else {
                option.graphic = {
                    type: 'text',
                    left: 'center',
                    top: 'middle',
                    z: 100,
                    style: {
                        fill: '#444',
                        text:'暂无数据',
                        font: '14px '
                    }
                }
                option.visualMap.show = false;
                option.yAxis.data = [];
                // option.grid.height = 670;
                myChart.clear();
                setTimeout(() => {
                    myChart.hideLoading();
                    myChart.setOption(option);
                }, 500);
            }
            // myChart.clear();
			
            setTimeout(() => {
                myChart.hideLoading();
            }, 500);
            myChart.setOption(option);
			console.log('option', JSON.stringify(option))
			// option.grid.left=uni.upx2px(String(yMax).length*uni.upx2px(21.74))+uni.upx2px(18.11)
// 			option.grid.left=uni.upx2px(18.11)+15+String(yMax).length*uni.upx2px(9.05)
// 			myChart.setOption(option);

        }
	  }
	}
</script>

<style>
	.chart{
		width:706.52upx;
		height:634.05upx;
		margin: 0 auto;
		background: #FFFFFF;
		margin-bottom: 18.2upx;
		border-radius:7.24upx;
		overflow: hidden;
	}
</style>