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