ucharts跨端图表使用

官网：https://www.ucharts.cn/

• 跨端使用，支持H5、小程序（微信/支付宝/百度/头条/QQ/360）、APP，调用简单方便、性能及体验极佳。

1、使用Hbuilderx导入插件

https://ext.dcloud.net.cn/plugin?id=271

2、页面引入

import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';

3、基本使用（柱状图示例）

<template>
	<view>
		<view class="my-chart">
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;
	export default {
		data() {
			return {
				chartData: {
					categories: ["2012","2013","2014","2015","2016","2017"],    //x轴值
					series: [
						{
							name: "成交量1",       //名字  
							data: [15,{          
									value: 20,        //数值
									color: "#f04864"  //颜色
								},45,37,43, 34
							]
						},{
								name: "成交量2",
								data: [30,{
									value: 40,
									color: "#facc14"
									},25,14,34,18
								]
							}
					]
				},
				cWidth:uni.upx2px(750),
				cHeight:uni.upx2px(560),
			}
		},
		components: {

		},
		onLoad() {
			_self = this;
			console.log(this.cWidth +',' + this.cHeight);
			this.showColumn("canvasColumn", this.chartData); //渲染图表,参数一是canvas画布id,参数二是数据
		},
		methods: {
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({ //实例化对象
					$this: _self,
					canvasId: canvasId,
					type: 'column', //图表类型，可选值为pie、line、column、area、ring、radar、arcbar、gauge、candle、bar、rose、word、mix
					legend: {
						show: true
					}, //图例设置
					fontSize: 11, //全局默认字体大小（可选，单位为px，默认13px）
					background: "#ffffff", //canvas背景颜色,默认白色
					pixelRatio: 1, //像素比，默认为1，仅支付宝小程序需要大于1，其他平台必须为1
					animation: true, //动画
					categories: chartData.categories, //数据类别，数组类型(饼图、圆环图不需要)
					series: chartData.series, //数据列表
					xAxis: { //x轴配置
						disableGrid: true //不绘制X轴网格，默认绘制
					},
					yAxis: { //y轴配置

					},
					dataLabel: true, //是否在图表中显示数据标签内容值，雷达图显示不了数值，可以修改categories的string加上数值
					width: _self.cWidth,        //canvas宽度，单位为px，支付宝高分屏需要乘像素比，使用uni.upx2px(750)自适应全屏
					height: _self.cHeight,      //	canvas高度，单位为px，支付宝高分屏需要乘像素比 ，使用uni.upx2px(500)自适应不同屏幕
					extra: {                   //柱状图相关配置
						column: {
							type: 'group',     //柱状图类型：group分组柱状图，stack为堆叠柱状图（未完成开发中），meter为温度计式图
							width: 20          //柱状图每项的图形宽度，单位为px
						}
					}
				})
			}
		}

	}
</script>

<style>
	.my-chart {
		width: 100%;
		height: 560rpx;
		padding: 20rpx 0;
	}

	.charts {
		width: 750rpx;
		height: 560rpx;
	}
</style>

4、API参数

http://doc.ucharts.cn/1073941

5、图表点击交互事件

5.1、@touchstart 监听点击

<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchRing"></canvas>

5.2、touchLegend（e， options?） 图例点击交互

touchRing(e){
    canvaRing.touchLegend(e, {
    	animation : false
    });
},

如和showToolTip方法共同使用，请将此方法放在showToolTip后，否则将强制关闭animation动画方法。

5.3、ToolTip方法

showToolTip(e, options?) 图表中展示数据详细内容

第一个参数e：

e: Object标准touch事件；

{mp:{changedTouches:[{x: 236, y: 30}]}}

第二个参数options：

options: Object可选（tooltip的自定义配置）：

1、background:

option.background：tooltip背景色，默认为#000000;

2、format:

option.format：function类型，tooltip文案格式化。接受两个传入的参数，seriesItem(Object, 包括seriesItem.name以及seriesItem.data)和category，可自定义tooltip显示内容。具体可参考ucharts-demo中line图示例

3、index:

option.index：数字类型，强制选中的索引。参考曲线图pages/basic/line/curve.vue

4、textList:

option.textList：array类型，自定义文案。参考曲线图pages/basic/line/curve.vue,格式如下：

let textList=[{text:'我是一个标题',color:null},{text:'自定义1：值1',color:'#2fc25b'},{text:'自定义2：值2',color:'#facc14'},{text:'自定义3：值3',color:'#f04864'}];

showtooltip绑定在touchstart，touchmove，touchend事件，可以实现连续滚动显示tooltip（数据量大的情况下不建议，会出现不跟手的情况）
关于不显示tooltip的情况，基本上外层包裹了sroll-view或者是swiper还是什么其它的导致touch事件的event错乱，
可能的解决方法就是加上或减去部分event的x，y坐标，具体数值可以通过去掉外层包裹和没有去掉外层包裹打印出来的e计算得出

touchRing(e){
     canvaRing.showToolTip(e, {
    	format: function (item) {
    		return item.name + ':' + item.data 
    	}
    });
}