其实仔细阅读官网说明文档,能找到答案,但是咱们着急实现功能,直接点上代码。
*标签上注意的是需要设置: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);},}
}