在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配置项拆分为单独文件,有可能会导致配置项不生效。

相关推荐
一 乐33 分钟前
学习辅导系统|数学辅导小程序|基于java+小程序的数学辅导小程序设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·学习·小程序
羊吖6 小时前
微信小程序图片上传系统性能优化实践
微信小程序·小程序
李慕婉学姐11 小时前
【开题答辩过程】以《“饭否”食材搭配指南小程序的设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
java·spring·小程序
且白13 小时前
uniapp离线打包问题汇总
uni-app
巴啦啦臭魔仙13 小时前
uniapp scroll-view自定义下拉刷新的坑
前端·javascript·uni-app
00后程序员张13 小时前
Swift 应用加密工具的全面方案,从源码混淆到 IPA 成品加固的多层安全实践
安全·ios·小程序·uni-app·ssh·iphone·swift
小禾青青14 小时前
在uniapp中使用pinia
uni-app
低代码布道师15 小时前
医疗小程序11获取最近7天排班计划
低代码·小程序
fakaifa15 小时前
【全开源】智慧共享农场源码独立版+uniapp前端
前端·uni-app·智慧农场·源码下载·智慧农场小程序·智慧共享农场