uniapp x uts版echarts可以编译原生Android+IOS版本App

85 阅读1分钟

uniappx01.jpg

uniappx02.jpg

uniappx-bar.jpg

uniappx-gauge.jpg

uniappx-line.jpg

uniapp x UTS 纯源代码绘制【网址示例:jstopo.top】

折线图(line插件参数↓)

initChart(){
	const xData: string[] = ['01小时','02小时','3小时','4小时','5小时','6小时','7小时','8小时','9小时','10小时'];
	const yData: number[][] = [
		[22,32,68,96,56,67,38,56,67,39],
		[12,36,28,16,46,37,68,16,27,89],
	];
	this.obj = {
		xData: xData,
		yData: yData,
	} as UTSJSONObject
}

柱状图(bar插件参数↓)

init(){
	const xData: string[] = ['01小时','02小时','3小时','4小时','5小时','6小时','7小时','8小时','9小时','10小时'];
	const yData: number[][] = [
		[72, 32, 68, 26, 56, 67, 38, 56, 67, 39],
		[52, 62, 28, 16, 46, 37, 68, 16, 27, 89]
	];
	const callEasyMethod = this.$refs['barRef'] as ComponentPublicInstance;
	callEasyMethod!.$callMethod('drawInit', xData, yData);
}

饼图(pie插件参数↓)

init(){
	this.pieDatas = [12,20,32,30,10,60];
}

仪表盘(gauge插件参数↓)

init(){
	this.seriesData = {
		data: 212,//值
		unit: 'V',//单位
		color: 'red',//指针的颜色
		maxValue: 230,//最大值
		fontSize: 18//字体大小
	} as UTSJSONObject;
}