1.项目需要 （支付宝小程序）
自定义图例
双Y轴
2.思考：
刚开始使用Dcloud里面的echarts非常卡还会报错
后来用的Dcloud里面的F2图表V3版本
3.代码
<template>
<view>
<!-- 自定义导航栏 -->
<!-- <u-navbar back-text="更多设置"></u-navbar> -->
<view class="index-container">
<view class="content">
<view class="card">
<view>
<view class="title">桩充电记录详情</view>
</view>
</view>
<view class="list">
<view>
<view class="nick">
<view class="nick-itemA">
<view>亢思伦</view>
<view>主账号</view>
</view>
<view class="nick-itemB">
<view>桩编码</view>
<view>281828238182838</view>
</view>
</view>
<view class="tongji">
<view>
<view>充电数据统计</view>
<img src="../../static/circular.png" style="width: 10rpx; height: 10rpx;" />
</view>
<view>
<view class="tongji-item">
<view>{
{
chargeMin || 0}}</view>
<view>充电时长</view>
</view>
<view class="xian"></view>
<view class="tongji-item">
<view>{
{
detailObj.chargeVal || 0}}</view>
<view>充电量</view>
</view>
</view>
</view>
<view class="card-item">
<view>
<view>充电开始时间</view>
<view>{
{
detailObj.beginTime}}</view>
</view>
<view>
<view>充电结束时间</view>
<view>{
{
detailObj.endTime}}</view>
</view>
<view>
<view>充电方式</view>
<view style="color: #0BBAB4;">{
{
detailObj.startWayName}}</view>
</view>
<view>
<view>结束原因</view>
<view>{
{
detailObj.chargeOverReason}}</view>
</view>
</view>
<view class="charging">
<view style="width: 100%; height:500rpx;padding-bottom: 50rpx;">
<l-f2 ref="familyChargeLine"></l-f2>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 筛选日期 -->
<u-calendar v-model="calendarShow" :mode="mode" active-bg-color="#0BBAB4" range-color="#0BBAB4"
@change="getTime" :safe-area-inset-bottom="true"></u-calendar>
</view>
</template>
<script>
import F2 from '@antv/f2';
export default {
components: {
// LimeEchart
},
data() {
return {
calendarShow: false,
mode: 'range',
orderNo: '',
detailObj: {
},
chargeMin: '',
allDataList: [{
time: '07:00:00',
Voltage: 220,
electric: 20
},
{
time: '07:59:69',
Voltage: 230,
electric: 30
},
{
time: '08:00:00',
Voltage: 210,
electric: 40
}, {
time: '09:00:00',
Voltage: 200,
electric: 50
}, {
time: '10:00:00',
Voltage: 170,
electric: 20
}, {
time: '11:00:00',
Voltage: 190,
electric: 30
}
],
legendItems: [{
name: "电压",
marker: {
symbol: "square",
fill: "#8e95fe"
},
checked: true,
},
{
name: "电流",
marker: {
symbol: "square",
fill: "#fcdb57",
},
checked: true,
}
]
}
},
onLoad(option) {
if (option.orderNo) {
this.orderNo = option.orderNo
this.chargeMin = option.chargeMin
this.getDetail()
}
},
onUnload() {
},
onReady() {
},
onShow() {
},
mounted() {
let _ = this;
_.init()
},
computed: {
counts() {
return this.$store.state.count
}
},
methods: {
/*折线图*/
init() {
let _ = this;
_.$refs.familyChargeLine.init(config => {
const chart = new F2.Chart(config);
chart.source(_.allDataList, {
time: {
alias: '日期',
tickCount: 4,//X轴显示四个
},
Voltage: {
alias: "电压",
tickCount: 5,//Y轴显示5个
},
electric: {
alias: '电流',
tickCount: 5,//Y轴显示5个
}
});
// 图例
chart.legend({
custom: true,//自定义图例
align: 'right',
position: 'top',
flipPage: false,
items: _.legendItems,
onClick: function onClick(ev) {
//自定义legend样式点击触发的方法
var item = ev.clickedItem;
var name = item.get('name');
var checked = item.get('checked');
var children = item.get('children');
if (checked) {
var markerFill = children[0].attr('fill');
var textFill = children[1].attr('fill');
children[0].set('_originColor', markerFill); // 缓存 marker 原来的颜色
children[1].set('_originColor', textFill); // 缓存文本原来的颜色
}
var geoms = chart.get('geoms');
for (var i = 0; i < geoms.length; i++) {
var geom = geoms[i];
if (geom.getYScale().alias === name)
if (!checked) {
geom.show();
children[0].attr('fill', children[0].get('_originColor'));
children[1].attr('fill', children[1].get('_originColor'));
} else {
geom.hide();
children[0].attr('fill', '#bfbfbf'); // marker 置灰
children[1].attr('fill', '#bfbfbf'); // 文本置灰 置灰
}
item.set('checked', !checked);
_.legendItems[_.findLegendItem(name)].checked = !checked;
}
}
});
chart.guide().text({
position: ['min', 'max'], // x 轴最小值, y 轴最大值
content: '电压电流', // -----------------------------------y轴坐标单位
style: {
textAlign: 'start',
textBaseline: 'bottom',
fill: '#777',
fontSize: '15',
},
offsetY: -30,
offsetX: -35, // 可以通过 padding 值配合来保证显示位置
})
chart.guide().text({
position: ['min', 'max'], // x 轴最小值, y 轴最大值
content: '电压(V)', // -----------------------------------y轴坐标单位
style: {
textAlign: 'start',
textBaseline: 'bottom',
fill: '#777',
fontSize: '10',
},
offsetY: -10,
offsetX: -30, // 可以通过 padding 值配合来保证显示位置
})
chart.guide().text({
position: ['max', 'max'], // x 轴最小值, y 轴最大值
content: '电流(A)', // -----------------------------------y轴坐标单位
style: {
textAlign: 'start',
textBaseline: 'bottom',
fill: '#777',
fontSize: '10',
},
offsetY: -10,
offsetX: 0, // 可以通过 padding 值配合来保证显示位置
})
// chart.axis('date', {
// label: function label(text, index, total) {
// // 只显示每一年的第一天
// const textCfg = {};
// if (index === 0) {
// textCfg.textAlign = 'left';
// } else if (index === total - 1) {
// textCfg.textAlign = 'right';
// }
// return textCfg;
// }
// });
chart.line().position('time*Voltage').color('#8e95fe').shape('smooth');
chart.point().position('time*Voltage').color('#8e95fe');
chart.line().position('time*electric').color('#fcdb57').shape('smooth');
chart.point().position('time*electric').color('#fcdb57');
chart.render();
return chart;
});
},
/*自定义legend样式用到的方法*/
findLegendItem(lx) {
var index = void 0;
for (var i = 0; i < this.legendItems.length; i++) {
if (this.legendItems[i].name === lx) {
index = i;
break;
}
}
return index;
},
/*筛选日期*/
setChoice() {
this.calendarShow = true;
},
/*获取订单详情*/
getDetail() {
let that = this;
that.$u.api.getChargingDetail({
orderNo: this.orderNo,
corpNo: 'CO1524100773815',
userPhone: uni.getStorageSync('userPhone'),
}).then(res => {
that.detailObj = res.data
}).catch(err => {
uni.showToast({
title: "查询失败"
})
})
},
/*日历获取日期*/
getTime(val) {
// console.log(val)
},
}
}
</script>
<style lang="scss" scoped>
.content {
box-sizing: border-box;
padding: 0 26rpx 20rpx 40rpx;
display: flex;
flex-direction: column;
font-family: PingFangSC-Regular, PingFang SC;
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 50rpx;
>view {
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-between;
}
.title {
font-size: 48rpx;
font-weight: 800;
}
.xuanze {
display: flex;
font-size: 24rpx;
font-weight: 400;
align-items: center;
margin-top: 10rpx;
>view {
&:nth-child(2) {
margin-left: 40rpx;
}
}
}
}
.list {
margin-top: 46rpx;
.month {
display: flex;
align-items: baseline;
>view {
&:nth-child(1) {
font-size: 32rpx;
font-weight: 600;
}
}
}
.nick {
width: 100%;
height: 200rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(221, 221, 221, 0.3);
border-radius: 60rpx;
padding: 40rpx 50rpx 40rpx 50rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 40rpx;
>view {
display: flex;
justify-content: space-between;
align-items: center;
}
.nick-itemB {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #2D3748;
}
.nick-itemA {
>view {
&:nth-child(1) {
width: 84rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 800;
color: #2D3748;
}
&:nth-child(2) {
width: 116rpx;
height: 34rpx;
background: #1677FF;
border-radius: 17rpx;
color: #FFFFFF;
line-height: 34rpx;
text-align: center;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
}
}
}
.tongji {
height: 254rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(221, 221, 221, 0.36);
border-radius: 60rpx;
padding: 30rpx 40rpx 40rpx 30rpx;
img {
margin-left: 10rpx;
}
margin-bottom: 40rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
>view {
&:nth-child(1) {
display: flex;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 800;
color: #2D3748;
align-items: center;
}
&:nth-child(2) {
display: flex;
justify-content: space-between;
align-items: center;
height: 160rpx;
width: 100%;
background: #FFFFFF;
padding: 20rpx 70rpx 0;
.xian {
height: 86rpx;
width: 4rpx;
background: #BEBEBE;
}
.tongji-item {
display: flex;
flex-direction: column;
align-items: center;
>view {
&:nth-child(1) {
font-size: 46rpx;
font-weight: 600;
}
&:nth-child(2) {
font-size: 24rpx;
font-weight: 400;
margin-top: 10rpx;
}
}
}
}
}
}
.card-item {
width: 100%;
background: #FFFFFF;
margin-bottom: 40rpx;
padding: 40rpx 46rpx 40rpx 46rpx;
height: 360rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(221, 221, 221, 0.35);
border-radius: 60rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
>view {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #2D3748;
line-height: 40rpx;
}
}
}
}
.charging {
width: 100%;
margin-top: 32px;
background: #FFFFFF;
padding: 40rpx;
box-sizing: border-box;
height: 512rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(221, 221, 221, 0.36);
border-radius: 60rpx;
.echartsTex {
position: absolute;
top: 10rpx;
left: 250rpx;
display: flex;
align-items: center;
font-size: 28rpx;
>view {
&:nth-child(1) {
width: 40rpx;
height: 20rpx;
background: #1677FF;
margin-right: 10rpx;
border-radius: 4rpx;
}
}
}
.echartsTexs {
position: absolute;
top: 10rpx;
left: 400rpx;
display: flex;
font-size: 28rpx;
align-items: center;
>view {
&:nth-child(1) {
width: 40rpx;
height: 20rpx;
background: #05B6B6;
margin-right: 10rpx;
border-radius: 4rpx;
}
}
}
.charging_title {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #2D3748;
img {
margin-left: 10rpx;
}
}
#familyChargeLine {
width: 100%;
height: 240px;
}
}
</style>
效果
点击自定义图例显示效果
点击上面的图例也可以正常显示隐藏对应的折线
Dcloud插件下载地址
https://ext.dcloud.net.cn/plugin?id=4613