一.下载依赖放进自己的项目里
2.在components里新建组件ChartsXX,就是你要引入到页面里的图表内容
<template>
<view>
<view class="charts-box">
<qiun-data-charts type="demotype" canvasId="chartData"
:opts="{enableScroll:true,dataLabel:false,xAxis:{scrollShow:true,itemCount:12,disableGrid:true}}"
:ontouch="true" :canvas2d="true" :chartData="chartData" :inScrollView="true" :disableScroll="true" />
</view>
</view>
</template>
2.1 这里的数据data,就是你插入数据的格式
<script>
export default {
name: "charts_qyxq",
data() {
return {
chartData: {
categories: [],
series: [{
"name": "今日功率",
"data": []
},
{
"name": "昨日功率",
"data": []
}
],
},
};
},
beforeMount() {
this.getChartsData()
},
methods: {
getChartsData() {
let userDatezr = uni.getStorageSync('detailsuser-list')
this.lastevent_used = userDatezr.map(item => {
return item.lastPt
})
this.event_used = userDatezr.map(item => {
return item.pt
})
this.chartData.categories = userDatezr.map(item => {
return item.hour
})
this.chartData.series[0].data = this.event_used
this.chartData.series[1].data = this.lastevent_used
}
}
}
</script>
<style>
.charts-box {
width: 100%;
height: 200px;
}
</style>