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

相关推荐
镭封16 小时前
自媒体内容生产怎么提速?文案整理、配音与剪辑流程
人工智能·小程序·音视频·语音识别·媒体
anyup16 小时前
uView Pro X 1.0.0 发布:全面支持 uni-app x 蒸汽模式,80+ 组件
前端·uni-app·ai编程
科威网络16 小时前
小程序开发性能优化:分包、预加载与启动时间
性能优化·微信小程序·小程序
zhongben123_20 小时前
从零开发一个打车APP:技术选型、系统架构与成本评估指南
大数据·运维·ios·系统架构·uni-app·web app
派小心.1 天前
App数据统计平台怎么选?从SDK接入到日活留存看板的技术实现
数据库·人工智能·小程序
互联网+人工智能观察1 天前
微信小程序私有化定制、源码交付方案选型|SaaS / 模板二开 / 定制方案技术对比
微信小程序·小程序
微三云 - 廖会灵 (私域系统开发)1 天前
小程序首屏从 3.2s 压到 1.1s:我们在这个订货商城项目上做的 7 个改动与 3 个踩坑
小程序
微擎应用市场1 天前
二手闲置交易小程序管理系统
小程序
小小王app小程序开发1 天前
潮玩抽赏小程序玩法开发分析
小程序
干啥啥不行,bug第一名1 天前
小程序里不要用 requestAnimationFrame
小程序