uCharts - 23-04-09

First Post:

Last Update:

uniapp - 23-04-09

uCharts与eCharts

为什么会做这个？eCharts不香吗

呃呃，eCharts因为涉及大量dom操作，微信小程序上会报错，uCharts对小程序兼容性较好

食用方式

先看看官方的例子，后面再以一个菜鸟的角度分解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
  <view>
    <canvas canvas-id="column" id="column" class="charts" @touchend="tap"/>
  </view>
</template>

<script>
import uCharts from '../../../js/uCharts-master/uni-app/uCharts-原生/u-charts.min.js'

var uChartsInstance = {};
export default {
  data() {
    return {
      cWidth: 750,
      cHeight: 500
    };
  },
  onReady() {
    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(750);
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(500);
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2016","2017","2018","2019","2020","2021"],
            series: [
              {
                name: "目标值",
                data: [35,36,31,33,13,34]
              },
              {
                name: "完成量",
                data: [18,27,21,24,6,28]
              }
            ]
          };
        this.drawCharts('column', res);
      }, 500);
    },
    drawCharts(id,data){
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "column",
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: "#FFFFFF",
        padding: [15,15,0,5],
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [{min: 0}]
        },
        extra: {
          column: {
            type: "group"
          }
        }
      });
    },
    tap(e){
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    }
  }
};
</script>

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

涉及到的方法有：getServerData()模拟从服务器获取数据的时间延时，同时会调用drawChart(canvasID)，drawChart(canvasID)的逻辑是先创建canvas画布实例（canvasId+this），在创建uCharts实例，uCharts实例引用至canvasId索引的uCharts对象，
创建实例的配置里面给定表格类型type、绑定画布实例context、width、height、categories （同一series不同category间的颜色一样）、series （同一categorie不同series间的颜色不同）、extra>column>type:”group”（实测在多个series的时候不能缺少）

关于样式的必要性

首先，vc的data中宽高有必要吗？
答案是：不写不影响效果的呈现但是写了就有了Vue的数据代理（响应式的数据）

uni.upx2px的作用？
答案是：将rpx单位值转换成px，参考uni.upx2px()
最后最后，style也不能缺需要赋予同等宽高（方便记忆，也许不一定要一样）

关于categories与series

categories （同一series不同category间的颜色一样），series （同一categorie不同series间的颜色不同）

去掉图例以及扩大间距

图例配置 opts.legend、扩展配置>柱状图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//图例
legend:{
	show:false
},

extra:{
	column:{
		type:'group',
		//多属性间距
		seriesGap:20,
		//柱的宽度
		width:140
	}
}

下溢出的处理

手动加上y轴的值：多Y轴配置 opts.yAxis.data[i]

1
2
3
4
5
yAxis:{
	data:[
		{min:0,max:90}
	]
}

附上样题的柱状图复现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<template>
	<canvas class="uctest" id="uctest" canvas-id="uctest" @touchend="tap"></canvas>
</template>

<script>
	import uCharts from '../../../js/uCharts-master/uni-app/uCharts-原生/u-charts'
	var uChartsInstances = {}
	export default {
		onReady() {
			this.cWidth = uni.upx2px(750)
			this.cHeight = uni.upx2px(500)
			this.getServerData()
		},
		data() {
			return {
				chartData:{},
				cWidth:750,
				cHeight:500
			}
		},
		methods:{
			getServerData() {
				setTimeout(()=>{
					let res = {
						categories:[''],//不写就不会显示
						series:[
							{
								name:'第一种',
								data:[82]
							}
							,
							{
								name:'第二种',
								data:[63]
							}
						]
					}
				this.chartData = JSON.parse(JSON.stringify(res))
				this.drawChart('uctest')
				}
				,300)
			},
			drawChart(id,data) {
				const canvasInstance = uni.createCanvasContext(id,this)
				uChartsInstances[id] = new uCharts({
					type:'column',
					context:canvasInstance,
					width:this.cWidth,
					height:this.cHeight,
					categories:this.chartData.categories,
					series:this.chartData.series,
					animation:true,
					padding:[15,15,0,5],
					legend:{
						show:false
					},
					yAxis:{
						data:[
							{min:0,max:90}
						]
					},
					extra:{
						column:{
							type:'group',
							seriesGap:20,
							width:140
						}
					}
				})
			},
			tap(e){
				console.log(uChartsInstances[e.target.id]);
				uChartsInstances[e.target.id].touchLegend(e)
				uChartsInstances[e.target.id].showToolTip(e)
			}
		}
	}
</script>

<style>
	.uctest{
		width: 750rpx;
		height: 500rpx;
	}
</style>

以上，uCharts新手的原生方式探索之路

昨天其实已经试过uCharts的组件方式跟eCharts的原生方式，感觉uCharts的组件方式特别适合小程序，而eCharts的原生方式比uCharts的原生方式更友好一些

≡