uniapp 图表 插件 qiun-data-charts

<view class="charts-box">
	<!-- 开启onmovetip后，同时开启canvas2d模式（需要传canvasId），否则在小程序端会很卡。-->
     <qiun-data-charts
        type="line"
		:canvas2d="true"
		:canvasId="canvasId"
        :chartData="chartData"
		background="none"
		:ontouch="true"
		:onmovetip="true"
		:animation="false"
		:opts="lineOpts"
		tooltipFormat="tooltipIncome"
      />
</view>

data(){
return {
	chartData: {},
	canvasId: '',
	lineOpts: {
		"type": "line",
		"canvasId": new Date().getTime(),
		"canvas2d": false,
		"background": "none",
		"animation": true,
		"timing": "easeOut",
		"duration": 1000,
		"color": [
			"#47C5FF",
			"#FFCD30",
			"#3DF366"
		],
		"padding": [
			20,
			20,
			10,
			5
		],
		"rotate": false,
		"errorReload": true,
		"fontSize": 12,
		"fontColor": "#999999",
		"enableScroll": false,
		"touchMoveLimit": 60,
		"enableMarkLine": false,
		"dataLabel": false,
		"dataPointShape": false,
		"dataPointShapeType": "solid",
		"xAxis": {
			"disabled": false,
			"axisLine": false,
			"axisLineColor": "#EEEEEE",
			"calibration": false,
			"fontColor": "#999999",
			"fontSize": 12,
			"rotateLabel": false,
			"labelCount": 10, 
			"boundaryGap": "justify",
			"disableGrid": true,
			"gridColor": "#CCCCCC",
			"gridType": "dash",
			"dashLength": 4,
			"gridEval": 1
		},
		"yAxis": {
			"disabled": false,
			"disableGrid": false,
			"splitNumber": 4,
			"gridType": "solid",
			"dashLength": 2,
			"gridColor": "#CCCCCC",
			"padding": 10,
			"showTitle": false,
			"data": [
				{
					"position": "left",
					"disabled": false,
					"axisLine": true,
					"axisLineColor": "#fff",
					"calibration": false,
					"fontColor": "#999999",
					"fontSize": 12,
					"textAlign": "right",
					"title": "",
					"titleFontSize": 13,
					"titleOffsetY": 0,
					"titleOffsetX": 0,
					"titleFontColor": "#666666",
					"min": null,
					"max": null,
					"tofix": 2,
					"unit": "",
					"format": ""
				}
			]
		},
		"legend": {
			"show": true,
			"position": "bottom",
			"float": "center",
			"padding": 5,
			"margin": 5,
			"backgroundColor": "rgba(0,0,0,0)",
			"borderColor": "rgba(0,0,0,0)",
			"borderWidth": 0,
			"fontSize": 12,
			"fontColor": "#999999",
			"lineHeight": 20,
			"hiddenColor": "#CECECE",
			"itemGap": 10
		},
		"extra": {
			"tooltip": {
				"showBox": true,
				"showArrow": true,
				"showCategory": false,
				"borderWidth": 0,
				"borderRadius": 5,
				"borderColor": "#000000",
				"borderOpacity": 0.7,
				"bgColor": "#000000",
				"bgOpacity": 0.7,
				"gridType": "solid",
				"dashLength": 4,
				"gridColor": "#CCCCCC",
				"fontColor": "#FFFFFF",
				"splitLine": true,
				"horizentalLine": false,
				"xAxisLabel": false,
				"yAxisLabel": false,
				"labelBgColor": "#FFFFFF",
				"labelBgOpacity": 0.7,
				"labelFontColor": "#666666"
			},
			"markLine": {
				"type": "solid",
				"dashLength": 4,
				"data": []
			}
		}
	},
}
}

onLoad() {
	this.canvasId = this.randomString();
}

methods： {
// 生成32位随机字符串
randomString() {
	let len = 32;
	let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
	let maxPos = chars.length;
	let result = '';
	for (let i = 0; i < len; i++) {
		result += chars.charAt(Math.floor(Math.random() * maxPos));
	}
	return result;
}
}