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);
		},
    }
}
相关推荐
野生yumeko1 小时前
伪静态WordPress/Vue
前端·javascript·vue.js
爱因斯坦乐1 小时前
【vue】I18N国际化管理系统
前端·javascript·vue.js·笔记·前端框架
一只游鱼1 小时前
vue集成dplayer
前端·javascript·vue.js·播放器·dplayer
2501_915106326 小时前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
kyle~8 小时前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light608 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏9 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
一只小风华~10 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟11 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
iCoding9112 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构