首先去dcloud下载插件
代码如下:
<qiun-data-charts type="line" background="#242424" :opts="opts" :chartData="chartData" :ontouch="true" />
data() {
return {
chartData: {},
opts: {
color: ["#1890FF", "#91CB74"],
padding: [-10, 15, 15, 0],
enableScroll: true,
//不显示数字
dataLabel: false,
//不显示圆点
dataPointShape: false,
legend: {
// 图例位置和颜色
position: 'top',
float: 'right',
padding: 20,
fontColor:'#fff'
},
xAxis: {
// 允许滚动
disableGrid: true,
scrollShow: true,
// 单屏展示7条
itemCount: 7,
axisLine: false,
fontSize: 10,
// 滚动条颜色
scrollColor: '#666',
scrollBackgroundColor: '#333'
},
yAxis: {
axisLine: false,
dashLength: 2,
gridType: "solid",
// 横向网格颜色
gridColor: '#2f2f2f',
data: [{
fontSize: 10,
axisLine: false //坐标轴轴线是否显示
}]
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow",
linearType: "custom",
onShadow: true,
animation: "horizontal"
}
}
}
};
},
methods:{
init() {
if (0 === this.reports.length) return
// 数据处理
let categories = []
let aData = [];
let bData = []
const format = 3 === this.type ? 'day' : 'hour'
this.reports.forEach(item => {
categories.push(this.timeFormat(item.time, format))
aData.push(item.a.value)
bData.push(item.b.value)
})
let res = {
categories: categories,
series: [{
name: "成交量a",
setShadow: [
3,
15,
30,
"#1890FF"
],
data: transactionData
},
{
name: "成交量b",
setShadow: [
3,
15,
30,
"#91CB74"
],
data: bData
},
]
};
this.chartData = res
}，
timeFormat(timeStamp, type = "") {
var date = new Date();
date.setTime(timeStamp * 1000);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
if (type == 'day') {
return m + '-' + d;
}
if (type == 'hour') {
return h + ':00' ;
}
return ''
},
}
效果图：
dcloud插件:ext.dcloud.net.cn/plugin?id=2…
uchart官网：www.ucharts.cn/v2/#/
报错：Ignored attempt to cancel a touchmove event with cancelable=false, for examp
page{
touch-action: none;
}
::v-deep uni-canvas {
// 图高度
height: 380rpx !important;
}
参考链接：www.freesion.com/article/897…
<template>
<view class="charts">
<view class="tag flex-center">
<view class="flex-align" @click="showLine('aShow')">
<view class="box" :class="earnShow ? 'earn':'content-base-bg'"></view>
数据a
</view>
<view class="flex-align ml-5" @click="showLine('bShow')">
<view class="box" :class="exchangeShow ? 'exchange':'content-base-bg'"></view>
数据b
</view>
</view>
<view class="content content-base-bg">
// onzoom 是否开启图表双指缩放功能，仅针对直角坐标系图表，并且开启了ontouch及opts.enableScroll滚动条才可用
<qiun-data-charts type="line" background="#242424" :opts="opts" :chartData="chartData" :ontouch="true" :onzoom="true" />
</view>
</view>
</template>
<script>
export default {
props: ["type", 'reports'],
watch: {
reports() {
this.init();
}
},
data() {
return {
chartData: {},
opts: {
color: ["#35BA61", "#F33D42"],
padding: [10, 0, 0, 0],
enableScroll: true,
//不显示数字
dataLabel: false,
//不显示圆点
dataPointShape: false,
legend: {
show: false
},
xAxis: {
disableGrid: true,
scrollShow: true,
itemCount: 7,
axisLine: false,
fontSize: 10,
scrollColor: '#666',
scrollBackgroundColor: '#333',
scrollAlign: 'right'
},
yAxis: {
axisLine: false,
dashLength: 2,
gridType: "solid",
gridColor: '#2f2f2f',
data: [{
fontSize: 10,
axisLine: false //坐标轴轴线是否显示
}]
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow",
linearType: "custom",
onShadow: true,
animation: "horizontal"
}
}
},
categories: [],
aData: [],
bData: [],
aShow: true,
bShow: true
};
},
mounted() {
this.init();
},
methods: {
init() {
if (0 === this.reports.length) return
let categories = []
let aData = [];
let bData = []
const format = 3 === this.type ? 'day' : 'hour'
this.reports.forEach(item => {
categories.push(this.timeFormat(item.time, format))
aData.push(item.a.value)
bData.push(item.b.value)
})
this.categories = categories
this.aData = aData
this.bData = bData
this.dataFormat()
},
showLine(key) {
this[key] = !this[key]
this.dataFormat()
},
dataFormat() {
let res = {
categories: this.categories,
series: [{
name: "数据a",
setShadow: [
3,
15,
30,
"#35BA61"
],
data: this.aShow ? this.aData : []
},
{
name: "数据b",
setShadow: [
3,
15,
30,
"#F33D42"
],
data: this.bShow ? this.bData : []
}
]
};
this.chartData = res
}
}
};
</script>
<style scoped lang="scss">
::v-deep uni-canvas {
height: 380rpx !important;
}
.charts {
width: 100%;
position: relative;
touch-action: none;
.tag {
margin-bottom: 20rpx;
view {
color: #fff;
}
.box {
width: 22rpx;
height: 22rpx;
border-radius: 4rpx;
margin-right: 10rpx;
}
.earn {
background-color: #35BA61;
}
.exchange {
background-color: #F33D42;
}
}
.content {
padding: 30rpx;
border-radius: 30rpx;
}
}
</style>
效果图如下：
