Skip to content

G
graph
Commit df2ba828 authored by wenli.huang@wuban.net.cn's avatar wenli.huang@wuban.net.cn
Browse files
Options

up

parent 1709e8d8
Show whitespace changes
Inline Side-by-side
Showing with 13 additions and 34 deletions
src/App.js
View file @ df2ba828
......@@ -12,7 +12,7 @@ class App extends Component {
target:[],
}
componentDidMount(){
fetch('/api/graph_by_height_and_duration?height=0&duration=0',{
fetch('/api/graph_by_height_and_duration?height=1&duration=10',{
method:'GET',
headers:{
'Content-Type':'application/json;charset=UTF-8'
......@@ -39,9 +39,8 @@ class App extends Component {
label: {
show: true,
lineHeight:25,
// position: 'start', // 改变label位置
position: 'insideMiddleTop',
formatter:item.Value , // 格式化标签文本
formatter:item.Value ,
},
lineStyle: { color: 'red', type: 'solid',with:30},
},
......@@ -61,9 +60,8 @@ class App extends Component {
label: {
show: true,
lineHeight:10,
// position: 'start', // 改变label位置
position: 'insideMiddleTop',
formatter:item.Value, // 格式化标签文本
formatter:item.Value,
},
lineStyle: { color: 'green', type: 'solid',with:30},
},
......@@ -188,15 +186,13 @@ class App extends Component {
right: 100
},
grid: {
left: 0,
left: 40,
bottom: 0,
containLabel: true,
top: 80
},
xAxis: [
{
// type: 'value',
// type:'time',
name:'Time',
axisLabel: {
formatter: (function(value){
......@@ -229,7 +225,6 @@ class App extends Component {
axisLabel:{
inside: false,
},
// boundaryGap: true,
axisTick: {
alignWithLabel:true,
}
......@@ -242,7 +237,6 @@ class App extends Component {
axisLabel:{
inside: true,
},
// boundaryGap: true,
axisTick: {
alignWithLabel:true,
}
......@@ -251,6 +245,10 @@ class App extends Component {
yAxis: {
type: 'category',
name:'Validator',
nameTextStyle: {
align: "center",
lineHeight: 40,
},
data: this.state.AxisY,
triggerEvent: true,
axisLabel:{
......@@ -295,11 +293,11 @@ class App extends Component {
div.style.display = 'block'
document.querySelector('html').appendChild(div)
}
var styleCss=`position: absolute;margin-left:35px;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px`
myChart.on('mouseover',function(params){
if (params.componentType == 'yAxis') {
var elementDiv = document.querySelector('#extension')
var elementStyle =
'position: absolute;margin-left:35px;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
var elementStyle = styleCss
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = params.value
document.querySelector('html').onmousemove = function (event) {
......@@ -315,17 +313,7 @@ class App extends Component {
if(params.componentType == "series"){
if(params.name === params.data.name){
var elementDiv = document.querySelector('#extension')
var elementStyle =
`position: absolute;
margin-left:35px;
z-index: 99999;
color: #fff;
font-size: 12px;
padding: 5px;
display: inline;
border-radius: 4px;background-color: #303133;
box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px`
var elementStyle = styleCss
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML=`<p>${moment(parseInt(params.data.value[0]/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')}</p><p>round：${params.data.value[4]}</p>`
document.querySelector('html').onmousemove = function (event) {
......@@ -341,16 +329,7 @@ class App extends Component {
myChart.on('mousemove', function (params) {
if(params.componentType == "markLine"){
var elementDiv = document.querySelector('#extension')
var elementStyle =
`position: absolute;
margin-left:35px;
z-index: 99999;
color: #fff;
font-size: 12px;
padding: 5px;
display: inline;
border-radius: 4px;background-color: #303133;
box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px`
var elementStyle = styleCss
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = moment(parseInt(params.data.xAxis/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')
document.querySelector('html').onmousemove = function (event) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment