test: echarts topo试验
This commit is contained in:
chenjinsong
@@ -45,6 +45,9 @@
|
|||||||
<el-menu-item index="1-2">
|
<el-menu-item index="1-2">
|
||||||
<div @click="jumpTo('explore')" :class="{'menu-item-active' :activeIndex == 'explore'}">{{$t('dashboard.metricPreview.title')}}</div>
|
<div @click="jumpTo('explore')" :class="{'menu-item-active' :activeIndex == 'explore'}">{{$t('dashboard.metricPreview.title')}}</div>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
<el-menu-item index="1-3">
|
||||||
|
<div @click="jumpTo('test')" :class="{'menu-item-active' :activeIndex == 'test'}">test</div>
|
||||||
|
</el-menu-item>
|
||||||
</el-submenu>
|
</el-submenu>
|
||||||
|
|
||||||
<el-submenu index="2" popper-class="nz-submenu">
|
<el-submenu index="2" popper-class="nz-submenu">
|
||||||
|
|||||||
200
nezha-fronted/src/components/page/dashboard/overview/test.vue
Normal file
200
nezha-fronted/src/components/page/dashboard/overview/test.vue
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
<template>
|
||||||
|
<div class="overview" style="height: 100%;">
|
||||||
|
<!--左侧菜单栏-->
|
||||||
|
<left-menu>
|
||||||
|
<div slot="content-left" class="slot-content">
|
||||||
|
<div class="sidebar-title">{{$t('dashboard.title')}}</div>
|
||||||
|
<div class="sidebar-info">
|
||||||
|
<div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
|
||||||
|
<div class="sidebar-info-item sidebar-info-top " @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
|
||||||
|
<div class="sidebar-info-item" @click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--右侧内容-->
|
||||||
|
<div class="overview-right slot-content" id="mainDisplay" slot="content-right">
|
||||||
|
<div id="topo" style="width: 75%; display: inline-block; height: 99%"></div>
|
||||||
|
<div style="width: 24%; display: inline-block; height: 99%; background-color: white; vertical-align: top">
|
||||||
|
name: <input id="k1"></input><br/>
|
||||||
|
alerts: <input id="k2"></input><br/>
|
||||||
|
x: <input id="k3"></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</left-menu>
|
||||||
|
<div class="axis-tooltip el-popover"></div>
|
||||||
|
<!--用于assetType饼图label-->
|
||||||
|
<img src='../../../../assets/img/up.png' id="upPic" style="display: none;">
|
||||||
|
<img src='../../../../assets/img/down.png' id="downPic" style="display: none;">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import chart from "./chart";
|
||||||
|
import echarts from 'echarts';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "test",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: '',
|
||||||
|
data: {nodes: [
|
||||||
|
{color: "#4f19c7", label: "jquery", y: -404.26147, x: -739.36383, id: "jquery", size: 54},
|
||||||
|
{color: "#4f19c7", label: "jsdom", y: -404.26147, x: -738.06383, id: "jsdom", size: 13}],
|
||||||
|
edges: [{sourceID: "jquery", targetID: "jsdom", size: 1}]}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
load() {
|
||||||
|
let myChart = echarts.init(document.getElementById("topo"));
|
||||||
|
var symbolSize = 20;
|
||||||
|
|
||||||
|
//var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
|
||||||
|
var data = [[[15, 0], [-50, 10]], [[-50, 10], [-56.5, 20]], [[-56.5, 20], [-46.5, 30]], [[-46.5, 30], [-22.1, 40]]];
|
||||||
|
var data1 = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
|
||||||
|
var data2 = data.map((d, i) => {
|
||||||
|
return {
|
||||||
|
name: i,
|
||||||
|
coords: d
|
||||||
|
};
|
||||||
|
});
|
||||||
|
myChart.setOption({
|
||||||
|
xAxis: {
|
||||||
|
min: -100,
|
||||||
|
max: 80,
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {onZero: false},
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
min: -30,
|
||||||
|
max: 60,
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {onZero: false},
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
id: 'a',
|
||||||
|
type: 'lines',
|
||||||
|
coordinateSystem: 'cartesian2d',
|
||||||
|
symbol: ['none', 'arrow'],
|
||||||
|
symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。
|
||||||
|
data: data2,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#ff0000',
|
||||||
|
width: 1,
|
||||||
|
curveness: 0.2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
id: 'b',
|
||||||
|
symbolSize: 20,
|
||||||
|
data: data1,
|
||||||
|
type: 'scatter',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
/*myChart.setOption({
|
||||||
|
// 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。
|
||||||
|
// 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。
|
||||||
|
// 用 map 方法遍历 data 的每项，为每项生成一个圆点。
|
||||||
|
graphic: echarts.util.map(data, function (dataItem, dataIndex) {
|
||||||
|
let a = {
|
||||||
|
type: 'circle',
|
||||||
|
shape: {
|
||||||
|
r: symbolSize / 2
|
||||||
|
},
|
||||||
|
position: myChart.convertToPixel('grid', dataItem),
|
||||||
|
invisible: true,
|
||||||
|
draggable: true,
|
||||||
|
z: 100,
|
||||||
|
ondrag: echarts.util.curry(onPointDragging, dataIndex)
|
||||||
|
};
|
||||||
|
console.info(a);
|
||||||
|
return a;
|
||||||
|
})
|
||||||
|
});*/
|
||||||
|
setTimeout(() => {
|
||||||
|
myChart.setOption({
|
||||||
|
graphic: echarts.util.map(data1, function (dataItem, dataIndex) {
|
||||||
|
let a = {
|
||||||
|
type: 'circle',
|
||||||
|
shape: {
|
||||||
|
r: symbolSize / 2
|
||||||
|
},
|
||||||
|
position: myChart.convertToPixel('grid', dataItem),
|
||||||
|
draggable: true,
|
||||||
|
invisible: true,
|
||||||
|
z: 100,
|
||||||
|
info: {name: 'kafka' + dataIndex, alerts: (dataIndex+1)*50},
|
||||||
|
ondrag: echarts.util.curry(onPointDragging, dataIndex),
|
||||||
|
style: {
|
||||||
|
fill: '#777'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return a;
|
||||||
|
})
|
||||||
|
});
|
||||||
|
});
|
||||||
|
myChart.on('click', (e) => {
|
||||||
|
if (e.info) {
|
||||||
|
document.getElementById("k1").value = e.info.name;
|
||||||
|
document.getElementById("k2").value = e.info.alerts;
|
||||||
|
document.getElementById("k3").value = e.event.offsetX;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
myChart.on('mousedown', (e) => {
|
||||||
|
if (e.info) {
|
||||||
|
document.getElementById("k1").value = e.info.name;
|
||||||
|
document.getElementById("k2").value = e.info.alerts;
|
||||||
|
document.getElementById("k3").value = e.event.offsetX;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
myChart.on('mousemove', (e) => {
|
||||||
|
if (e.info) {
|
||||||
|
document.getElementById("k3").value = e.event.offsetX;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
function onPointDragging(dataIndex) {
|
||||||
|
for (let k in myChart._componentsMap) {
|
||||||
|
if (k.indexOf("graphic") > -1) {
|
||||||
|
if (dataIndex != 0) {
|
||||||
|
data[dataIndex-1] = [data[dataIndex-1][0], myChart.convertFromPixel('grid', this.position)];
|
||||||
|
}
|
||||||
|
if (dataIndex != data.length) {
|
||||||
|
data[dataIndex] = [myChart.convertFromPixel('grid', this.position), data[dataIndex][1]];
|
||||||
|
}
|
||||||
|
data1[dataIndex] = myChart.convertFromPixel('grid', this.position);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 用更新后的 data，重绘折线图。
|
||||||
|
myChart.setOption({
|
||||||
|
series: [{
|
||||||
|
id: 'a',
|
||||||
|
data: data
|
||||||
|
}, {
|
||||||
|
id: 'b',
|
||||||
|
data: data1
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
// 对每个拖拽圆点重新计算位置，并用 setOption 更新。
|
||||||
|
myChart.setOption({
|
||||||
|
graphic: echarts.util.map(data, function (item, dataIndex) {
|
||||||
|
return {
|
||||||
|
position: myChart.convertToPixel('grid', item)
|
||||||
|
};
|
||||||
|
})
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.load();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -48,6 +48,10 @@ export default new Router({
|
|||||||
path: 'overview',
|
path: 'overview',
|
||||||
component: resolve => require(['../components/page/dashboard/overview/overview2.vue'],resolve)
|
component: resolve => require(['../components/page/dashboard/overview/overview2.vue'],resolve)
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'test',
|
||||||
|
component: resolve => require(['../components/page/dashboard/overview/test.vue'],resolve)
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/project',
|
path: '/project',
|
||||||
component: resolve => require(['../components/page/project/project.vue'], resolve),
|
component: resolve => require(['../components/page/project/project.vue'], resolve),
|
||||||
|
|||||||
Reference in New Issue
Block a user