本文介绍如何在uni-app中使用UCharts组件绘制折线图、圆环图及雷达图，并提供配置示例和解决常见问题的方法。
❤ uniapp使用ucharts
1、认识ucharts
uCharts 是一个用于 Vue.js 和小程序的图表库，支持多种图表类型和交互功能。它设计用于在小程序、Web 和应用中创建高性能、精美的图表。
官方版本
地址：
https://www.ucharts.cn/v2/#/
uCharts特点
- 功能丰富：支持多种图表类型，如柱状图、折线图、饼图、雷达图等。 高性能：优化了图表的渲染性能，适合处理大数据量的图表。
易于集成：支持在小程序、Vue.js 等框架中使用。 交互功能：提供了图表的交互功能，如点击、缩放、滚动等。
高度定制化：提供了丰富的配置选项，允许用户根据需求定制图表的样式和功能。
2、ucharts的使用
（1）通过 npm 安装（方式一）
在 uni-app 项目中使用 uCharts，你可以通过 npm 安装
npm install ucharts
（2）安装 uCharts 插件（方式二）
使用 HBuilderX可以直接在 HBuilderX 插件市场中搜索并安装 uCharts 插件
（3）引入和使用
- 在项目的需要使用 uCharts 的页面或组件中，引入 uCharts 并初始化图表
import uCharts from 'ucharts';
export default {
data() {
return {
chart: null,
};
},
methods: {
initChart() {
const chart = new uCharts({
// 配置参数
// ...
});
this.chart = chart;
},
},
onReady() {
this.initChart();
},
};
（4）配置基础类型
initChart() {
const chart = new uCharts({
type: 'bar', // 图表类型，例如 'bar', 'line', 'pie'
canvasId: 'myChart',
data: [10, 20, 30, 40],
categories: ['A', 'B', 'C', 'D'],
// 其他配置项
});
this.chart = chart;
}
（5）在页面中使用
<template>
<view>
<canvas id="myChart" canvas-id="myChart" />
</view>
</template>
3、Ucharts图表使用（npm下载的方式）
Y轴属性配置
yAxis: {
gridType:'dash', //
gridColor:'#CCCCCC', //
dashLength:10, //
splitNumber:5, //
data:[
{
axisLine: true, //坐标轴轴线是否显示
axisLineColor: 'blue', //坐标轴轴线颜色
}
]
},
折线图
图表使用优化
今天遇到了使用Ucahrts图表拖拽时需要优化
touchMoveLimit: 60, //图表拖拽每秒渲染次数
不过最后还是没有解决问题。因为数据过大的时候，尤其是超过1200条然后X轴的数据就开始卡顿了，而且Ucharts一直是开源版本，但是最近却突然开始登录了，于是就没有继续使用。
ucharts使用折线图时x轴数据过多
xAxis": {
"labelCount": 4, //默认显示个数
itemCount:chartData.length //x轴数据的长度
},
颜色的改变
官方给我们默认的
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
修改颜色就是修改opt的颜色
opts: {
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [5,5,5,5],
enableScroll: false,
extra: {
pie: {
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
}
使用注意（series 数据类型必须为Number类型）
格式类型
"Ring": {
"series": [{
"name": "一班",
"data": 50
}, {
"name": "二班",
"data": 30
}, {
"name": "三班",
"data": 20
}, {
"name": "四班",
"data": 18
}, {
"name": "五班",
"data": 8
}]
}
4、(插件) Uniapp使用Ucharts
（qiun-data-charts秋云组件类型）
公共样式
<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
width: 100%;
height: 300px;
}
</style>
折线图使用
this.getChartline(); //折线图
- 结构
type="area" //区域图
type="line" //折线图
<template>
<view class="charts-box">
<qiun-data-charts
type="area"
:opts="optsline"
:chartData="chartdataline"
/>
</view>
</template>
- 数据
chartdataline: {},
optsline:{},
折线图详细配置
// 折线图表配置
opts: {
animation: true, // 是否动画展示图表
legend: {
show: false, // 提示关闭
},
xAxis: {
disableGrid: false, // true不绘制纵向网格 false绘制纵向网格
itemCount: 8,
fontColor:'#fff'
},
yAxis: {
axisLine:false,
},
extra:{
line:{type:'curve'},
tooltip:{legendShow:true},
//区域部分
area: {
type: "straight",
opacity: 0.2,
addLine: true,
width: 2,
gradient: false,
activeType: "hollow"
}
},
}
- 折线图滑动
1、添加:ontouch="true"
2、启用图表拖拽功能enableScroll: true
3、x轴上的scrollShow上的false改成true scrollShow: true,
itemCount是x轴当前屏幕显示的个数，根据需求来定
itemCount: 8,
- 设置y轴默认间隔
完整使用
// 折线图表配置
optsline:{
// color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
animation: true, // 是否动画展示图表
legend: {
show: false,
},
padding: [10, 10, 10, 10],
rotate: false, //横屏模式
enableScroll: true,
dataLabel: false,
xAxis: {
disableGrid: true, // true不绘制纵向网格 false绘制纵向网格
itemCount: 8,
fontColor: '#fff',
},
yAxis: {
min: 0,
// interval: 10, // 设置y轴默认间隔为10
// max: 40,
axisLine: false,
disabled: false, //不绘制Y轴
// disableGrid: false, //不绘制横向向网格(即默认绘制网格)
fontColor: '#83B9A3',
data: [
// 多Y轴配置
{
// axisLineColor: "", // 坐标轴轴线颜色，默认#CCCCCC
calibration: false, // 刻度线是否显示
fontColor: "#83B9A3", // 数据点（刻度点）字体颜色，默认#666666
fontSize: 13, // 数据点（刻度点）字体大小
// textAlign: "right", //数据点（刻度点）相对轴线的对齐方式，可选值：'left','right','center'
titleFontSize: 13, // 标题字体大小
// // titleOffsetY: -5, // 标题纵向偏移距离，负数为向上偏移，正数向下偏移
// titleOffsetX: 0, // 标题横向偏移距离，负数为向左偏移，正数向右偏移
titleFontColor: "#83B9A3", //标题字体颜色，默认#666666
// unit: "", //Y轴刻度值后附加单位
// min: 0, // 当前Y轴起始值（默认数据中的最小值）
},
],
},
extra: {
line: {
type: 'curve'
},
tooltip: {
legendShow: true
},
area: {
type: "curve",
opacity: 0.3,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
},
},
},
- 设置横向标记线
extra => markLine
markLine:{
type: 'dash',
dashLength:4,
data:[
{
value:100,
lineColor:'red',
}
],
},
雷达图
- 结构
<template>
<view class="charts-box">
<qiun-data-charts
type="radar"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
- 数据
categories: ["维度1","维度2","维度3","维度4","维度5","维度6"],
series: [
{
name: "成交量1",
data: [90,110,165,195,187,172]
},
{
name: "成交量2",
data: [190,210,105,35,27,102]
}
]
};
- 雷达图详细配置
<script>
export default {
data() {
return {
chartData: {},
//您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
opts: {
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [5,5,5,5],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "right",
lineHeight: 25
},
extra: {
radar: {
gridType: "circle",
gridColor: "#CCCCCC",
gridCount: 3,
opacity: 0.2,
max: 200,
labelShow: true
}
}
}
};
},
onReady() {
this.getServerData();
},
methods: {
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: ["维度1","维度2","维度3","维度4","维度5","维度6"],
series: [
{
name: "成交量1",
data: [90,110,165,195,187,172]
},
{
name: "成交量2",
data: [190,210,105,35,27,102]
}
]
};
this.chartData = JSON.parse(JSON.stringify(res));
}, 500);
},
}
};
</script>
<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
width: 100%;
height: 300px;
}
</style>
- 雷达图legend显示
legend: {
show: false,
position: "right",
lineHeight: 25
},
- 雷达图背景线条
extra里面radar下的gridColor
extra: {
radar: {
radius:80, //雷达图半径
gridType: "radar",
//"radar"蜘蛛网格样式,"circle"圆形背景网格
gridColor: "#BEDDFD", //雷达图网格颜色
gridCount: 5, //雷达图网格数量
opacity: 1, //主图区域透明度
labelPointShow:false, //是否显示末端刻度圆点
max: 200,
labelShow: true,
border: true, //是否绘制主图区域描边线
labelColor:'#333333',
}
},
gridType: “radar”,
"radar"蜘蛛网格样式,"circle"圆形背景网格
注意背景显示必须是 circle 类型，不然显示不出来
圆环图
结构
<template>
<view class="charts-box">
<qiun-data-charts
type="ring"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
配置
// 配置部分
chartData: {},
//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
opts: {
rotate: false,
rotateLock: false,
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [5,5,5,5],
dataLabel: true,
enableScroll: false,
legend: {
show: true,
position: "right",
lineHeight: 25
},
title: {
name: "收益率",
fontSize: 15,
color: "#666666"
},
subtitle: {
name: "70%",
fontSize: 25,
color: "#7cb5ec"
},
extra: {
ring: {
ringWidth: 60,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF"
}
},
},
方法
this.getChartring();// 圆环图
//方法使用
getChartring() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
series: [
{
data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]
}
]
};
this.chartData = JSON.parse(JSON.stringify(res));
}, 500);
},
1、圆环图legend显示
legend: {
show: false,
position: "right",
lineHeight: 25
},
2、圆环图环详细参数
extra里面ring下面的 ringWidth 控制粗细
extra: {
ring: {
ringWidth: 10, //圆环图环粗细
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: false, //是否绘制各类别中间的分割线
borderWidth: 3,
borderColor: "#FFFFFF",
linearType: "custom"
}
},
5、使用问题
ucharts使用注意
- 旧的版本可能不支持很多东西
未获取到context!注意:v2.0版本后,需要自行获取canvas的绘图上下文并传入opts.con
版本问题
canvaLineA=new uCharts({
//$this:_self,
//canvasId: canvasId,
// 加入下面这一句
context:uni.createCanvasContext(canvasId, _self),
// 图标类型
type: 'line',
fontSize:11,
})
使用过程之中无法更换底部颜色
原因是因为在自己PUSH进去的数据里面定义了颜色
更换之后使用正常
使用过程之中无法去掉图例
正常删除最后，发现是变了
"legend": {
"show": false,
"position": "bottom",
"float": "center",
"padding": 5,
"margin": 5,
"backgroundColor": "rgba(0,0,0,0)",
"borderColor": "rgba(0,0,0,0)",
"borderWidth": 0,
"fontSize": 13,
"fontColor": "#666666",
"lineHeight": 11,
"hiddenColor": "#CECECE",
"itemGap": 10
},
dataLabel 是否显示图表区域内数据点上方的数据文案
扫一扫
1082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
