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

本文主要是介绍uniapp 使用秋云ucharts,实现线状图横线滚动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

<view class="" style="width:100%;height:610rpx;"><qiun-data-charts type="line" :ontouch="true" :opts="opts" :chartData="chartData" />
</view>

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);},}
}

这篇关于uniapp 使用秋云ucharts,实现线状图横线滚动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---