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);
		},
    }
}
相关推荐
前端小菜袅4 分钟前
uniapp配置自动导入uni生命周期等方法
前端·javascript·uni-app
焚 城5 分钟前
UniApp中Flex布局学习
学习·uni-app
Apifox6 分钟前
如何在 Apifox 中通过 AI 一键生成几十个测试用例?
前端·后端·ai编程
你真的可爱呀6 分钟前
uniapp学习【整体实践】
前端·学习·uni-app·实践
用力的活着7 分钟前
uniapp 微信小程序蓝牙接收中文乱码
微信小程序·小程序·uni-app
一枚前端小能手13 分钟前
「周更第7期」实用JS库推荐:Vite
前端·javascript·vite
小中123430 分钟前
异步请求的性能提升
前端
我是天龙_绍31 分钟前
渐变层生成器——直接用鼠标拖拽就可以调整渐变层的各种参数,然后可以导出为svg格式
前端
我是天龙_绍1 小时前
Easing 曲线 easings.net
前端