Ucharts基础通用属性

林太白
2,243 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

Ucharts基础通用属性

准备

颜色值：

color: '#2fc25b'
color: '#facc14'
color: '#f04864'

HTML部分

<view class="qiun-charts">
        <canvas canvas-id="canvasLineA" class="charts" id="canvasLineA"  
        disable-scroll=true :ontouch='true'  :canvas2d='true' 
        @touchstart="touchLineA"  @touchmove="moveLineA"
	@touchend="touchEndLineA"></canvas>
</view>

css部分

.qiun-charts {
	width: 630rpx;
	height: 420rpx;
	background-color: #FFFFFF;
	user-select: none;
	position: relative;
        z-index: 500;
}

.charts {
	background-color: #FFFFFF;
	position: relative;
	overflow: hidden;
	width: 630rpx;
	height: 420rpx;
	border-width: 0rpx;
	z-index: 500;
}

js部分：


pixelRatio：1,像素比，默认为1

折线图数据

//折线图数据
showLineB(canvasId, chartData) {
    canvaLineB = new uCharts({
    // $this: this,
    // canvasId: canvasId,
        context: uni.createCanvasContext(canvasId, this),
        type: 'column', //类型
	fontSize: 10,
	background: '#fff', //canvas背景颜色
	pixelRatio: this.pixelRatio,
	animation: true, //动画效果开启
        
	enableScroll: true, //可拖拽拉伸
        //是否开启图表可拖拽滚动 默认false 
        //支持line, area, column, candle图表类型
        //(需配合绑定@touchstart, @touchmove, @touchend方法)
        
        enableMarkLine:true, 
        //是否显示辅助线 默认false 支持line, area, column, candle图表类型
        
        legend:true,//图例设置，是否显示图表下方各类别的标识,默认为 true
        
	disableScroll: true, 
        //在图表上滑动时禁止页面滚动。
        //开启后，触摸图表时将会禁止屏幕滚动以及下拉刷新
        
	dataLabel: true, //显示上方文案
        
        touchMoveLimit: 70,//图表拖拽时，每秒重新渲染的帧数
	enableScroll: true, //可拖拽拉伸
        
	dataPointShape:true,//是否显示数据点的图形标识
	dataPointShapeType: "hollow", //空心 图形标识点显示类型
        "padding": [ 15,15, 0,5],   //图表的边距
	categories: chartData.categories, //数据
	series: chartData.series,  //数据
	xAxis: {
            "disabled": false, //是否启用 不绘制X轴 
            type:grid, // X轴网格样式，可选calibration(刻度)、grid（网格）
           "gridColor": "#CCCCCC", //X轴网格颜色 例如#7cb5ec
           "gridType": "solid", //X轴网格线型 'solid'为实线、'dash'为虚线`
           "dashLength": 4, //X轴网格为虚线时，单段虚线长度
           "gridEval": 1, 
            
            labelCount: 4, //默认显示个数 X轴可见区域标签数量,
            //X轴数刻度标签单屏幕限制显示数量 
            itemCount:4,//x轴单屏显示数据的数量，默认为5个，
            // 仅在启用enableScroll时有效
            
            scrollShow:true,//新增是否显示滚动条，默认false
            scrollAlign:'left',//滚动条初始位置
            scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
            scrollColor:'#DEE7F7',//默认为 #A6A6A6
            
            disableGrid: true, //不绘制X轴网格(即默认绘制网格)
           "axisLine": true, //坐标轴刻度线是否显示 注v1.9.0有效 
           "axisLineColor": "#CCCCCC", //坐标轴轴线颜色 注v1.9.0有效 
           "calibration": false, //坐标轴刻度线是否显示 注v1.9.0有效 
           "fontColor": "#666666",  //X轴数据点颜色 例如#7cb5ec
           "fontSize": 13, 
           "rotateLabel": false, //X轴刻度标签是否旋转（仅在文案超过单屏宽度时有效） ）,默认为5个 
           "boundaryGap": "center", //折线图、区域图起画点结束点方法：center为单元格中间起画，justify为0点起画即两端对齐 
           "disableGrid": true,
           
           "scrollShow": false, //新增是否显示滚动条，默认false 配合拖拽滚动使用（即仅在启用enableScroll时有效） 
           "scrollAlign": "left", //滚动条初始位置,left为数据整体左对齐 
           "scrollColor": "#A6A6A6", //默认为 #A6A6A6 
           "scrollBackgroundColor": "#EFEBEF", //默认为 #EFEBEF 
           "format": "",
        },
	yAxis: {
            //disabled:true //不绘制Y轴
            format: '',//自定义Y轴文案显示
            min:50, //Y轴起始值
            max:250, //Y轴终止值
            title:'Y轴title',//Y轴title
            disableGrid: true, //不绘制Y轴网格(即默认绘制网格)
           
            splitNumber:5, // Y轴网格数量
            gridType:'dash', // Y轴网格线型 'solid'为实线、'dash'为虚线
            gridColor:'#CCCCCC', // Y轴网格颜色 例如#7cb5ec
            dashLength:10, // Y轴网格为虚线时，单段虚线长度
            fontColor:'', //Y轴数据点颜色 例如#7cb5ec
            titleFontColor:"",Y轴title颜色 例如#7cb5ec
            
            data:[ 
               {axisLine: true, //坐标轴轴线是否显示 
                axisLineColor: 'blue', //坐标轴轴线颜色 
             } ]
	},
	"legend": {
	"show": false,
	},
	width: this.cWidth * this.pixelRatio,
	height: this.cHeight * this.pixelRatio,
	extra: {
          line: {
		type: 'straight', //straight直线
		width: 2
	  }
          
	  // 以下是柱状图		
          column: {
            // 颜色支持线性渐变
            color: '#2fc25b',
            // {
		// type: 'linear',
		// colorStops: [{
		// offset: 0,
		// color: '#2fc25b' // 0% 处的颜色
		// }, {
		// offset: 1,
		// color: '#2fc25b' // 100% 处的颜色
		// }],
		// global: false ,// 缺省为 false
		// },
		// 圆角半径，单位px，必须传入数组分别指定 4 个圆角半径
		barBorderRadius: [30, 30, 0, 0],
		// 半圆边框
		barBorderCircle: true,
		// 透明渐变（值范围0到1，自下而上渐变透明显示column条，值越小透明程度越高）
		opacityColor: 0.2,
		// 白色渐变（值范围0到1，自下而上向白色渐变显示column条，值越大白色程度越高）
		linearColor: 0.9,
		//多series之间的间距
                width: 10,
		// color:'#2fc25b',
                }
            }
	});
    },

最后methods里面搭配相应的方法，搭配该方法才能使图表可以拖动使用，X轴拖动滚动事件

//A的滚动事件
touchLineA(e) {
	canvaLineA.scrollStart(e);
},
			
moveLineA(e) {
	canvaLineA.scroll(e);
},

touchEndLineA(e) {
    canvaLineA.scrollEnd(e);
    //下面是toolTip事件，如果滚动后不需要显示，可不填写
    canvaLineA.showToolTip(e, {
	format: function(item, category) {
		return category + ' ' + item.name + ':' + item.data
	}
	});
    },
avatar
文章
阅读
粉丝