代码贡献: uchart微信小程序支持canvas2D

替换源文件u-charts.js的 var Charts = function Charts(opts) {} 函数，大约是在5122行

var Charts = function Charts(opts) {
  //modify 改为支持canvas2d，解决同层渲染;
  wx.createSelectorQuery().select('#' + opts.canvasId).fields({ node: true, size: true }).exec((res) => {
    var dpr = 1;
    if(res[0].nodeCanvasType){
      dpr = wx.getSystemInfoSync().pixelRatio;
      opts.pixelRatio = dpr;
      const width = res[0].width
      const height = res[0].height
      const canvas = res[0].node       
      canvas.width = width * dpr
      canvas.height = height * dpr
      opts.width = canvas.width 
      opts.height = canvas.height 
      this.context = canvas.getContext(res[0].nodeCanvasType);
      this.context.setStrokeStyle = function(e){ return this.strokeStyle=e; }
      this.context.setLineWidth = function(e){ return this.lineWidth=e; }
      this.context.setLineCap = function(e){ return this.lineCap=e; }
      this.context.setFontSize = function(e){ return this.font=e+"px sans-serif"; }
      this.context.setFillStyle = function(e){ return this.fillStyle=e; }
      this.context.draw = function(){ }
    }else{
      this.context = wx.createCanvasContext(opts.canvasId, opts.$this);
      opts.pixelRatio = opts.pixelRatio ? opts.pixelRatio : 1;
    }
    opts.fontSize = opts.fontSize ? opts.fontSize * opts.pixelRatio : 13 * opts.pixelRatio;
    opts.title = assign({}, opts.title);
    opts.subtitle = assign({}, opts.subtitle);
    opts.duration = opts.duration ? opts.duration : 1000;
    opts.yAxis = assign({}, {
      data:[],
      showTitle:false,
      disabled:false,
      disableGrid:false,
      splitNumber:5,
      gridType: 'solid',
      dashLength: 4 * opts.pixelRatio,
      gridColor:'#cccccc',
      padding:10,
      fontColor:'#666666'
    }, opts.yAxis);
    opts.yAxis.dashLength *= opts.pixelRatio;
    opts.yAxis.padding *= opts.pixelRatio;
    opts.xAxis = assign({}, {
      rotateLabel: false,
      type: 'calibration',
      gridType: 'solid',
      dashLength: 4,
      scrollAlign: 'left',
      boundaryGap:'center',
      axisLine:true,
      axisLineColor:'#cccccc'
    }, opts.xAxis);
    opts.xAxis.dashLength *= opts.pixelRatio;
    opts.legend = assign({}, {
      show: true,
      position: 'bottom',
      float: 'center',
      backgroundColor: 'rgba(0,0,0,0)',
      borderColor: 'rgba(0,0,0,0)',
      borderWidth: 0,
      padding: 5,
      margin: 5,
      itemGap: 10,
      fontSize: opts.fontSize,
      lineHeight: opts.fontSize,
      fontColor: '#333333',
      format: {},
      hiddenColor: '#CECECE'
    }, opts.legend);
    opts.legend.borderWidth = opts.legend.borderWidth * opts.pixelRatio;
    opts.legend.itemGap = opts.legend.itemGap * opts.pixelRatio;
    opts.legend.padding = opts.legend.padding * opts.pixelRatio;
    opts.legend.margin = opts.legend.margin * opts.pixelRatio;
    opts.extra = assign({}, opts.extra);
    opts.rotate = opts.rotate ? true : false;
    opts.animation = opts.animation ? true : false;
    opts.rotate = opts.rotate ? true : false;

    let config$$1 = JSON.parse(JSON.stringify(config));
    config$$1.colors = opts.colors ? opts.colors : config$$1.colors;
    config$$1.yAxisTitleWidth = opts.yAxis.disabled !== true && opts.yAxis.title ? config$$1.yAxisTitleWidth : 0;
    if (opts.type == 'pie' || opts.type == 'ring') {
      config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.pie.labelWidth * opts.pixelRatio || config$$1.pieChartLinePadding * opts.pixelRatio;
    }
    if (opts.type == 'rose') {
      config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.rose.labelWidth * opts.pixelRatio || config$$1.pieChartLinePadding * opts.pixelRatio;
    }
    config$$1.pieChartTextPadding = opts.dataLabel === false ? 0 : config$$1.pieChartTextPadding * opts.pixelRatio;
    config$$1.yAxisSplit = opts.yAxis.splitNumber ? opts.yAxis.splitNumber : config.yAxisSplit;

    //屏幕旋转
    config$$1.rotate = opts.rotate;
    if (opts.rotate) {
      let tempWidth = opts.width;
      let tempHeight = opts.height;
      opts.width = tempHeight;
      opts.height = tempWidth;
    }

    //适配高分屏
    opts.padding = opts.padding ? opts.padding : config$$1.padding;
    for (let i = 0; i < 4; i++) {
      opts.padding[i] *= opts.pixelRatio;
    }
    config$$1.yAxisWidth = config.yAxisWidth * opts.pixelRatio;
    config$$1.xAxisHeight = config.xAxisHeight * opts.pixelRatio;
    if (opts.enableScroll && opts.xAxis.scrollShow) {
      config$$1.xAxisHeight += 6 * opts.pixelRatio;
    }
    config$$1.xAxisLineHeight = config.xAxisLineHeight * opts.pixelRatio;
    config$$1.fontSize = opts.fontSize;
    config$$1.titleFontSize = config.titleFontSize * opts.pixelRatio;
    config$$1.subtitleFontSize = config.subtitleFontSize * opts.pixelRatio;
    config$$1.toolTipPadding = config.toolTipPadding * opts.pixelRatio;
    config$$1.toolTipLineHeight = config.toolTipLineHeight * opts.pixelRatio;
    config$$1.columePadding = config.columePadding * opts.pixelRatio;
    opts.$this = opts.$this ? opts.$this : this;  
    opts.chartData = {};
    this.event = new Event();
    this.scrollOption = {
      currentOffset: 0,
      startTouchX: 0,
      distance: 0,
      lastMoveTime: 0
    };        
    if (opts.extra) {
      if(opts.extra.arcbar){
        if(opts.extra.arcbar.width) opts.extra.arcbar.width *= dpr;
        if(opts.extra.arcbar.radius) opts.extra.arcbar.radius *= dpr;
        if(opts.extra.arcbar.gap) opts.extra.arcbar.gap *= dpr;
        if(opts.extra.arcbar.center) {
          if(opts.extra.arcbar.center.x) opts.extra.arcbar.center.x *= dpr;
          if(opts.extra.arcbar.center.y) opts.extra.arcbar.center.y *= dpr;
        }
      }
      if(opts.extra.gauge){
        if(opts.extra.gauge.width) opts.extra.gauge.width *= dpr;
        if(opts.extra.gauge.splitLine){
          if(opts.extra.gauge.splitLine.fixRadius) opts.extra.gauge.splitLine.fixRadius *= dpr;
          if(opts.extra.gauge.splitLine.width) opts.extra.gauge.splitLine.width *= dpr;
          if(opts.extra.gauge.splitLine.childWidth) opts.extra.gauge.splitLine.childWidth *= dpr;
        }
        if(opts.extra.gauge.pointer){
          if(opts.extra.gauge.pointer.width) opts.extra.gauge.pointer.width *= dpr;             
        }            
      }
      if(opts.extra.column){
        if(opts.extra.column.width) opts.extra.column.width *= dpr;
        if(opts.extra.column.meter) {
          if(opts.extra.column.meter.border) opts.extra.column.meter.border *= dpr;
        }
        if(opts.extra.column.barBorderRadius && opts.extra.column.barBorderRadius.length == 4){
          opts.extra.column.barBorderRadius[0] *= dpr;
          opts.extra.column.barBorderRadius[1] *= dpr;
          opts.extra.column.barBorderRadius[2] *= dpr;
          opts.extra.column.barBorderRadius[3] *= dpr;
        }
      }
      if(opts.extra.pie){
        if(opts.extra.pie.activeRadius) opts.extra.pie.activeRadius *= dpr;
        if(opts.extra.pie.labelWidth) opts.extra.pie.labelWidth *= dpr;
        if(opts.extra.pie.ringWidth) opts.extra.pie.ringWidth *= dpr;
        if(opts.extra.pie.borderWidth) opts.extra.pie.borderWidth *= dpr;
      }
      if(opts.extra.rose){
        if(opts.extra.rose.activeRadius) opts.extra.rose.activeRadius *= dpr;
        if(opts.extra.rose.labelWidth) opts.extra.rose.labelWidth *= dpr;
        if(opts.extra.rose.borderWidth) opts.extra.rose.borderWidth *= dpr;
      }
      if(opts.extra.line){
        if(opts.extra.line.width) opts.extra.line.width *= dpr;
      }
      if(opts.extra.area){
        if(opts.extra.area.width) opts.extra.area.width *= dpr;
      }
      if(opts.extra.funnel){
        if(opts.extra.funnel.activeWidth) opts.extra.funnel.activeWidth *= dpr;
        if(opts.extra.funnel.borderWidth) opts.extra.funnel.borderWidth *= dpr;
      }
      if(opts.extra.map){
        if(opts.extra.map.borderWidth) opts.extra.map.borderWidth *= dpr;
      }
      if(opts.extra.bar){
        if(opts.extra.bar.width) opts.extra.bar.width *= dpr;
      }
      if(opts.extra.markLine){
        if(opts.extra.markLine.dashLength) opts.extra.markLine.dashLength *= dpr;
      }
      if(opts.extra.tooltip){
        if(opts.extra.tooltip.dashLength) opts.extra.tooltip.dashLength *= dpr;
      }
    }
    if(opts.title){
      if(opts.title.fontSize) opts.title.fontSize *= dpr;
      if(opts.title.offsetX) opts.title.offsetX *= dpr;
      if(opts.title.offsetY) opts.title.offsetY *= dpr;
    }
    if(opts.subtitle){
      if(opts.subtitle.fontSize) opts.subtitle.fontSize *= dpr;
      if(opts.subtitle.offsetX) opts.subtitle.offsetX *= dpr;
      if(opts.subtitle.offsetY) opts.subtitle.offsetY *= dpr;
    }
    this.opts = opts;
    this.config = config$$1;

    drawCharts.call(this, opts.type, opts, config$$1, this.context);
  })
};

