关于Echarts 可视化图像
Echarts 使用实例代码
<template>
<div id="main" class="echarts"></div>
</template>
<script>
import moment from "moment";
export default {
data() {
return {
myEcharts: null,
showData: [[]],
showDataY: [],
option: {
title: {
text: "吉首大学--603草堂项目组",
left: "1%"
},
tooltip: {
trigger: "axis"
},
grid: {
left: "5%",
right: "15%",
bottom: "10%"
},
xAxis: {
data: ""
},
yAxis: {},
toolbox: {
right: 10,
feature: {
dataZoom: {
yAxisIndex: "none"
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [
{
startValue: "2021-09-20",
start: "2.9554",
end: "0.604"
},
{
type: "inside"
}
],
visualMap: {
top: 50,
right: 10,
pieces: [
{
gt: 0,
lte: 50,
color: "#93CE07"
},
{
gt: 50,
lte: 100,
color: "#FBDB0F"
},
{
gt: 100,
lte: 150,
color: "#FC7D02"
},
{
gt: 150,
lte: 200,
color: "#FD0100"
},
{
gt: 200,
lte: 300,
color: "#AA069F"
},
{
gt: 300,
color: "#AC3B2A"
}
],
outOfRange: {
color: "#999"
}
},
series: {
name: "吉首大学--603草堂项目组",
type: "line",
data: this.showData,
markLine: {
silent: true,
lineStyle: {
color: "#333"
},
data: [
{
yAxis: 50
},
{
yAxis: 100
},
{
yAxis: 150
},
{
yAxis: 200
},
{
yAxis: 300
}
]
}
}
}
};
},
created() {
this.showD();
this.showFlash();
},
watch: {
showData() {
this.initEcharts();
},
showDataY() {
this.initEcharts();
}
},
mounted() {
this.initEcharts();
},
methods: {
async showD() {
var showdata = new Map();
const data = await this.$api.quoteLalala();
(this.showData = []), (this.showDataY = []);
for (let i = 0; i < data.data.length; i++) {
data.data[i].time = moment(data.data[i].time).format(
"YYYY-MM-DD HH:mm:ss"
);
this.showDataY.push(data.data[i].xianX);
showdata.set(i, [data.data[i].time, data.data[i].xianX]);
this.showData.push(showdata.get(i));
}
},
initEcharts() {
this.myEcharts = this.$echarts.init(document.getElementById("main"));
this.option = {
title: {
text: "吉首大学--603草堂项目组",
left: "1%"
},
tooltip: {
trigger: "axis"
},
grid: {
left: "5%",
right: "15%",
bottom: "10%"
},
xAxis: {
data: this.showData
},
yAxis: {},
toolbox: {
right: 10,
feature: {
dataZoom: {
yAxisIndex: "none"
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [
{
startValue: "2021-09-20"
},
{
type: ""
}
],
visualMap: {
top: 50,
right: 10,
pieces: [
{
gt: 0.01,
lte: 1,
color: "#93CE07"
},
{
gt: 1.01,
lte: 2,
color: "green"
},
{
gt: 2.01,
lte: 3,
color: "#FC7D02"
},
{
gt: 3.01,
lte: 4,
color: "#FD0100"
},
{
gt: 4.01,
lte: 5,
color: "#AA069F"
},
{
gt: 5.01,
lte: 6,
color: "#AC3B2A"
}
],
outOfRange: {
color: "#999"
}
},
series: {
name: "吉首大学--603草堂项目组",
type: "line",
data: this.showDataY,
markLine: {
silent: true,
lineStyle: {
color: "#333"
},
data: [
{
yAxis: 50
},
{
yAxis: 100
},
{
yAxis: 150
},
{
yAxis: 200
},
{
yAxis: 300
}
]
}
}
};
this.myEcharts.setOption(this.option);
},
showFlash() {
setInterval(() => {
this.showD();
}, 1000);
}
}
};
</script>
<style>
.echarts {
width: 100%;
height: 250px;
}
</style>
关于Echarts如何使用的项目开发经验
如何处理动态数据与Echarts结合在页面渲染的问题
在使用Echarts可视化图表库+Vue.js相结合过程中，我们遇到了动态数据渲染和Echarts注册挂载存在“时差”的问题。使用伊始认为是数据格式不符合渲染条件，在对数据处理后页面仍未显示预期效果。结合整个Vue框架的生命周期中created()和mounted()扮演的角色和产生的效果，我们理解了为什么数据为什么不能动态的渲染上去，就是两个钩子函数挂载执行的顺序有问题。
关于 created() 和 mounted()
created():
在整个静态的html文件加载完成之前，执行created()函数，在有父组件和子组件的Vue文件中，执行顺序为父组件->子组件。created()钩子函数的主要作用是用于初始化数据，一般在开发中将需要向后端提交请求的函数(方法)放置在created()中。
mounted():
在整个静态的html文件加载完成之后，执行mounted()函数，在有父组件和子组件的Vue文件中，执行顺序为子组件->父组件。mounted()钩子函数的主要作用是执行DOM操作，因此一般将DOM操作的函数(方法)放置在mounted()
解决办法
通过watch()函数监听x,y轴中数据的变化，每次变化都执行Echarts的DOM操作，从而实现基于Vue.js框架下Echarts可视化图像中数据的动态渲染。
|