0.1.7 • Published 1 year ago
@insentek/chart v0.1.7
YH图表使用流程
1. 引入图表
import chart from '@insentek/chart';2. 创建图表实例
/**
* vm - 实例
* container - 容器id
* options - 图表配置
* lineStyle - 图表线样式
*/
const yhChart = new chart.YHChart(this, 'yh-chart', {
//可配置echarts中任意配置项
grid: {
top: 10,
}, //修改x轴样式
xAxis: {
axisLine: {
lineStyle: {
color: '#000'
}
},
},
}, {
/**
* 修改图表线样式
* @param {Object} min - 历史最低含水量线
* @param {Object} max - 历史最高含水量线
* @param {Object} current - 当前含水量线
* @param {Object} effectiveStorageCapacity - 有效储水量区域
* @param {Object} waterRetentionCapacity - 蓄水潜力区域
*/
min: 'red',
max: 'blue',
current: 'green',
effectiveStorageCapacity: 'lightgreen',
waterRetentionCapacity: 'lightblue',
}).loading();3. 图表数据展示
/**
* data - 数据
* date - 时间
* effectiveStorageCapacity - 有效储水量
* waterRetentionCapacity - 蓄水潜力
*/
const {date, effectiveStorageCapacity, waterRetentionCapacity} = yhChart.show(data);4. 图表播放
/**
* 播放YH图表
* @param {Array} data - 数据
* @param {Number} interval - 播放间隔
*/
yhChart.play(data, 500);
/**
* 监听播放事件
*/
document.addEventListener('yhDataUpdated', function (e) {
/**
* e.detail - 数据
* e.detail.date - 时间
* e.detail.effectiveStorageCapacity - 有效储水量
* e.detail.waterRetentionCapacity - 蓄水潜力
*/
console.log('detail', e.detail);
});
/**
* 播放暂停
*/
yhChart.pause()
/**
* 监听播放完成事件
*/
document.addEventListener('yhPlaybackComplete', () => {
console.log('播放完成');
});5. vue 使用demo
<template>
<div class="desktop">
<section class="moisture">
<div class="yh">
<div class="date">
<div class="title">
<div class="label">YH图</div>
</div>
<span v-if="!showYHEmpty">
{{ yhLegend.date ? dayjs(yhLegend.date).format('YYYY/MM/DD HH:mm') : '--' }}
</span>
<img
v-if="!showYHEmpty"
:src="getPlayIcon()"
@click="handleYhPlay(true)"
>
</div>
<div
v-if="!showYHEmpty"
id="yh-chart"
></div>
<EmptyPage
img="/icon-empty-device.png" message="暂无数据" v-if="showYHEmpty"
style="background: #ffffff;height: 410px"
></EmptyPage>
<div class="legend-part1" v-if="!showYHEmpty">
<section>
<span></span>
<label>有效储水量{{
isNaN(yhLegend.effectiveStorageCapacity) ? '--' : yhLegend.effectiveStorageCapacity
}}mm</label>
</section>
<section>
<span></span>
<label>蓄水潜力{{ isNaN(yhLegend.waterRetentionCapacity) ? '--' : yhLegend.waterRetentionCapacity }}mm</label>
</section>
</div>
<div class="legend-part2" v-if="!showYHEmpty">
<section>
<span style="background-color: rgba(250, 96, 126, 1)"></span>
<label>历史最低含水量</label>
</section>
<section>
<span style="background-color: rgba(89, 89, 255, 1)"></span>
<label>历史最高含水量</label>
</section>
<section>
<span style="background-color: rgba(89, 255, 165, 1)"></span>
<label>当前含水量</label>
</section>
<section>
<img
src="/icon-root.svg"
class="icon-root-depth"
>
<label>根系深度</label>
</section>
</div>
</div>
</section>
</div>
</template>
<script>
import dayjs from 'dayjs';
import YhChart from './charts/yh-chart.js';
import EmptyPage from './EmptyPage.vue';
import chart from "@insentek/chart";
export default {
name: 'YhChart',
components: {
EmptyPage
},
props: {
chartInfo: {
type: Object,
required: true,
},
chartStyle: {
type: Object,
}
},
data() {
return {
chart,
dayjs,
//其他设备数据
details: {
soilMoisture: {
title: '',
date: '',
nodes: []
}
},
yhLegend: {
date: null,
effectiveStorageCapacity: 0, // YH图有效储水量
waterRetentionCapacity: 0// YH图蓄水潜力
},
yhData: [],
yhChart: undefined,
showYHEmpty: false,
yhPlay: false,
play: false,
playOnly: false,
};
},
computed: {},
watch: {},
beforeUnmount() {
// 移除窗口resize监听器
window.removeEventListener('resize', this.resizeChart);
// 在组件销毁之前，如果chart实例存在，释放实例
if (this.yhChart !== null) {
this.yhChart.chart.dispose();
}
},
async mounted() {
this.initYhChart();
// 添加窗口resize监听器
window.addEventListener('resize', this.resizeChart);
},
methods: {
handlePlaybackComplete() {
console.log('播放完成');
this.yhPlay = false;
this.play = false;
this.playOnly = false;
},
//获取YH图播放图标
getPlayIcon() {
return this.yhPlay ? '/icon-pause.svg' : '/icon-play-normal.svg';
},
// 窗口resize监听图表
resizeChart() {
if (this.yhChart) {
this.yhChart.chart.resize();
}
},
// YH图初始化
async initYhChart() {
/**
* vm - 实例
* container - 容器id
* options - 图表配置
* lineStyle - 线样式
*/
console.log(chart,'123');
this.yhChart = new chart.YHChart(this, 'yh-chart', {
//可修改活覆盖echarts中任意配置项
grid: {
top: 10,
},
//修改x轴样式
xAxis: {
axisLine: {
lineStyle: {
color: '#000'
}
},
},
}, {
/**
* 线样式
* @param {Object} min - 历史最低含水量
* @param {Object} max - 历史最高含水量
* @param {Object} current - 当前含水量
* @param {Object} effectiveStorageCapacity - 有效储水量
* @param {Object} waterRetentionCapacity - 蓄水潜力
*/
min: 'red',
max: 'blue',
current: 'green',
effectiveStorageCapacity: 'lightgreen',
waterRetentionCapacity: 'lightblue',
}
).loading();
// 获取数据
this.yhData = this.chartInfo;
const data = this.yhData.data;
//空数据处理
if (data.timeseries.length <= 0) {
this.showYHEmpty = true;
this.yhChart = new YhChart(this, 'yh-chart', {}, {});
return;
}
console.log('this.yhChart',this.yhChart);
//展示图表
const {date, effectiveStorageCapacity, waterRetentionCapacity} = this.yhChart.show(data)
//获取页面展示的数据
//时间
this.yhLegend.date = date;
//有效储水量
this.yhLegend.effectiveStorageCapacity = effectiveStorageCapacity;
//蓄水潜力
this.yhLegend.waterRetentionCapacity = waterRetentionCapacity;
},
// YH曲线播放
async handleYhPlay(playOnly) {
this.playOnly = playOnly;
//获取数据
const data = this.yhData.data;
this.yhPlay = !this.yhPlay;
/**
* 监听播放完成事件
*/
document.addEventListener('yhPlaybackComplete', this.handlePlaybackComplete);
//播放
if (this.yhPlay) {
try {
//播放YH图
/**
* @param {Array} data - 数据
* @param {Number} interval - 播放间隔
*/
await this.yhChart.play(data, 500);
let _this = this
//监听播放事件
document.addEventListener('yhDataUpdated', function (e) {
// 修改页面展示变量值
// 时间
_this.yhLegend.date = e.detail.date;
// 有效储水量
_this.yhLegend.effectiveStorageCapacity = e.detail.effectiveStorageCapacity;
// 蓄水潜力
_this.yhLegend.waterRetentionCapacity = e.detail.waterRetentionCapacity;
});
} catch (error) {
console.error('Error processing YH chart data:', error);
// Handle the error appropriately
}
}
// 暂停
if (!this.yhPlay) {
this.yhChart.pause();
}
}
}
};
</script>
<style scoped lang="less">
.desktop {
margin-top: 32px;
& .moisture {
display: flex;
width: 50%;
height: 500px;
position: relative;
background: #ffffff;
& .play-all {
position: absolute;
width: 48px;
height: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
cursor: pointer;
}
& .yh {
width: 100%;
height: inherit;
position: relative;
& #yh-chart {
height: 440px;
width: 370px;
transform: rotate(90deg);
transform-origin: center;
position: absolute;
top: -40px;
left: 0;
bottom: 0;
margin: auto;
right: 0;
}
& .legend-part1 {
width: 100%;
display: flex;
align-items: center;
position: absolute;
bottom: 24px;
padding: 0 24px;
& section {
display: flex;
align-items: center;
}
& span {
display: flex;
width: 24px;
height: 8px;
box-sizing: border-box;
border-radius: 1px;
border: 1px solid #59FFA5;
margin-right: 8px;
opacity: 0.89;
background: linear-gradient(0deg, rgba(89, 255, 165, 0.0001) 0%, rgba(89, 255, 165, 0.7) 100%);
}
& label {
font-size: 12px;
font-family: HarmonyOS;
line-height: 12px;
letter-spacing: 0.0881542px;
color: #8C909A;
}
& section:nth-of-type(2) {
margin-left: 25px;
& span {
opacity: 0.5;
border: 1px solid #5959FF;
background: linear-gradient(0deg, rgba(89, 89, 255, 0.0001) 6.25%, #5959FF 72.36%);
}
}
}
& .legend-part2 {
width: 100%;
display: flex;
align-items: center;
padding: 0 24px 0;
position: absolute;
bottom: 52px;
& .icon-root-depth {
height: 4px;
width: 24px;
}
& section {
display: flex;
align-items: center;
margin-right: 24px;
& span {
display: flex;
width: 24px;
height: 4px;
border-radius: 1px;
}
& label {
color: #8C909A;
font-size: 12px;
font-family: HarmonyOS;
margin-left: 8px;
line-height: 12px;
}
}
}
}
& .date {
padding: 0 24px 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 46px;
font-size: 14px;
font-family: HarmonyOS;
line-height: 14px;
box-sizing: border-box;
position: relative;
& span {
color: #00071ea6;
text-align: center;
font-family: HarmonyOS;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 12px; /* 100% */
letter-spacing: 0.167px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
& .title {
display: flex;
& .label {
color: #00071ea6;
font-family: HarmonyOS;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 14px; /* 100% */
}
& img {
width: 12px;
height: 12px;
cursor: pointer;
margin-left: 8px;
cursor: pointer;
}
}
& img {
cursor: pointer;
}
}
}
}
</style>ET图表使用流程
1. 引入图表
import chart from '@insentek/chart';2. 创建图表实例
/**
* vm - 实例
* container - 容器id
* options - 图表配置(同YH图可配置echarts图表中配置项)
* lineStyle - 图表线样式
*/
this.etChart = new chart.ETChart(this, 'et-chart',{},
{
color: '#3E7AE0',
areaColor: '#84a7e1',
}
).loading();3. 图表数据展示
/**
* etDate - 时间
*/
const { etDate } = this.etChart.show(data);
this.etDate = etDate;4. 图表播放
/**
* 播放ET图表
* @param {Array} data - 数据
* @param {Number} interval - 播放间隔
*/
this.etChart.play(data, 1000);
/**
* 监听播放事件
*/
document.addEventListener('etDataUpdated', function (e) {
/**
* e.detail - 数据
* e.detail.etDate - 时间
*/
console.log('detail', e.detail);
});
/**
* 播放暂停
*/
this.etChart.pause()
/**
* 监听播放完成事件
*/
document.addEventListener('etPlaybackComplete', () => {
console.log('播放完成');
});5. vue 使用demo
<template>
<div class="desktop">
<section class="moisture">
<div class="et">
<div class="date">
<div class="title">
<div class="label">ET根系分布/分层耗水量</div>
</div>
<span v-if="!showEtEmpty">
{{
dateFormat(etDate)
}}
</span>
<img
v-if="!showEtEmpty"
:src="getPlayIcon()"
@click="handleEtPlay(true)"
>
</div>
<div
id="et-chart"
v-if="!showEtEmpty"
></div>
<EmptyPage
img="/icon-empty-device.png" message="暂无数据" v-if="showEtEmpty"
style="background: #ffffff;height: 410px"
></EmptyPage>
<section class="et-root" v-if="!showEtEmpty">
<img src="/icon-root.svg">
<label>根系深度</label>
</section>
</div>
</section>
</div>
</template>
<script>
import dayjs from 'dayjs';
import EmptyPage from './EmptyPage.vue';
import chart from "@insentek/chart";
export default {
name: 'EtChart',
components: {
EmptyPage
},
props: {
chartInfo: {
type: Object,
required: true
}
},
data() {
return {
dayjs,
etDate: undefined,
etData: [],
etCurrentTime: 0,
etTimeOut: [],
etArrPlay: [],
etTotal: 0,
etChart: undefined,
showEtEmpty: false,
etPlay: false,
play: false,
playOnly: false,
};
},
computed: {
dateFormat() {
return function (etDate) {
if (etDate) {
const str = `${etDate.slice(0, 4)}/${etDate.slice(4)}`;
const result = `${str.slice(0, 7)}/${etDate.slice(6)}`;
return result;
}
return '--';
};
}
},
watch: {
},
beforeUnmount() {
// 移除窗口resize监听器
window.removeEventListener('resize', this.resizeChart);
if (this.etChart !== null) {
this.etChart.chart.dispose();
}
},
async mounted() {
this.initEtChart();
// 添加窗口resize监听器
window.addEventListener('resize', this.resizeChart);
},
methods: {
//获取ET图播放图标
getPlayIcon() {
return this.etPlay ? '/icon-pause.svg' : '/icon-play-normal.svg';
},
resizeChart() {
if (this.etChart) {
this.etChart.chart.resize();
}
},
// ET根系图初始化
async initEtChart() {
/**
* vm - 实例
* container - 容器id
* options - 图表配置
* lineStyle - 线样式
*/
this.etChart = new chart.ETChart(this, 'et-chart',{},
{
color: '#3E7AE0',
areaColor: '#84a7e1',
}
).loading();
// 获取数据
this.etData = {
"data": {
"amendSeries": [
[
2.31,
1.45,
2.63,
2.63,
0.01,
5.31
],
[
2.29,
0.61,
2.99,
2.77,
0.01,
5.95
],
[
3.27,
0.13,
3.19,
2.95,
0.01,
6.59
],
[
3.83,
0.01,
3.31,
2.67,
0.01,
6.83
],
[
3.93,
0.01,
3.21,
2.41,
0.01,
6.83
],
[
3.89,
0.07,
3.09,
2.17,
0.01,
6.65
],
[
3.73,
0.01,
2.97,
1.79,
0.01,
6.05
]
],
"dataseries": [
[
1.88,
2.04,
2.63,
1.32,
2.66
],
[
1.45,
1.8,
2.88,
1.39,
2.98
],
[
1.7,
1.66,
3.07,
1.48,
3.3
],
[
1.92,
1.58,
2.99,
1.34,
3.42
],
[
1.97,
1.53,
2.81,
1.21,
3.42
],
[
1.98,
1.58,
2.63,
1.09,
3.33
],
[
1.87,
1.46,
2.38,
0.9,
3.03
]
],
"depthseries": [
[
0,
10,
20,
30,
40,
50
],
[
0,
10,
20,
30,
40,
50
],
[
0,
10,
20,
30,
40,
50
],
[
0,
10,
20,
30,
40,
50
],
[
0,
10,
20,
30,
40,
50
],
[
0,
10,
20,
30,
40,
50
],
[
0,
10,
20,
30,
40,
50
]
],
"nodes": [
"地表",
"10",
"20",
"30",
"40",
"50",
"60"
],
"timeseries": [
"20240505",
"20240506",
"20240507",
"20240508",
"20240509",
"20240510",
"20240511"
],
"series": [
[
17.9,
19.4,
25.0,
12.6,
25.2
],
[
13.8,
17.1,
27.4,
13.2,
28.4
],
[
15.2,
14.8,
27.4,
13.2,
29.5
],
[
17.0,
14.0,
26.6,
11.9,
30.4
],
[
18.0,
14.0,
25.7,
11.1,
31.3
],
[
18.7,
14.9,
24.8,
10.2,
31.4
],
[
19.4,
15.1,
24.6,
9.4,
31.5
]
]
},
"code": 0,
"message": "ok"
}
const data = this.etData.data;
//空数据处理
if (data.timeseries.length <= 0) {
this.showEtEmpty = true;
this.etChart = new ETChart(this, 'et-chart');
return;
}
//展示图表
const {
etDate,
} = this.etChart.show(data);
this.etDate = etDate;
},
handlePlaybackComplete() {
console.log('播放完成');
this.etPlay = false;
this.play = false;
this.playOnly = false;
},
// ET曲线播放
async handleEtPlay(playOnly) {
this.playOnly = playOnly;
// 播放暂停实现：通过记录当前暂停的index，下次播放时从当前暂停的index开始播放。
const data = this.etData.data;
this.etPlay = !this.etPlay;
/**
* 监听播放完成事件
*/
document.addEventListener('etPlaybackComplete', this.handlePlaybackComplete);
// 播放
if (this.etPlay) {
try {
//播放ET图
/**
* @param {Array} data - 数据
* @param {Number} interval - 播放间隔
*/
this.etChart.play(data, 1000);
let _this = this
//监听播放事件
document.addEventListener('etDataUpdated', function (e) {
// 修改页面展示变量值
// 时间
_this.etDate = e.detail.etDate;
});
}catch (error) {
console.error('Error processing ET chart data:', error);
}
}
// 暂停
if (!this.etPlay) {
this.etChart.pause();
}
},
}
};
</script>
<style scoped lang="less">
.desktop {
margin-top: 32px;
& .moisture {
display: flex;
width: 100%;
height: 502px;
position: relative;
& .play-all {
position: absolute;
width: 48px;
height: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
cursor: pointer;
}
& .et {
width: 50%;
height: inherit;
position: relative;
& #et-chart {
height: 440px;
width: 370px;
transform: rotate(90deg);
transform-origin: center;
position: absolute;
top: -40px;
left: 0;
bottom: 0;
margin: auto;
right: 0;
}
& .et-root {
width: 100%;
display: flex;
justify-content: flex-start;
position: absolute;
align-items: center;
left: 20px;
bottom: 52px;
& img {
width: 24px;
height: 4px;
}
& label {
font-size: 12px;
font-family: HarmonyOS;
line-height: 12px;
color: #8C909A;
margin-left: 8px;
}
}
}
& .date {
padding: 0 24px 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 46px;
font-size: 14px;
font-family: HarmonyOS;
line-height: 14px;
box-sizing: border-box;
position: relative;
& span {
color: rgba(0, 7, 30, 0.65);
text-align: center;
font-family: HarmonyOS;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 12px; /* 100% */
letter-spacing: 0.167px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
& .title {
display: flex;
& .label {
color: rgba(0, 7, 30, 0.65);
font-family: HarmonyOS;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 14px; /* 100% */
}
& img {
width: 12px;
height: 12px;
cursor: pointer;
margin-left: 8px;
cursor: pointer;
}
}
& img {
cursor: pointer;
}
}
}
}
</style>