• 基于wx-charts微信小程序图表改造成，适用于uni-app平台的跨端图表插件，感谢原作者xiaolin3303，原插件gitHub地址：https://github.com/xiaolin3303/wx-charts

• 2019.05.xx 计划加入柱状图、饼图、环形图、雷达图等ToolTip事件
• 2019.05.xx 计划加入堆叠图、条状图、K线图、分时图
• 2019.05.08 计划加入第二种仪表盘样式,增加《亲手教您如何改造wx-charts，打造您的专属图表》教程。
• 2019.05.06 完善X轴Y轴网格设置，增加X轴网格设置，增加XY轴虚线网格绘制,gridType网格线型 'solid'为实线、'dash'为虚线。整理并归类帮助文档。
• 2019.05.05 完善圆弧进度图增加起始结束角度自定义，新增背景颜色自定义，新增整圆进度图，参数请参考demo。
• 2019.05.04 完善仪表盘更新数据时指针切换动画，增加仪表盘数据标签。
• 2019.05.01 新增仪表盘图，图表类型gauge，可以高度自定义，参数请参考demo。注意原圆弧进度条的图表类型变更为arcbar,给您带来不便请谅解
• 2019.04.30 新增opts.title.offsetY标题纵向偏移距离，opts.subtitle.offsetY副标题纵向偏移距离，适用于ring、arcbar及即将上线的gauge，详见demo圆环图示例。
• 2019.04.28 修改demo为动态数据以帮助初学者使用，即后台获取数据后实例化图表；新增柱状图自定义颜色，传入数据标准如下(可混合使用)： 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]}]
• 2019.04.23 增加opts.xAxis.scrollShow参数，默认为false，在图表拖拽时，是否显示滚动条，因为有些朋友可能不需要显示滚动条。增加背景颜色为其他颜色的示例，因为有些朋友设置的不太正确，请参考柱状图。详见v1.5.2demo页面。
• 2019.04.22 修复区域图拖拽模式下线段连接错位问题
• 2019.04.21 增加图表拖拽图滚动条显示当前拖拽进度，scrollBackgroundColor为滚动条背景色，scrollColor为滚动条颜色，均可自定义，详见demo折线图一
• 2019.04.19 增加图表拖拽示例，支持的图表有柱状图、折线图和区域图，除头条小程序外，其他各端现已全部支持拖拽功能（头条小程序canvas不支持点击事件），需配合绑定@touchstart, @touchmove, @touchend方法
• 2019.04.18 修复圆弧进度图示例中进度数值JS计算精度引起的小数位数问题，加Math.round()解决，感谢开发者M_少发现问题。更正参数说明中几个错误描述
• 2019.04.17 增加自定义显示数据标签文案示例，请下载1.4.1版本，参见圆环图ring数据事例
• 2019.04.16 新增圆弧进度图,图表类型arcbar，详见demo，感谢作者[email protected]提供思路
• 2019.04.15 支持横屏模式，新增rotate参数，默认flase，示例见折线图二
• 2019.04.14 支持百度、头条小程序，实现彻底跨全端
• 2019.04.12 支持支付宝小程序（开发者工具不显示，上传代码真机预览可以显示）
• 2019.04.01 改造成uni-app跨端组件

• 饼图 pie
• 圆环图 ring
• 线图 line
• 柱状图 column
• 区域图 area
• 雷达图 radar
• 圆弧进度图 arcbar
• 仪表盘 gauge

• 改造后的插件可以跨端使用，支持H5、小程序（微信/支付宝/百度/头条）、APP，调用简单方便、性能及体验极佳。
• 虽然没有Echarts及F2图表功能强大，但可以实现一套业务逻辑各端通用，并解决了H5端图表显示模糊等问题。
• 支持单页面多图表，demo中单页10个图表，响应速度超快。
• 支持入场动画及ToolTip动画效果。
• 独特支持横屏模式感谢masterLi提供需求。

• 相比Echarts及F2的复杂的设置，本插件几乎等于傻瓜式的配置。
• Echarts在跨端使用更复杂，本插件只需要简单的两个<canvas>标签轻松区别搞定，代码整洁易维护。
• 本插件打包后的体积相比Echarts小很多很多，所以性能更好。
• 如果您是uni-app初学者，那么强烈建议您使用wx-charts，并且目前可以跨全端通用，减少工作量，增强一致性体验。
• 图表样式均可自定义，懂js的都可以读懂插件源码，直接修改wxcharts.js源码即可。
• 本插件原为我公司产品所用，经过大量测试，反复论证并加以改造而成，请各位放心使用。

• 为何要改造wx-charts?
• 并不是所有图表插件直接拿来就可以满足客户需求，如果您的UI设计师设计一个图表，如下图:

• 您会发现这个图表即使在echarts里也不是很好实现，那么就需要我们自己动手去实现。下面就让我们一起来完成，本文旨在抛砖引玉，希望各位朋友能够更好的应用wx-charts来完成您的项目，如果您有更好的设计，请提交您的PR到githubuni-wx-charts跨端图表，帮助更多朋友，感谢您的付出及贡献！

import wxCharts from '../../components/wx-charts/wxcharts.js';

<template>
	<view>
		<view class="qiun-charts">
			<!--#ifdef H5 || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO-->
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
			<!--#endif-->
			<!--#ifdef MP-WEIXIN || APP-PLUS -->
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
			<!--#endif-->
		</view>
	</view>
<template>

