uniapp 使用秋云ucharts,实现线状图横线滚动

其实仔细阅读官网说明文档,能找到答案,但是咱们着急实现功能,直接点上代码。

*标签上注意的是需要设置:ontouch="true"*

html 复制代码
<view class="" style="width:100%;height:610rpx;">
	<qiun-data-charts type="line" :ontouch="true" :opts="opts" :chartData="chartData" />
</view>
javascript 复制代码
export default {
	data() {
		return {
            chartData: {}, //成交额
            opts: {
				enableScroll:true,//开启滚动条,X轴配置里需要配置itemCount单屏幕数据点数量
				color: ["#1890FF"],
				padding: [15, 10, 0, 15],
				legend: {},
				xAxis: {
					disableGrid: true,
					itemCount:4,//单屏数据密度即图表可视区域内显示的X轴数据点数量,仅在启用enableScroll时有效
					scrollShow:true,//是否显示滚动条,配合拖拽滚动使用(即仅在启用【基本配置】的 enableScroll 时有效)
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					}
				}
			},
			cje_list: [{
					date: '2024/06/01',
					num: 100
				},
				{
					date: '2024/06/02',
					num: 500
				},
				{
					date: '2024/06/03',
					num: 200
				},
				{
					date: '2024/06/04',
					num: 400
				},
				{
					date: '2024/06/05',
					num: 600
				},
				{
					date: '2024/06/06',
					num: 100
				},
				{
					date: '2024/06/07',
					num: 100
				}
			]
				
        }
    },
    onLoad() {
		this.getServerData();
	},
    methods:{
        getServerData() {
			let arr1 = [];
			let arr2 = [];
			this.cje_list.forEach((item,index)=>{
				arr1.push(item.date);
				arr2.push(item.num);
			})
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
					//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
				let res = {
					categories: arr1,
					series: [{
						name: "成交额",
						data: arr2
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}, 500);
		},
    }
}
相关推荐
江号软件分享27 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
为风而战1 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
雪碧聊技术6 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
@Dream_Chaser6 小时前
uniapp页面间通信
uni-app
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js