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);
		},
    }
}
相关推荐
小周同学@2 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok2 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~2 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号2 小时前
【大前端】前端生成二维码
前端·二维码
2501_915918413 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
程序员码歌3 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康4 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海4 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏4 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码5 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint