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

相关推荐
宸翰1 天前
解决 uni-app App 端 vue-i18n 占位符丢失:封装跨端可用的 tf 格式化方法
前端·vue.js·uni-app
时光足迹2 天前
uni-app 视频通话实战:康复师与患者视频问诊的 6 个致命 Bug 与解决方案
android·ios·uni-app
时光足迹2 天前
腾讯云 TRTC UniApp SDK 从入门到上线
前端·vue.js·uni-app
时光足迹2 天前
uni-app 里把加密视频嵌入页面播放?我分析了 4 种方案,只有 1 种接近完美
前端·vue.js·uni-app
时光足迹2 天前
JPush UniApp UTS 插件完全参考手册:API、事件与厂商通道一网打尽
vue.js·ios·uni-app
时光足迹2 天前
极光推送全攻略(下):uni-app 代码实现与 iOS 排查实战
vue.js·ios·uni-app
时光足迹2 天前
极光推送全攻略(上):被iOS证书折磨了三天,我写了一份前端也能看懂的避坑指南
前端·ios·uni-app
spmcor4 天前
身份证读卡“无感登录”方案实践:从手动点击到自动检测
uni-app
PedroQue994 天前
uni-router v1.8.0新增冷启动守卫补执行
前端·uni-app
PedroQue995 天前
uni-router v1.7.0重磅更新:守卫重定向自由掌控
前端·uni-app