以时间轴折线图为例,传入的数据为时间戳:

vue写法:

<qiun-data-charts type="tarea" 
                    tooltipFormat="tooltipDemo2"
			:opts="ringsOpt" :chartData="ringsData" />
getChart() {
				var datenow = new Date()
				var yearnow = datenow.getFullYear()
				var monthnow = datenow.getMonth()
				var daynow = datenow.getDate()
				var datebegin = new Date(yearnow, monthnow, daynow, 0)
				console.log(datebegin.getTimezoneOffset())
				var dateend = new Date(yearnow, monthnow, daynow + 1, 0)
				this.ringsOpt = {
					color: ["#4095E5", "#FFA835", "#D95040", "#40D69A", "#EE752F"],
					padding: [20, 10, 0, 20],
					enableScroll: true,
					fontSize: 11,
					legend: {},
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						fontSize: 11,
						itemCount: 6,
						boundaryGap: "justify",
						lineHeight: 30,
						format: "datetime"
					},
					yAxis: {
						gridType: "dash",
						data: [{
							axisLine: false,
							FontSize: 11
						}],
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.35,
							addLine: true,
							width: 1,
							gradient: true,
							activeType: "hollow"
						},
						tooltip: {
							xAxisLabel: false,
						}
					}
				}
				this.ringsData = {
					series: [{
						name: "时间轴1",
						enableScroll: true,
						data: [
							[datebegin.getTime(), 55],
							[dateend.getTime(), 25],
						]
					}]
				}
			},

第一步,在config-ucharts.js中配置x轴的自定义formatter:datetime。

const formatDateTime1 = (val) => {
	var date = new Date(val)
	var year = date.getFullYear()
	var month = date.getMonth() + 1
	var day = date.getDate()
	var hour = date.getHours() + ''
	var minutes = date.getMinutes() + ''
	var second = date.getSeconds() + ''
	return '' + year + '/' + month + '/' + day + '\n' + hour.padStart(2, '0') + ':' + minutes.padStart(
		2, '0') + ':' + second.padStart(2, '0');
}
------------------config-ucharts.js部分代码-----------------------
-----------------------------------------
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
	"formatter": {
		"yAxisTh1": function(val, index, opts) {
			return val / 1000 + 'k'
		},
		"yAxisDemo1": function(val, index, opts) {
			return val + '元'
		},
		"yAxisDemo2": function(val, index, opts) {
			return val.toFixed(2)
		},
		"xAxisDemo1": function(val, index, opts) {
			return val + '年';
		},
		"xAxisDemo2": function(val, index, opts) {
			return formatDateTime(val, 'h:m')
		},
		"datetime": function(val, index, opts) {
			return formatDateTime1(val);
		},
		"tooltipDemo2": function(item,category,index,opts){
			var xlabel = formatDateTime1(item.data[0])
			var yLabel = ''+item.data[1]
			return xlabel+', '+yLabel;
		},
-------------------------------------------
-------------------------------------------

第二步,修改u-charts.js中的drawXAxis函数

// 如果在主视图区域内
        var _scrollDistance_ = opts._scrollDistance_ || 0;
        var truePoints = boundaryGap == 'center' ? xAxisPoints[index] + eachSpacing / 2 : xAxisPoints[index];
        if((truePoints - Math.abs(_scrollDistance_)) >= (opts.area[3] - 1) && (truePoints - Math.abs(_scrollDistance_)) <= (opts.width - opts.area[1] + 1)){
          context.beginPath();
          context.setFontSize(xAxisFontSize);
          context.setFillStyle(opts.xAxis.fontColor || opts.fontColor);
          //从这开始
		  var labelList = xitem.split("\n");
          labelList.forEach((labelItem,labelIndex)=>{
			  context.fillText(String(labelList[labelIndex]), xAxisPoints[index] + offset, startY + opts.xAxis.marginTop * opts.pix + (opts.xAxis.lineHeight - opts.xAxis.fontSize *labelList.length) * opts.pix / 2 + opts.xAxis.fontSize * opts.pix *(labelIndex+1));
		  })
          //从这结束
		  context.closePath();
          context.stroke();
        }

最终效果:只有当xAxis.lineHeight是xAxis.fontSize的n倍多点,标签的居中效果才好,n为labelList的length。

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