小程序中需要为canvas组件指定type="2d"即可使ucharts支持canvas2D，如果不需要使用canvas2D，则不设置type，或者将type设置为空

//canvas2D
<canvas style="width:700rpx;height:400rpx;" type="2d" canvas-id="canvasId" id="canvasId"></canvas>
//canvas
<canvas style="width:700rpx;height:400rpx;" type="" canvas-id="canvasId" id="canvasId"></canvas>
//浮于canvas上层的view或其他组件，必须设置z-index

点击下载修改后的源码

使用了此方法·真机是不会有层级问题·但是在图形变形了，在模拟器又会出现定位问题

输入图片说明

@yudan215 你是否有完整替换源码

@yudan215 你是否有完整替换源码

@yyoinge 另外请检查canvas组件的width和height和传入ucharts的width，height是否一致，以及画图后是否又有代码动态调整了canvas的高度

@yudan215 你是否有完整替换源码

@yyoinge 我是直接替换文件的·区别只是在原来的canvas加上type="2d"

@yyoinge 另外请检查canvas组件的width和height和传入ucharts的width，height是否一致，以及画图后是否又有代码动态调整了canvas的高度

@yyoinge :style="{'width':cWidth+'px','height':cHeight+'px'}" 试了一下是这部分的问题·但是没有加type="2d"是能正常显示的·加了以后这个会导致变形

