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
Hide 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 { ...@@ -12,7 +12,7 @@ class App extends Component {
target:[], target:[],
} }
componentDidMount(){ 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', method:'GET',
headers:{ headers:{
'Content-Type':'application/json;charset=UTF-8' 'Content-Type':'application/json;charset=UTF-8'
...@@ -20,7 +20,7 @@ class App extends Component { ...@@ -20,7 +20,7 @@ class App extends Component {
}) })
.then(res => .then(res =>
res.json() res.json()
) )
.then((data) => { .then((data) => {
this.setState({ this.setState({
data:data.result.Rows, data:data.result.Rows,
...@@ -39,9 +39,8 @@ class App extends Component { ...@@ -39,9 +39,8 @@ class App extends Component {
label: { label: {
show: true, show: true,
lineHeight:25, lineHeight:25,
// position: 'start', // 改变label位置
position: 'insideMiddleTop', position: 'insideMiddleTop',
formatter:item.Value , // 格式化标签文本 formatter:item.Value ,
}, },
lineStyle: { color: 'red', type: 'solid',with:30}, lineStyle: { color: 'red', type: 'solid',with:30},
}, },
...@@ -61,9 +60,8 @@ class App extends Component { ...@@ -61,9 +60,8 @@ class App extends Component {
label: { label: {
show: true, show: true,
lineHeight:10, lineHeight:10,
// position: 'start', // 改变label位置
position: 'insideMiddleTop', position: 'insideMiddleTop',
formatter:item.Value, // 格式化标签文本 formatter:item.Value,
}, },
lineStyle: { color: 'green', type: 'solid',with:30}, lineStyle: { color: 'green', type: 'solid',with:30},
}, },
...@@ -188,15 +186,13 @@ class App extends Component { ...@@ -188,15 +186,13 @@ class App extends Component {
right: 100 right: 100
}, },
grid: { grid: {
left: 0, left: 40,
bottom: 0, bottom: 0,
containLabel: true, containLabel: true,
top: 80 top: 80
}, },
xAxis: [ xAxis: [
{ {
// type: 'value',
// type:'time',
name:'Time', name:'Time',
axisLabel: { axisLabel: {
formatter: (function(value){ formatter: (function(value){
...@@ -229,7 +225,6 @@ class App extends Component { ...@@ -229,7 +225,6 @@ class App extends Component {
axisLabel:{ axisLabel:{
inside: false, inside: false,
}, },
// boundaryGap: true,
axisTick: { axisTick: {
alignWithLabel:true, alignWithLabel:true,
} }
...@@ -242,7 +237,6 @@ class App extends Component { ...@@ -242,7 +237,6 @@ class App extends Component {
axisLabel:{ axisLabel:{
inside: true, inside: true,
}, },
// boundaryGap: true,
axisTick: { axisTick: {
alignWithLabel:true, alignWithLabel:true,
} }
...@@ -251,6 +245,10 @@ class App extends Component { ...@@ -251,6 +245,10 @@ class App extends Component {
yAxis: { yAxis: {
type: 'category', type: 'category',
name:'Validator', name:'Validator',
nameTextStyle: {
align: "center",
lineHeight: 40,
},
data: this.state.AxisY, data: this.state.AxisY,
triggerEvent: true, triggerEvent: true,
axisLabel:{ axisLabel:{
...@@ -295,11 +293,11 @@ class App extends Component { ...@@ -295,11 +293,11 @@ class App extends Component {
div.style.display = 'block' div.style.display = 'block'
document.querySelector('html').appendChild(div) 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){ myChart.on('mouseover',function(params){
if (params.componentType == 'yAxis') { if (params.componentType == 'yAxis') {
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
var elementStyle = var elementStyle = 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'
elementDiv.style.cssText = elementStyle elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = params.value elementDiv.innerHTML = params.value
document.querySelector('html').onmousemove = function (event) { document.querySelector('html').onmousemove = function (event) {
...@@ -315,17 +313,7 @@ class App extends Component { ...@@ -315,17 +313,7 @@ class App extends Component {
if(params.componentType == "series"){ if(params.componentType == "series"){
if(params.name === params.data.name){ if(params.name === params.data.name){
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
var elementStyle = var elementStyle = 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`
elementDiv.style.cssText = elementStyle 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>` 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) { document.querySelector('html').onmousemove = function (event) {
...@@ -341,16 +329,7 @@ class App extends Component { ...@@ -341,16 +329,7 @@ class App extends Component {
myChart.on('mousemove', function (params) { myChart.on('mousemove', function (params) {
if(params.componentType == "markLine"){ if(params.componentType == "markLine"){
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
var elementStyle = var elementStyle = 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`
elementDiv.style.cssText = elementStyle elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = moment(parseInt(params.data.xAxis/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS') elementDiv.innerHTML = moment(parseInt(params.data.xAxis/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')
document.querySelector('html').onmousemove = function (event) { 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