在uniapp中使用 秋云ucharts图表,运行到小程序

步骤一:通过使用 HBuilderX 直接导入项目(uni_modules 版本)

步骤二:在 uCharts官网 - 秋云uCharts跨平台图表库 演示中,先弄个demo试着运行,

步骤三:查看自己需要的配置,

下面是我的用法:

javascript 复制代码
<view class="charts-box">
	<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
</view>

   .charts-box {
		border: 1rpx solid blue;
		/* width: 100%; */
		height: 200px;
	}
javascript 复制代码
       data() {
			return {
				title: 'Hello',
				chartData: {},
				opts: {
					color: ["#3f1b1b"],    //主题颜色
					padding: [15, 10, 0, 15],   //画布填充边距,顺序为上右下左
					enableScroll: false,     //是否显示数据点的图形标识
					legend: {    //图例配置      
						show: false   // 关闭图例标识
					}, 
					xAxis: {
						title: 'x轴',
						disableGrid: true   //不绘制纵向网格(即默认绘制网格)
					},
					yAxis: {
						gridType: "solid",   // 设置虚线还是实线
						dashLength: 2,
						splitNumber: 5,  //横向向网格数量。默认5 行
						// min:0.1,
						// max:2,
						tofix: 1,  // 小数点一位
					},
					extra: {   //区域图
						line: {
							type: "curve",   // 设置为曲线
							width: 2,
							activeType: "hollow"
						}
					}
				}
			}
		},
        mounted() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
						series: [{
							name: "七日涨跌图",
							data: [200, 36, 31, 33, 13, 34],
						}]

					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			}
		}

特别注意:千万不要把opts配置项拆分为单独文件,有可能会导致配置项不生效。

相关推荐
2501_915918412 小时前
深入对比iOS开发中常用性能监控工具的底层原理与优缺点分析
android·ios·小程序·https·uni-app·iphone·webview
黄华SJ520it8 小时前
连锁多门店超市小程序:单品牌多家门店,总部统一管理、门店独立接单、线上到店/配送商超系统设计与实现
小程序·系统开发
AI多Agent协作实战派9 小时前
AI多Agent协作系统实战(二十三):Agent读HEARTBEAT.md不读AGENTS.md——openclaw的文件加载之谜
前端·数据库·人工智能·uni-app
m0_5474866613 小时前
《Vue.js + uni-app全栈开发从入门到实践 》全套PPT课件2026版
vue.js·uni-app
mykj155116 小时前
消费积分抵扣物业费小程序商城开发
小程序·积分商城抵扣物业费·积分商城小程序开发
三声三视1 天前
uni-app 鸿蒙端传参变成 [object Object]?顺着源码追到 ArkTS router 底层才搞明白
人工智能·ai·uni-app·aigc·ai编程·harmonyos
云迈科技-软件定制开发1 天前
2026年湖南长沙软件定制开发公司怎么选?本地企业做APP、小程序、管理系统的合作参考
小程序
小徐_23332 天前
Open Wot 1.0.5 发布:让 AI 接入 wot-ui,只需要两条命令
前端·uni-app·ai编程
AI多Agent协作实战派2 天前
AI多Agent协作系统实战(二十二):从6列到12列——任务监控报告的进化之路
java·人工智能·uni-app·bug
小杨小杨、努力变强!2 天前
VS Code运行HBuilder X中的uni-app项目
vscode·uni-app·uni-app run