<template>
	<view style="height: 100%;">
		<view class="question-item-chart">
			<canvas type="2d" :style="{'width':cWidth+'px','height':cHeight+'px'}" canvas-id="canvasPie" id="canvasPie"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/UCharts/u-charts-2d.js';
	export default {
		data() {
			return {
				cWidth:'',
				cHeight:'',
				colorList: [
					'#04B396',
					'#2685E7',
					'#FFDF41',
					'#E6E6E6',
					'#FF9F22',
					'#7EBDFF',
					'#56CC91',
					'#C9C9C9',
				],
				pieOpt: {
					series: [{
						"name": "一班",
						"data": 50
					}, {
						"name": "二班",
						"data": 30
					}, {
						"name": "三班",
						"data": 0
					}, {
						"name": "四班",
						"data": 0
					}, {
						"name": "五班",
						"data": 1
					}]
				},
			};
		},
		onLoad() {
			this.cWidth=uni.upx2px(630);
			this.cHeight=uni.upx2px(450);
			this.showPie();
		},
		methods: {
			showPie() {
				new uCharts({
					$this: this,
					colors: this.colorList,
					canvasId: 'canvasPie',
					type: 'pie',
					fontSize: 14,
					legend:{ show:false },
					pixelRatio: 1,
					series: this.pieOpt.series,
					animation: true,
					width: this.cWidth * 1,
					height: this.cHeight * 1,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth:15
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">

</style>

这是完整代码，如果不用改过的源码和type="2d"呈现是正常的

可以参照代码片段
https://developers.weixin.qq.com/s/4QpFrrmi73mY

已兼容2d模式，感谢付出！

GVP uCharts / uCharts

内容风险标识

评论 (9)

GVPuCharts / uCharts

内容风险标识