一、 动态折线图
该部分是基于echarts开发的，主要有两部分组成，主线图和柱状图，其中末端的垂直细线和小圆球为柱状图部分，小球是柱状图的markPoint设置的，柱状图的data数据是与折线图data数据数组长度相同的数组，数组最后一项与折线图数组的最后一项等值，其余项均为0，具体配置如下：
动态设置的实现：在数组末端插入数据，同时去除数组的第一项，echarts更新，从而实现动态效果
二、 echarts关系图
该部分是基于echarts（tree型图）开发的，其data数据格式有限制（详情见文件：关系图数据格式.text），数据中的name字段包含label标签的所有数据信息，报警及非报警状态时label中字体及背景颜色，是echarts中的富文本结合正则实现的，具体配置如下：
动态echarts源码
<template>
<div>
<div id="echart1" ref="echart1"></div>
<div>{{show}}</div>
</div>
</template>
<script>
export default {
name: "echart1",
data() {
return {
aadata: [],
bbdata: [],
ccdata: [],
zydata: [],
show: []
};
},
mounted() {
var that = this;
var aa = Math.random();
var cc = [];
for (var i = 0; i < 100; i++) {
that.aadata.push(aa);
that.bbdata.push(i);
cc.push(0);
}
cc.splice(cc.length - 1, 1, that.aadata[that.aadata.length - 1]);
that.ccdata = cc;
that.api();
setInterval(function() {
that.api();
}, 100);
},
/* watch: {
aadata() {
this.drawLine();
}
}, */
methods: {
api() {
var that = this;
var obj = { CodeID: ["1"] };
that.$axios
.post(
url,
JSON.stringify(obj),
{ headers: { "Content-Type": "application/json;" } }
)
.then(res => {
var that = this;
that.show = res.data.Item;
var b = res.data.Item[0];
that.aadata.shift();
that.bbdata.shift();
that.aadata.push(b);
that.bbdata.push(b);
that.ccdata.splice(that.zydata.length - 1, 1, b);
that.drawLine();
})
.catch(error => {
console.log(error);
});
},
drawLine() {
var that = this;
var myChart = this.$echarts.init(this.$refs.echart1);
myChart.setOption({
backgroundColor:"rgba(0,5,21,0.9)",
grid:{
height:"150",
top:"10",
bottom:"10",
right:"20",
left:"20"
},
xAxis: {
type: "category",
boundaryGap: false,
data: that.bbdata,
axisTick:{
show:false
},
axisLabel:{
show:false
},
axisLine: {
lineStyle: {
color: '#3a3e4d',
width: 1
}
}
},
yAxis: {
type: "value",
show:false
},
series: [
{
data: that.aadata,
type: "line",
animation: false,
smooth: true,
symbol: "none",
lineStyle: {
color: {
type: "linear",
colorStops: [
{
offset: 0,
color: "#00e4fc" // 0% 处的颜色
},
{
offset: 0.66,
color: "#00e4fc" // 66% 处的颜色
},
{
offset: 1,
color: "#fff" // 100% 处的颜色
}
],
opacity: 0.4,
globalCoord: false // 缺省为 false
}
}
},
{
name: "最高气温",
barWidth: 2,
type: "bar",
data: that.ccdata,
animation: false,
itemStyle:{
normal:{
color:'#fff'
}
},
markPoint: {
animation: false,
symbol: 'circle',
data: [{ type: "max" }],
symbolSize:10,
itemStyle: {
normal: {
color:"#020b1c",
borderColor:"#fff",
borderWidth:"2",
label: {
show: false,
}
}
}
}
}
]
});
}
}
};
</script>
<style scoped>
#echart1 {
width: 700px;
height: 180px;
}
</style>
关系图源码如下：
<template>
<div>
<div id="echart4" ref="echart4" style="width: 1200px;height:300px;"></div>
</div>
</template>
<script>
export default {
name: "echart4",
data() {
return {
chartData: [
{
name: "盐田水厂11111",
children: [
{
name: "东海道2221",
children: [
{
name: "永安北泵房330"
}
]
},
{
name: "盐田高级中学2221"
},
{
name: "盐田1号泵站2221"
},
{
name: "南方明珠花园2221",
children: [
{
name: "金海雅居331",
children: [
{
name: "梅沙西泵站441",
children: [
{
name: "观景酒店550"
}
]
}
/* {
name: "第三级441"
} */
]
},
{
name: "大梅沙共同沟440",
children: [
{
name: "梅沙街道办441"
}
]
}
]
},
{
name: "盐田四村2221"
},
{
name: "盐田港人民医院2221"
},
{
name: "北山道2221"
/* children: [
{
name: "第三级331"
},
{
name: "第三级331"
}
] */
}
]
}
]
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
this.chart = this.$echarts.init(this.$refs.echart4);
this.chart.setOption({
backgroundColor:"#000515",
series: [
{
type: "tree",
name: "tree2",
data: this.chartData,
top: "10%",
bottom: "10%",
right: "25%",
height: "230",
left: "7%",
symbolSize: 8,
/* symbol: "circle", */
// 展开发的层级数
initialTreeDepth: 10,
itemStyle: {
color: "#515b67",
borderColor: "#0098ff"
},
label: {
normal: {
position: "bottom",
verticalAlign: "left",
align: "center",
fontSize: 9,
distance: -10,
/* padding: [10, 0, 5, 0], */
padding: [10, 0, 0, 0],
formatter: function(dat) {
console.log(dat.name);
var num = dat.name.replace(/[^0-9]/gi, "");
num = num.substring(0, num.length - 1);
var reg = /[\u4e00-\u9fa5]/g;
var names = dat.name.match(reg);
var hz = names.join("") + ":";
var aa = dat.name.charAt(dat.name.length - 1);
var arr = [];
if (aa < 1) {
arr = ["{ignornormal|" + hz + "}", "{normal|" + num + "}"];
} else {
arr = ["{ignornormal|" + hz + "}", "{abnormal|" + num + "}"];
}
/* return arr.join("\n"); */
return arr;
},
rich: {
ignornormal: {
color: "#d0d9e8",
fontSize: 12,
padding: [0, 5, 0, 0]
},
normal: {
color: "#d0d9e8",
align: "center"
},
abnormal: {
color: "yellow",
backgroundColor: "rgba(245,48,8,0.5)",
width: "3",
height: "14",
align: "center"
}
}
}
},
// 线的样式
lineStyle: {
color: "#0098ff",
curveness: "0.8",
width:"1"
},
leaves: {
label: {
normal: {
// 叶子节点字的样式
/* position: 'left',
verticalAlign: 'top',
align: 'left', */
position: "right",
verticalAlign: "middle",
align: "left",
fontSize: 12,
distance: 10,
padding: [0, 5, 0, 0]
}
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
},
hidePopoverPanel() {
this.popoverPanelShow = false;
}
}
};
</script>
<style scoped>
/* #echart4 {
width: 700px;
height: 300px;
} */
</style>