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);
		},
    }
}
相关推荐
软件小伟几秒前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾22 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧31 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm40 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter