关于echarts图表随窗口移动变化,直接看代码
1、旧版本
<template>
<div ref="chart" class="chart" style="width:100%;height: 400px;"/>
</template>
<script>
/* eslint-disable */
//获取数据接口
import { getDataApiStatistic } from "@/api/metadata/home.js";
//局部引入echarts
import echarts from "echarts";
export default {
name: "NumberOfLogins",
data() {
return {
resizeTimer: null,
chart: null,
keys: [0, 0, 0],
};
},
mounted() {
//自适应
window.addEventListener("resize", this.resize); //只要窗口大小发生像素变化就会触发
> * 页面加载完毕加载 window.addEventListener("load",function(){})
> * 页面加载成功元素就可以 window.addEventListener("DOMContentLoaded",function(){})
> * echarts.init是vue原型中$echarts提供的方法,接收三个参数:dom,theme,opts
> * this.$refs.chart是参数1容器
this.chart = echarts.init(this.$refs.chart);
this.draw();
this.getdata();
},
beforeDestroy() {
window.removeEventListener("resize", this.resize);
this.chart.dispose(); //销毁
},
methods: {
draw() {
this.chart.setOption({
title: {
text: "数据服务数量统计",
right: "center",
top: "5%",
textStyle: {
color: "#516B91",
},
},
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "20px",
orient: "vertical", //设置图例的朝向 垂直显示
align: "left",
itemGap: 10,
itemHeight: 20,
itemWidth: 20,
textStyle: {
color: "#000",
fontSize: 16,
fontFamily: "黑体",
},
},
series: [
{
// name: "Access From",
type: "pie",
radius: ["30%", "55%"],
avoidLabelOverlap: false, //单行标签会自动避免重叠
minShowLabelAngle: 10, //多行标签 最小标签角度设置为10
label: {
show: true,
formatter: function (param) {
if (param.value == "0") {
return;
} else {
return param.name + param.value;
}
},
},
center: ["50%", "55%"],
emphasis: {
label: {
show: true,
},
},
labelLine: {
show: true,
},
data: [],
},
],
});
},
getdata() {
getDataApiStatistic().then((response) => {
if (response.code === 200) {
const statusCode = JSON.parse(JSON.stringify(response.data).replace(/statusCode/g, "name"));
const list = JSON.parse(JSON.stringify(statusCode).replace(/statuscount/g, "value"));
// console.log(list);
list.forEach(element => {
if(element.name===1){
element.name = '待发布'
}else if(element.name===2){
element.name = '已发布'
}else{
element.name = '已下线'
}
});
this.chart.setOption({
series: [
{
data: list,
},
],
});
} else {
this.chart.setOption({
series: [
{
data: [],
},
],
});
}
});
},
//窗口自适应
resize() {
if (this.resizeTimer) {
clearTimeout(this.resizeTimer);
}
this.resizeTimer = setTimeout(() => {
let chart = echarts.getInstanceByDom(this.$refs.chart);
chart.resize();
}, 10);
},
},
};
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
}
</style>
2、新版本
main.js
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
组件template
<template>
<div
class="chart"
v-loading="loading"
element-loading-background="rgba(0, 0, 0, 0)"
>
<div ref="chart" class="chart" :style="{visibility:loading?'hidden':'visible'}"></div>
</div>
</template>
<script>
export default {
name: 'FlowChart',
data() {
return {
resizeTimer: null,
dataCount: 0,
chart: null,
loading: true,
keys: [0, 0, 0],
}
},
computed: {
update() {
return [
this.$store.state.topology.link.key,
this.$store.state.linkPerformance.key,
this.$store.state.linkFlow.key,
]
},
displayIpv4() {
return this.$store.state.topology.displayIpv4
},
},
watch: {
update(_new) {
if (this.checkUpdate(this.keys, _new)) {
this.setLinkData(this.displayIpv4 ? this.$store.getters.link : this.$store.getters.ipv6Link)
this.keys = [..._new]
}
},
},
mounted() {
window.addEventListener('resize', this.resize)
this.chart = this.$echarts.init(this.$refs.chart)
this.draw()
},
beforeDestroy() {
window.removeEventListener('resize', this.resize)
this.chart.dispose()
},
methods: {
// 绘图
draw() {
try {
this.chart.clear()
this.chart.setOption({
color: ['#5AB1EF'],
tooltip: {
show: true,
trigger: 'item',
showDelay: 0, // 浮窗显示延时
hideDelay: 0, // 浮窗隐藏延时
transitionDuration: 0, // 提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动
backgroundColor: 'rgba(0, 0, 0, 0.7)', // 浮窗背景颜色
borderWidth: 1,
borderColor: '#08b1e7',
textStyle: {
color: '#fff',
},
// 浮窗内文本格式
formatter: params => {
return '链路 ' + params.data.name
},
},
grid: {
top: 10,
left: 20,
right: 40,
bottom: 0,
containLabel: true,
},
dataset: [
// 原始数据集
{
// dimensions: ['type', 'index', 'number', 'flow', null],
source: [],
},
],
xAxis: {
type: 'log', // 对数轴
show: true,
// name: '流量',
// nameLocation: 'start',
position: 'top', // 显示在上方
logBase: 10, // 对数底数
axisLine: {
lineStyle: {
color: 'white',
},
},
splitLine: {
lineStyle: {
color: 'grey',
},
},
},
yAxis: {
type: 'category',
inverse: true,
// animationDuration: 300,
// animationDurationUpdate: 300,
axisLabel: {
show: false,
// color: 'white',
// fontSize: '14',
// formatter: '链路{value}',
},
axisTick: {
show: true,
alignWithLabel: true,
interval: 0,
},
},
series: [{
type: 'bar',
encode: { x: 'realtimeBandwidth' },
datasetIndex: 1,
// realtimeSort: true,
barWidth: 14, // 柱宽度
label: {
show: true, // 开启显示
position: 'right', // 在右侧显示
// distance: 5, // 距离图形元素的距离
// verticalAlign: 'middle',
color: 'white',
fontSize: 14,
},
itemStyle: {
borderRadius: [0, 10, 10, 0],
},
}],
})
// 图标元素点击
this.chart.on('click', params => {
// 事件类型dialog:弹窗
this.$store.commit('setLinkDialogId', params.data.linkId)
})
this.chart.on('mouseover', params => {
this.$store.commit('setHighlightLink', params.data.index)
})
this.chart.on('mouseout', params => {
this.$store.commit('setHighlightLink', -1)
})
} catch (err) {
console.log(err)
}
},
// set数据
setLinkData(data) {
// 根据有没有数据显示loading效果
this.loading = data.length === 0
const newData = []
data.forEach(element => {
if (element.realtimeBandwidth !== undefined)
// if (['2001::ffff:5->2001::ffff:6',
// '2001::ffff:2e->2001::ffff:2d',
// '2001::ffff:32->2001::ffff:31',
// '2001::ffff:29->2001::ffff:2a',
// '2001::ffff:1e->2001::ffff:1d'].includes(element.name))
newData.push(element)
})
// 判断是否需要重绘以适应尺寸
if (newData.length !== this.dataCount) {
this.dataCount = newData.length
// 调整容器尺寸
this.$refs.chart.style.height = this.dataCount * 40 + 'px'
// 重绘canvas
this.chart.resize()
}
try {
if (newData.length === 0) {
this.chart.setOption({ dataset: [{ source: newData }] })
return
}
this.chart.setOption({
dataset: [
{
source: newData,
},
{
transform: {
type: 'sort',
config: { dimension: 'realtimeBandwidth', order: 'desc' },
},
},
],
})
} catch (echartsErr) {
console.error(echartsErr)
}
},
// 监听窗口resize事件,重绘canvas
resize() {
if (this.resizeTimer) {
clearTimeout(this.resizeTimer)
}
this.resizeTimer = setTimeout(() => {
this.$echarts.getInstanceByDom(this.$refs.chart).resize()
}, 200)
},
// 数据更新检查,判断两个key数组的元素是否均不相同
checkUpdate(a, b) {
for (let i = 0; i < a.length; i++) {
if (a[i] === b[i]) return false
}
return true
},
},
}
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
}
</style>