项目场景：

在H5页面中插入ucharts图表

使用步骤

准备工作：
uCharts官网地址：https://www.ucharts.cn/
uni-app插件市场uCharts高性能跨全端图表 https://ext.dcloud.net.cn/plugin?id=271

1.导入/下载插件（我是直接导入的）

使用的话有两种方式，原生方式和组件方式（具体请看官方文档）
2.代码部分

HTML部分

<template><view class="charts-box"><qiun-data-charts type="line" :chartData="chartData" /></view>
</template>

js部分

<script>
export default {data() {return {chartData: {},};},onReady() {this.getServerData();},methods: {getServerData() {//模拟从服务器获取数据时的延时setTimeout(() => {let res = {"categories": ["4.3","4.4","4.5","4.6","4.7","4.8"],"series": [{"name": "最低值","data": [92.5,91.8,92.3,93,90.7,93]},{"name": "均值","data": [93.86,92,93.12,94,92.5,93.86]},{"name": "最高值","data": [94.86, 93.8,94.7,95.6,93,94.5]}]};this.chartData = JSON.parse(JSON.stringify(res));}, 500);},}
};
</script>

css部分

<style scoped>.charts-box {width: 100%;height: 300px;}
</style>

如果需要自定义图表两种方式
1.通过官方组件文档进行可视化配置

配置完成后将对应代码复制到对应的文件中

2.直接在配置文件中修改对应图表

 //下面是自定义配置，请添加项目所需的通用配置
"line":{"type": "line","canvasId": "","canvas2d": false,"background": "none","animation": true,"timing": "easeOut","duration": 1000,"color": ["#EE6666","#1890FF","#91CB74","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],"padding": [15,10,0,15],"rotate": false,"errorReload": true,"fontSize": 13,"fontColor": "#666666","enableScroll": false,"touchMoveLimit": 60,"enableMarkLine": false,"dataLabel": true,"dataPointShape": true,"dataPointShapeType": "solid","tapLegend": true,"xAxis": {"disabled": false,"axisLine": true,"axisLineColor": "#CCCCCC","calibration": false,"fontColor": "#666666","fontSize": 13,"rotateLabel": false,"itemCount": 5,"boundaryGap": "center","disableGrid": true,"gridColor": "#CCCCCC","gridType": "solid","dashLength": 4,"gridEval": 1,"scrollShow": false,"scrollAlign": "left","scrollColor": "#A6A6A6","scrollBackgroundColor": "#EFEBEF","format": ""},"yAxis": {"disabled": true,"disableGrid": true,"splitNumber": 5,"gridType": "dash","dashLength": 2,"gridColor": "#CCCCCC","padding": 10,"showTitle": false,"data": []},"legend": {"show": true,"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},"extra": {"line": {"type": "straight","width": 2},"tooltip": {"showBox": true,"showArrow": true,"showCategory": false,"borderWidth": 0,"borderRadius": 0,"borderColor": "#000000","borderOpacity": 0.7,"bgColor": "#000000","bgOpacity": 0.7,"gridType": "solid","dashLength": 4,"gridColor": "#CCCCCC","fontColor": "#FFFFFF","splitLine": true,"horizentalLine": false,"xAxisLabel": false,"yAxisLabel": false,"labelBgColor": "#FFFFFF","labelBgOpacity": 0.7,"labelFontColor": "#666666"},"markLine": {"type": "solid","dashLength": 4,"data": []}}},

over！！！！

uniapp对接ucharts图表相关推荐

uniapp使用ucharts图表及问题汇总
uniapp使用ucharts图表及问题汇总本文主要描述如何通过组件的方式引入ucharts图表,并汇总了使用过程中踩到的坑,如层级过高问题.默认显示提示框tooltip.提示框显示内容格式化等等. ...
uni-app 使用uCharts图表插件
1.下载:https://ext.dcloud.net.cn/plugin?id=271 2.使用实例 <template><view class="qiun-column ...
uni-app使用ucharts图表 ##uni-app ##uCharts
需求: 首页需要放一个圆环图显示数据. 查找文档:uni-app插件市场uCharts高性能跨全端图表 https://ext.dcloud.net.cn/plugin?id=271 uCharts官 ...
【uniapp】使用图表
目录一.各图表在uniapp微信小程序中的bug 秋云ucharts: echarts: 二.使用秋云ucharts 三.使用小程序echarts(echarts-for-wx) 四.各图表遇到的问 ...
uni-app插入ucharts(echarts)图表,支持H5，APP，小程序
uni-app插入ucharts(echarts)图表,支持H5,APP,小程序这是uni-app里通用的图表方法,从ucharts官网上整理的链接: https://pan.baidu.com/ ...
uni-app、Vue3 + ucharts 图表 H5 无法渲染
当学习成为了习惯,知识也就变成了常识.感谢各位的点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github,欢迎 Watch 和 Star. 简介 ...
uniapp使用ucharts数据过多时可拖动图表
uniapp使用ucharts数据过多时可横向拖动图表前言一.使用步骤 1.引入库代码如下(示例):点击查看导入方式 2.使用 enableScroll: true 和 ontouch=&quo ...
uniapp 使用秋云uCharts图表组件、echarts图表组件
一.uniapp 使用秋云uCharts图表组件 1.我们的项目是依赖uniapp的vue-cli项目操作:将uni_modules目录复制到src目录,即src/uni_modules. 2.页面 ...
uniapp 中使用图表（秋云uCharts图表组件）
在用uniapp做项目时,遇到要做折线图的需求,但是又不想用echarts,在uniapp中dom操作非常的麻烦.于是找到了一个专门为app而生的图表插件uCharts(秋云uCharts图表组件), ...
uniapp中秋云uCharts图表组件基础使用
官方文档:秋云uCharts图表组件 1.导入到对应项目中根目录会多出文件夹uni_modules 柱状图基础使用完整代码: <template><view><vie ...

uniapp对接ucharts图表

项目场景：

使用步骤

uniapp对接ucharts图表相关推荐

最新文章

热门文章