uChartsPage 封装使用
在线文档 ： https://www.kancloud.cn/qiun/ucharts/1073940
封装
<template>
<view class="canvas-main">
<canvas v-if="canvasId" :id="canvasId" :canvasId="canvasId"
: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'}"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
@error="error">
</canvas>
</view>
</template>
<script>
import uCharts from './u-charts.js';
var canvases = {};
export default {
props: {
type: {
required: true,
type: String,
default: 'column'
},
opts: {
required: true,
type: Object,
default () {
return null;
},
},
legend: {
type: Object,
default () {
return null;
},
},
xAxis: {
type: Object,
default () {
return null;
},
},
yAxis: {
type: Object,
default () {
return null;
},
},
extra: {
type: Object,
default () {
return null;
},
},
canvasId: {
type: String,
default: 'u-canvas',
},
fontSize: {
default: 11,
},
background: {
type: String,
default: '#fff'
},
rotate: {
type: Boolean,
default: false
},
enableScroll: {
type: Boolean,
default: false
},
cWidth: {
default: 375,
},
cHeight: {
default: 250,
},
pixelRatio: {
type: Number,
default: 1,
},
},
watch: {
opts:function(val) {
this.chartInit();
}
},
methods: {
chartInit() {
canvases[this.canvasId] = new uCharts({
$this: this,
canvasId: this.canvasId,
type: this.type,
legend: this.legend !==null?this.legend:true,
fontSize: this.fontSize,
background: this.background,
rotate: this.rotate,
pixelRatio: this.pixelRatio,
animation: true,
categories: this.opts.categories,
series: this.opts.series,
enableScroll: this.enableScroll,
xAxis: this.xAxis !==null?this.xAxis:{
disableGrid: true,
itemCount: 4,
scrollShow: true
},
yAxis: this.yAxis !==null?this.yAxis:{
//disabled:true
},
dataLabel: true,
width: this.cWidth * this.pixelRatio,
height: this.cHeight * this.pixelRatio,
extra: this.extra?this.extra:{
column: {
type: 'group',
}
}
});
},
changeData(cid,newdata) {
canvases[cid].updateData({
series: newdata.series,
categories: newdata.categories
});
},
touchStart(e) {
canvases[this.canvasId].showToolTip(e, {
format: function(item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
canvases[this.canvasId].scrollStart(e);
},
touchMove(e) {
canvases[this.canvasId].scroll(e);
},
touchEnd(e) {
canvases[this.canvasId].scrollEnd(e);
},
error(e) {
console.log(e)
}
},
};
</script>
<style scoped>
.charts {
width: 100%;
min-height: 100vh;
flex: 1;
background-color: #FFFFFF;
}
</style>
页面使用
<uChartsPage v-bind="config"/>
引入组件
import uChartsPage from '@/components/u-charts/component.vue';
配置
config: {
canvasId:'line-charts',
type: 'line',
opts: {
categories: [],
series: [],
},
extra: {
line:{
type: 'straight'
}
},
width: 700,
cHeight: 550,
rotate: true
}
数据配置：
onLoad() {
this.getData();
},
methods: {
getData() {
let LineS = {
categories: [],
series: [
{
"name": "免费发放对象",
"data": []
},
{
"name": "需评估对象",
"data": []
},
{
"name": "普通服务对象",
"data": []
}]
};
this.config.opts =LineS
}
}
配置项参数说明
//通用基础项设置 basicAs
$this: this, //this实例组件内使用图表，必须传入this实例
canvasId: this.canvasId, //页面组件canvas-id，支付宝中为id
type: 'column',
//图表类型，可选值为pie、line、column、area、ring、radar、arcbar、gauge、candle、bar、mix、rose、word
padding: [15, 15, 0, 15], //画布填充边距，顺序为上右下左，同css，但必须4位
colors: ['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d'],
//图表配色方案，不传则使用系统默认配置
rotate: false, //是否横屏展示
rotateLock: true, // 锁定横屏模式，如果在支付宝和百度小程序中使用横屏模式，请赋值true，否则每次都会旋转90度。跨端使用通过uni-app的条件编译来赋值
enableScroll: true, //是否开启图表可拖拽滚动 默认false 支持line, area, column, candle图表类型(需配合绑定@touchstart, @touchmove, @touchend方法)
enableMarkLine: false, //是否显示辅助线 默认false 支持line, area, column, candle, mix图表类型
animation: true, //是否动画展示
dataLabel: true, //是否在图表中显示数据标签内容值
duration: 1000, //动画展示时长单位毫秒
fontSize: 12, //全局默认字体大小（可选，单位为px，默认13px）高分屏不必乘像素比，自动根据pixelRatio计算
background: '#fff', //canvas背景颜色（如果页面背景颜色不是白色请设置为页面的背景颜色，默认#ffffff）无作用
pixelRatio: 1, //像素比，默认为1，仅支付宝小程序需要大于1，其他平台必须为1
width: this.cWidth, //canvas宽度，单位为px，支付宝高分屏需要乘像素比(pixelRatio)
height: this.cHeight, //canvas高度，单位为px，支付宝高分屏需要乘像素比
//数据列表配置项 dataAS
categories: this.dataAs[this.labelKey], //数据类别(饼图、圆环图不需要)
series: this.dataAs[this.valueKey], //数据列表
//坐标轴配置项 axisAs
xAxis: {
// X轴配置
type: 'grid',
rotateLabel: true, //X轴刻度（数值）标签是否旋转（仅在文案超过单屏宽度时有效）
itemCount: 5, //X轴可见区域数据数量（即X轴数据密度），配合拖拽滚动使用（即仅在启用enableScroll时有效）
// labelCount:Number,//X轴可见区域标签数量（即X轴数刻度标签单屏幕限制显示的数量）
scrollShow: true, //是否显示滚动条，配合拖拽滚动使用（即仅在启用enableScroll时有效）
scrollAlign: 'left', //滚动条初始位置，left为数据整体左对齐，right为右对齐
scrollBackgroundColor: '#EFEBEF', // X轴滚动条背景颜色，配合拖拽滚动使用（即仅在启用enableScroll时有效）
scrollColor: '#A6A6A6', //X轴滚动条颜色，配合拖拽滚动使用（即仅在启用enableScroll时有效）
disabled: false, //不绘制X轴
disableGrid: true, //不绘制X轴网格(即默认绘制网格)
fontColor: '#666666', //X轴数据点颜色
boundaryGap: 'center', //折线图、区域图起画点结束点方法：center为单元格中间起画，justify为0点起画即两端对齐
axisLine: false, //坐标轴轴线是否显示
axisLineColor: '#cccccc' //坐标轴轴线颜色
},
yAxis: {
//如果是多坐标系则传数组型对象[{disabled:true},{disabled:false}]
disabled: false, //不绘制Y轴
position: 'left', //Y轴位置，可选值左侧left右侧right(未起效果)
format: val => {
let defaultSetting = { type: 'number', fixed: 0, name: '' };
let { type, fixed, name } = this.yAxisAs &&
this.yAxisAs.formatter ?
Object.assign(defaultSetting,
this.yAxisAs.formatter) : defaultSetting;
if (type == 'number') {
return `${val.toFixed(fixed)}${name}`;
} else if (type == 'percent') {
let newName = name || '%';
return `${(val * 100).toFixed(fixed)}${name}${newName}`;
} else {
return val.toFixed(0);
}
},
title: '' //Y轴标题
},
//图列配置 legendAs
legend: {
show: true, //是否显示各类别的图例标识
position: 'top',
float: 'left',
padding: 10,
margin: 0
// itemGap:10,
//各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
// fontColor:'666666',
// lineHeight:17,//默认opts.fontSize+5
// fontSize:12,//默认opts.fontSize
// backgroundColor:rgba(0,0,0,0),//图例背景颜色
// borderColor:rgba(0,0,0,0),//图例边框颜色
// format:()=>{}//未来预留，暂未生效】自定义显示数据内容
},
//扩展配置 extraAs 详情请看 http://doc.ucharts.cn/1172130
extra: {
column: {
//参考官网配置
type: 'group',
width: (this.cWidth * 0.45) / this.dataAs[this.labelKey].length
}
}