通过cWidth、cHeight、pixelRatio三个参数解决H5端canvas组件在高分屏下模糊的问题

<script>
	import wxCharts from '../../components/wx-charts/wxcharts.js';
	var _self;
	var canvaColumn=null;
	export default {
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1
			}
		},
		onLoad() {
			_self = this;
			//#ifdef H5 || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
			uni.getSystemInfo({
				success: function (res) {
					if(res.pixelRatio>1){
						_self.pixelRatio =2;
						//正常这里_self.pixelRatio给2就行，如果要求高可用下行
						//_self.pixelRatio =res.pixelRatio;
					}
				}
			});
			//#endif
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		onReady() {
		},
		methods: {
			getServerData(){
				uni.request({
					url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata',
					data:{
					},
					success: function(res) {
						let Column={categories:[],series:[]};
						Column.categories=res.data.data.Column.categories;
						Column.series=res.data.data.Column.series;
						if(Column.categories.length>0 && Column.series.length>0){
							_self.showColumn("canvasColumn",Column);
						}
					}
				});
			},
			showColumn(canvasId,chartData){
				canvaColumn=new wxCharts({
					canvasId: canvasId,
					type: 'column',
					legend:true,
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					rotate:false,//新增横屏模式（非必填参数，默认false）
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid:true
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
						  width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
						}
					  }
				});
			},
			changeData(){
				//这里只做了柱状图数据动态更新，其他图表同理。
				canvaColumn.updateData({
					series: Data.ColumnB.series,
					categories: Data.ColumnB.categories
				});
			},
		}
	}
</script>

• var canvaColumn=null;不是必须定义的变量，如果需要动态更新数据或者需要交互显示ToolTip则需要定义。
• 如果在H5端使用，cWidth和cHeight是必须定义的（当然你也可以用别的变量名），需要注意的是要和当前canvas中的样式定义的数值相等，即uni-app中的upx数值相等。
• pixelRatio参数是解决了H5端高分屏canvas模糊而设置的，非H5端给1即可，H5端正常给2就可以，当然如果项目需求较高，设置为当前设备的像素比也没问题。

<style>
.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
</style>

###通用基础配置项

###数据列表每项结构定义

###标题配置项（适用于ring、arcbar、gauge）

###坐标轴配置项

###扩展配置项（圆弧进度条）

###扩展配置项（仪表盘）

###扩展配置项（雷达图）

###扩展配置项（其他）

• updateData(data) 更新图表数据，data: object，data.categories(可选，具体见参数说明)，data.series(可选，具体见参数说明)，data.title(可选，具体见参数说明)，data.subtitle(可选，具体见参数说明)
• stopAnimation() 停止当前正在进行的动画效果，直接展示渲染的最终结果
• addEventListener(type, listener) 添加事件监听，type: String事件类型，listener: function 处理方法
• getCurrentDataIndex(e) 获取图表中点击时的数据序列编号(-1表示未找到对应的数据区域), e: Object微信小程序标准事件，需要手动的去绑定touch事件，具体可参考wx-charts-demo中column图示例
• showToolTip(e, options?) 图表中展示数据详细内容(目前仅支持line和area图表类型)，e: Object微信小程序标准事件，options: Object可选，tooltip的自定义配置，支持option.background，默认为#000000; option.format, function类型，接受两个传入的参数，seriesItem(Object, 包括seriesItem.name以及seriesItem.data)和category，可自定义tooltip显示内容。具体可参考wx-charts-demo中line图示例
• scrollStart(e), scroll(e), scrollEnd(e)设置支持图表拖拽系列事件(支持line, area, column)，具体参考wx-charts-demo中ScrollLine图示例

• renderComplete 图表渲染完成（如果有动画效果，则动画效果完成时触发）

let chart = new wxCharts(...);
chart.addEventListener('renderComplete', () => {
    // your code here
});

各位遇到问题请先参考以下问题，如果仍不能解决，请留言。

• 如果用在您的项目上图表不显示，请先运行demo页面，如果demo页面也无法显示，请查看全局样式是否定义了canvas的样式，如有请取消。
• 如发现实例化图表后，客户端卡死的状况，请在实例化图表前（即调用showColumn(canvasId,chartData)前）检查传入图表数组（chartData.categories和chartData.series）是否为空，如果为空则不要实例化图表。后续将在源码中解决此问题。
• 图表背景颜色问题，很多朋友设置图表背景颜色时候，只修改了view和canvas的css,忘记了修改实例化参数中的background:'#FFFFFF'，导致图表画板右侧有一道白条（这个是图表配置中的右边距），所以特修改了demo中的柱状图的背景颜色供大家参考。

• 在高分屏模式下，如果发现图表已显示，但位置不正确，请检查上级view容器的样式，为了解决高分屏canvas模糊问题，使用了css的transform，所以请修改上级样式使canvas容器缩放至相应位置。
• 如果将canvas放在多级组件下，遇到ToolTip不显示或点击区域不正确，请在touch事件中增加以下代码解决。

//#ifdef H5
e.mp.currentTarget.offsetTop+=uni.upx2px(510);
//#endif

uni.upx2px(510);是canvas组件的上级组件的高度

• 很多小伙伴们自行把本插件做成组件来调用，做成组件需要注意，如果涉及到v-if切换显示图表组件，第二次可能会变空白，这里有两个建议：1、建议用v-show替代v-if切换显示图表组件。2、建议参考demo，不要将canvas做到组件里使用，即直接写在主页面中。