uniapp 图表 插件 qiun-data-charts

41 篇文章 0 订阅
<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;
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uCharts是一个高性能的跨平台图表库,支持H5、APP、小程序(微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、360小程序)、Vue、Taro等更多支持canvas的框架平台,支持饼图、圆环图、线图、柱状图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图。 为解决开发者使用可视化组件的困扰,uCharts官方特推出可视化通用组件,本组件具备以下特点: 1、极简单的调用方式,默认配置下只需要传入图表类型及图表数据即可全端显示。 2、提供强大的在线配置生成工具,可视化中的可视化,鼠标点一点就可以生成图表,可视化从此不再难配。 3、兼容ECharts,并解决了ECharts无法使用formatter的问题,可选择PC端或APP端单独使用ECharts引擎渲染图表。 4、H5及App采用renderjs渲染图表,动画流畅、性能翻倍。 5、根据父容器尺寸弹性显示图表,再也不必为宽高匹配及多端适配问题发愁。 6、支持加载状态loading及error展示,避免数据读取显示空白的尴尬。 7、chartData配置与数据解耦,即便使用ECharts引擎也不必担心拼接option的困扰。 8、localdata后端数据直接渲染,无需自行拼接chartData的categories及series,从后端拿回的数据简单处理即可生成图表。 9、小程序端不必担心包体积过大问题,ECharts引擎将不会编译到各小程序端,u-charts.js编译后仅为93kb。 10、未来将支持通过HbuilderX的schema2code自动生成全端全平台图表,敬请期待!!! 11、uCharts官方拥有3个2000人的QQ群支持,庞大的用户量证明我们一直在努力,本组件将持续更新,请各位放心使用,本组件问题请在QQ3群反馈,您的宝贵建议是我们努力的动力!! 安装注意前提条件【版本要求:HBuilderX 3.1.0+】 1、件市场点击右侧绿色按钮【使用HBuilderX导入件】,或者【使用HBuilderX导入示例项目】查看完整示例工程 2、依赖uniapp的vue-cli项目:请将uni-modules目录复制到src目录,即src/uni_modules。(请升级uniapp依赖为最新版本) 3、页面中直接按下面用法直接调用即可,无需在页面中注册组件qiun-data-charts 4、注意父元\u7d20class='charts-box'这个样式需要有宽高
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值