1. IT分享知识网首页
  2. 未分类

❤ ucharts图表使用、UCharts图表使用(组件方式和原生方式)、uniapp使用ucharts

老牧童 • • 未分类

❤ ucharts图表使用、UCharts图表使用(组件方式和原生方式)、uniapp使用uchartsucharts 图表使用 UCharts 图表使用 组件方式和原生方式 uniapp 使用 ucharts ucharts

大家好，欢迎来到IT知识分享网。

❤ uniapp使用ucharts

1、认识ucharts

uCharts 是一个用于 Vue.js 和小程序的图表库，支持多种图表类型和交互功能。它设计用于在小程序、Web 和应用中创建高性能、精美的图表。

官方版本

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', //坐标轴轴线颜色 } ] },

折线图

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", // 数据点（刻度点）字体颜色，默认# fontSize: 13, // 数据点（刻度点）字体大小 // textAlign: "right", //数据点（刻度点）相对轴线的对齐方式，可选值：'left','right','center' titleFontSize: 13, // 标题字体大小 // // titleOffsetY: -5, // 标题纵向偏移距离，负数为向上偏移，正数向下偏移 // titleOffsetX: 0, // 标题横向偏移距离，负数为向左偏移，正数向右偏移 titleFontColor: "#83B9A3", //标题字体颜色，默认# // 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:'#', } },

圆环图

结构
<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: "#" }, 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": "#", "lineHeight": 11, "hiddenColor": "#CECECE", "itemGap": 10 }, dataLabel 是否显示图表区域内数据点上方的数据文案

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/138253.html

赞 (0)
老牧童老牧童
0
上一篇 2025-06-14 14:33
下一篇 2025-06-14 14:45

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信