基础文章主要分为两个部分（前半段为全部代码,后半段是代码解析）
代码注释较全,可以参考
1
2
3
1:地图（全部代码）
import React from "react"
import echarts from 'echarts'
/* Nodes world map component */
export default class XXXXX extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
/**
* 世界地图组件
*/
attackMapOptionSet(){
// 载入世界地图
require("../../utils/world");
// 引入
// 地图选项
this.option = {
//地图背景色
backgroundColor: '#202129',
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.name == '') {
return;
} else {
return "节点IP：" + params.name + "<br/>节点坐标：" + params.data.value;
}
}
},
geo: {
map: 'world',
silent: true,
top: 10,
left: 10,
right: 10,
bottom: 30,
roam: true, // 是否启用鼠标缩放和平移
scaleLimit:{
min:1,
max:100,
},
itemStyle: {
normal: {
opacity: 0.8,
borderWidth: 1,
// 地图描边的颜色
borderColor: '#444851',
// 地图土地的颜色
color: '#2E323C'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: []
};
}
/**
* 获取地图数据
*/
getAttrackData() {
let self = this
let data={
"data": [
{
"source": [
{
"name": "乌克兰",
"value": [
48.3794,
31.1656
],
"size": 10
},
{
"name": "广东121.34.251.137",
"value": [
113.25,
23.1167
],
"size": 5
},
{
"name": "安徽223.241.78.94",
"value": [
117.2808,
31.8639
],
"size": 6
},
{
"name": "山东112.228.149.181",
"value": [
116.9972,
36.6683
],
"size": 8
},
{
"name": "河南1.199.132.21",
"value": [
113.5325,
34.6836
],
"size": 6
},
{
"name": "浙江218.72.64.157",
"value": [
120.1614,
30.2936
],
"size": 7
}
],
"target": [
{
"name": "北京111.155.116.228",
"value": [
116.3883,
39.9289
],
"size": 8
}
],
"coords": [
[
[
116.3883,
39.9289
],
[
116.3883,
39.9289
]
],
[
[
113.25,
23.1167
],
[
116.3883,
39.9289
]
],
[
[
117.2808,
31.8639
],
[
116.3883,
39.9289
]
],
[
[
116.9972,
36.6683
],
[
116.3883,
39.9289
]
],
[
[
113.5325,
34.6836
],
[
116.3883,
39.9289
]
],
[
[
120.1614,
30.2936
],
[
116.3883,
39.9289
]
]
]
},
{
"source": [
{
"name": "北京111.155.116.228",
"value": [
116.3883,
39.9289
],
"size": 8
},
{
"name": "广东121.34.251.137",
"value": [
113.25,
23.1167
],
"size": 5
},
{
"name": "安徽223.241.78.94",
"value": [
117.2808,
31.8639
],
"size": 6
},
{
"name": "山东112.228.149.181",
"value": [
116.9972,
36.6683
],
"size": 8
},
{
"name": "河南1.199.132.21",
"value": [
113.5325,
34.6836
],
"size": 6
},
{
"name": "浙江218.72.64.157",
"value": [
120.1614,
30.2936
],
"size": 7
}
],
"target": [
{
"name": "乌克兰",
"value": [
48.3794,
31.1656
],
"size": 10
}
],
"coords": [
[
[
116.3883,
39.9289
],
[
48.3794,
31.1656
]
],
[
[
113.25,
23.1167
],
[
48.3794,
31.1656
]
],
[
[
117.2808,
31.8639
],
[
48.3794,
31.1656
]
],
[
[
116.9972,
36.6683
],
[
48.3794,
31.1656
]
],
[
[
113.5325,
34.6836
],
[
48.3794,
31.1656
]
],
[
[
120.1614,
30.2936
],
[
48.3794,
31.1656
]
]
]
}
],
"code": 200,
"message": {
"en": "Success",
"zh": "成功"
}
}
if(data.code==200){
let mapLineData = [];
let mapCircleDate = [];
let mapList = [mapLineData,mapCircleDate];
for(let i =0 ;i <data.data.length;i++){
for(let j =0;j<data.data[i].coords.length;j++){
mapLineData.push({"coords":data.data[i].coords[j]})
}
for(let n =0;n<data.data[i].source.length;n++){
mapCircleDate.push({
name:data.data[i].source[n].name,
value:data.data[i].source[n].value,
symbolSize:data.data[i].source[n].size,
})
}
mapCircleDate.push({
name:data.data[i].target[0].name,
value:data.data[i].target[0].value,
symbolSize:data.data[i].target[0].size,
itemStyle: {
normal: {
//终点圆点颜色
color: '#17CE9F',
}
}
})
}
for(let i = 0;i<mapList.length;i++){
if(mapList[i][0].coords) {
self.option.series[i] = {
name: '',
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
large: true,
rippleEffect: {
brushType: 'stroke'
},
effect: {
show: true,
constantSpeed: 50,
symbol: 'circle',// ECharts provides: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 2,
trailLength: 0,
},
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
//渐变线条颜色
{offset: 0, color: 'rgba(161,252,58,0.80)'},// 近终点线条颜色
{offset: 1, color: 'rgba(161,252,58,0.50)'}// 近起始点线条颜色
]),
width: 2,
opacity: 0.5,
curveness: 0.1
},
},
data: mapList[i]
};
}else{
self.option.series[i] = {
name: '',
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
label: {
normal: {
show: false,
position: 'right',
formatter: '{b}'
},
emphasis: {
show: true,
position: 'right',
formatter: '{b}'
}
},
// symbolSize: 8,
showEffectOn: 'render',
itemStyle: {
normal: {
opacity: 0.8,
color: function(parms){
let data = parms.data
//起始点颜色
let colorList =['#17CE9F','#34BF20','#81E530','#DEFF46','#F3FFB9'];
if(data.symbolSize<5){
if(data.symbolSize<3){
return colorList[0]
}else{
return colorList[1]
}
}else{
if(data.symbolSize<8){
return colorList[2]
}else{
return colorList[3]
}
}
},
}
},
data: mapList[i]
};
}
}
let chart = echarts.init(document.getElementById('nodeMap'));
chart.setOption(self.option);
}else{
}
}
/**
* 安装组件
*/
componentWillMount() {
// 初始化世界地图
this.attackMapOptionSet()
}
/**
* 组件安装后
*/
componentDidMount(){
// 获取地图数据并更新状态
this.getAttrackData()
}
render() {
return (
<div className="nodeMap">
<div id="nodeMap" style={{ width: '500px', height: '300px' }}>
</div>
</div>
)
}
}
1:地图（代码解析）
//Dom元素
<div className="nodeMap">
<div id="nodeMap" style={{ width: '500px', height: '300px' }}>
</div>
</div>
//安装组件
componentWillMount() {
// 初始化世界地图
this.attackMapOptionSet()
}
//组件安装后
componentDidMount(){
// 获取地图数据并更新状态
this.getAttrackData()
}
//获取地图数据
getAttrackData() {
let self = this
let data={.....数据根据上面完整代码自定义}
if(data.code==200){
let mapLineData = [];
let mapCircleDate = [];
let mapList = [mapLineData,mapCircleDate];
for(let i =0 ;i <data.data.length;i++){
for(let j =0;j<data.data[i].coords.length;j++){
mapLineData.push({"coords":data.data[i].coords[j]})
}
for(let n =0;n<data.data[i].source.length;n++){
mapCircleDate.push({
name:data.data[i].source[n].name,
value:data.data[i].source[n].value,
symbolSize:data.data[i].source[n].size,
})
}
mapCircleDate.push({
name:data.data[i].target[0].name,
value:data.data[i].target[0].value,
symbolSize:data.data[i].target[0].size,
itemStyle: {
normal: {
//终点圆点颜色
color: '#17CE9F',
}
}
})
}
for(let i = 0;i<mapList.length;i++){
if(mapList[i][0].coords) {
self.option.series[i] = {
name: '',
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
large: true,
rippleEffect: {
brushType: 'stroke'
},
effect: {
show: true,
constantSpeed: 50,
symbol: 'circle',// ECharts provides: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 2,
trailLength: 0,
},
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
//渐变线条颜色
{offset: 0, color: 'rgba(161,252,58,0.80)'},// 近终点线条颜色
{offset: 1, color: 'rgba(161,252,58,0.50)'}// 近起始点线条颜色
]),
width: 2,
opacity: 0.5,
curveness: 0.1
},
},
data: mapList[i]
};
}else{
self.option.series[i] = {
name: '',
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
label: {
normal: {
show: false,
position: 'right',
formatter: '{b}'
},
emphasis: {
show: true,
position: 'right',
formatter: '{b}'
}
},
// symbolSize: 8,
showEffectOn: 'render',
itemStyle: {
normal: {
opacity: 0.8,
color: function(parms){
let data = parms.data
//起始点颜色
let colorList =['#17CE9F','#34BF20','#81E530','#DEFF46','#F3FFB9'];
if(data.symbolSize<5){
if(data.symbolSize<3){
return colorList[0]
}else{
return colorList[1]
}
}else{
if(data.symbolSize<8){
return colorList[2]
}else{
return colorList[3]
}
}
},
}
},
data: mapList[i]
};
}
}
let chart = echarts.init(document.getElementById('nodeMap'));
chart.setOption(self.option);
}else{
}
}
//地图选项
this.option = {
//地图背景色
backgroundColor: '#202129',
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.name == '') {
return;
} else {
return "节点IP：" + params.name + "<br/>节点坐标：" + params.data.value;
}
}
},
geo: {
map: 'world',
silent: true,
top: 10,
left: 10,
right: 10,
bottom: 30,
roam: true, // 是否启用鼠标缩放和平移
scaleLimit:{
min:1,
max:100,
},
itemStyle: {
normal: {
opacity: 0.8,
borderWidth: 1,
// 地图描边的颜色
borderColor: '#444851',
// 地图土地的颜色
color: '#2E323C'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: []
};
2:甜甜圈（全部代码）
import React, {Component} from 'react';
//引用echars
import echarts from 'echarts'
class XXXXX extends Component {
constructor(props) {
super(props);
this.state = {}
this.optionProductPie = {
// default color palette
color: [
'rgba(43,62,23,1)',
'rgba(161,252,58,0.4)',
],
tooltip : {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.5)',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name:'Block Producer',
type:'pie',
radius: ['50%', '75%'],
label: {
normal: {
show: true,
formatter: '{b}',
textStyle:{
fontSize: '12',
color:'#A3A3A3'
}
},
},
labelLine: {
normal: {
show: true,
lineStyle: {
color: '#A1A6AD'
}
}
},
data:[]
},
{
name: '圆环中间的线条(此数据值做样式)',
type: 'pie',
animation: false,
clockWise: false,
radius: ['49%', '50%'],
hoverAnimation: false,
tooltip: {
show: false
},
label: {
normal: {
show: false,
},
},
data: [{
value: 100,
name: '',
itemStyle: {
normal: {
color: "#A1FC3A",
},
}
}
]
}
]
};
this.optionVotingPie = {
// 默认色板
color: [
// 控制右边圆的颜色
'rgba(255,0,0,1)',
// 控制左边圆的颜色
'rgba(0,255,0,1)',
],
title: {
// text: '80%',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
color: '#FEFEFE',
fontSize: '24'
}
},
tooltip : {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.5)',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name:'Internet Voting',
type:'pie',
radius: ['50%', '75%'],
clockWise: true,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: true,
data:[]
},
{
name: '圆环中间的线条(此数据值做样式)',
type: 'pie',
animation: false,
clockWise: false,
radius: ['49%', '50%'],
hoverAnimation: false,
tooltip: {
show: false
},
label: {
normal: {
show: false,
},
},
data: [{
value: 100,
name: '',
itemStyle: {
normal: {
color: "#A1FC3A",
},
}
}
]
}
]
};
}
componentDidMount() {
this.getChartPieData();
}
getChartPieData(){
var self = this
let data={
"code": 200,
"bp": [
{
"name": "amy",
"value": 25
},
{
"name": "lily",
"value": 25
},
{
"name": "jim",
"value": 25
},
{
"name": "tony",
"value": 25
}
],
"iv": [
{
"name": "Internet Voting1",
"value": 80
// 右侧的额值
},
{
"name": "Internet Voting2",
"value": 20
// 左侧的额值
}
],
"message": {
"en": "Success",
"zh": "成功"
}
}
if(data.code==200){
self.optionProductPie.series[0].data = data.bp
self.optionVotingPie.series[0].data = data.iv
// set chart of block producer
// let chartLine2 = echarts.init(document.getElementById('producter-pie'));
// chartLine2.setOption(self.optionProductPie, true);
// set chart of Internet Voting
let chartLine3 = echarts.init(document.getElementById('voting-pie'));
chartLine3.setOption(self.optionVotingPie, true);
}else{
}
}
render() {
return (
<div className="container">
<div id="voting-pie" style={{ width: "100%", height: "170px" }}></div>
</div>
);
}
}
export default XXXXX;
2:甜甜圈（代码解析）
//Dom元素
<div className="container">
<div id="voting-pie" style={{ width: "100%", height: "170px" }}></div>
</div>
//DidMount
//调用方法
this.getChartPieData();
//被调用方法
getChartPieData(){
var self = this
let data={
"code": 200,
"bp": [
{
"name": "amy",
"value": 25
},
{
"name": "lily",
"value": 25
},
{
"name": "jim",
"value": 25
},
{
"name": "tony",
"value": 25
}
],
"iv": [
{
"name": "Internet Voting1",
"value": 80
// 右侧的额值
},
{
"name": "Internet Voting2",
"value": 20
// 左侧的额值
}
],
"message": {
"en": "Success",
"zh": "成功"
}
}
if(data.code==200){
//连接定义的this.optionProductPie
self.optionProductPie.series[0].data = data.bp
//连接定义的this.optionVotingPie
self.optionVotingPie.series[0].data = data.iv
//衔接下方voting-pie（Dom）
let chartLine3 = echarts.init(document.getElementById('voting-pie'));
chartLine3.setOption(self.optionVotingPie, true);
}else{
}
}
//"this.optionProductPie"
this.optionProductPie = {
// default color palette
color: [
'rgba(43,62,23,1)',
'rgba(161,252,58,0.4)',
],
tooltip : {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.5)',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name:'Block Producer',
type:'pie',
radius: ['50%', '75%'],
label: {
normal: {
show: true,
formatter: '{b}',
textStyle:{
fontSize: '12',
color:'#A3A3A3'
}
},
},
labelLine: {
normal: {
show: true,
lineStyle: {
color: '#A1A6AD'
}
}
},
data:[]
},
{
name: '圆环中间的线条(此数据值做样式)',
type: 'pie',
animation: false,
clockWise: false,
radius: ['49%', '50%'],
hoverAnimation: false,
tooltip: {
show: false
},
label: {
normal: {
show: false,
},
},
data: [{
value: 100,
name: '',
itemStyle: {
normal: {
color: "#A1FC3A",
},
}
}
]
}
]
};
//"this.optionVotingPie"
this.optionVotingPie = {
// 默认色板
color: [
// 控制右边圆的颜色
'rgba(255,0,0,1)',
// 控制左边圆的颜色
'rgba(0,255,0,1)',
],
title: {
// text: '80%',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
color: '#FEFEFE',
fontSize: '24'
}
},
tooltip : {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.5)',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name:'Internet Voting',
type:'pie',
radius: ['50%', '75%'],
clockWise: true,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: true,
data:[]
},
{
name: '圆环中间的线条(此数据值做样式)',
type: 'pie',
animation: false,
clockWise: false,
radius: ['49%', '50%'],
hoverAnimation: false,
tooltip: {
show: false
},
label: {
normal: {
show: false,
},
},
data: [{
value: 100,
name: '',
itemStyle: {
normal: {
color: "#A1FC3A",
},
}
}
]
}
]
};
3:面积图（全部代码）
import React, {Component} from 'react';
//引入echars
import echarts from 'echarts'
class XXXXX extends Component {
constructor(props) {
super(props);
this.state = {}
this.optionDealNumLine = {
animation: true,
grid:{
// 各方为距离
left:35,
top:12,
right:12,
bottom:20,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
//划过时弹出x/y轴的块颜色
backgroundColor: '#283b56'
}
}
},
legend: {
show:false
},
dataZoom: {
show: false,
start: 40,
end: 100,
// filterMode: 'empty'
},
xAxis: [{
type: 'category',
boundaryGap: false, // margin of axis
splitLine: {
show: true,
lineStyle: {
// 垂直线条颜色
color: "#444851"
}
},
axisLine: {
lineStyle: {
//最底下线条的颜色
color: '#a1a6ad'
}
},
axisLabel:{
fontSize:10,
// 最底下文字的font-color颜色
color:'#A1A6AD'
},
data: (function () {
// generate a time-based axis
var now = new Date();
var res = [];
var len = 30;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
now = new Date(now - 5000);
}
return res;
})()
}],
yAxis: [{
type: 'value',
scale: true,
name: '',
max: 100,
min: 0,
splitLine: {
show: true,
lineStyle: {
// 横向线条的颜色
color: "#444851"
}
},
axisLine: {
lineStyle: {
//最左边线条的颜色
color: '#A1A6AD'
}
},
axisLabel:{
fontSize:10,
// 左侧文字字体颜色
color:'#A1A6AD'
},
boundaryGap: [0.2, 0.2]
}],
series: [
{
name: 'Real-time Transactions',
type: 'line',
symbol: 'none',
smooth: true,
itemStyle: {
normal: {
//弹出框的圆点颜色
color: "#A26EEC"
}
},
lineStyle: {
normal: {
// 包波浪层的border颜色
color: "#A1FC3A",
width:1,
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
// 渐变色的上半部
color: 'rgba(161,252,58,0.6)'
},{
offset: 1,
// 渐变色的下半部
color: 'rgba(161,252,58,0.1)'
}], false),
}
},
data: (function () {
// init data with 0
var res = [];
var len = 0;
while (len < 30) {
res.push(0);
len++;
}
return res;
})()
}
]
};
}
componentDidMount() {
let self = this;
let maxFlow = 100; // set maximum number of transactions
let chartLine = echarts.init(document.getElementById('dealNum-line'))
this.flowUpdate = setInterval(function () {
// self.getBlockChainNodeMsg();
self.getCurrentDealData();
var axisData;
axisData = self.state.currentDealData.time; // current time
let dataDeal= self.state.currentDealData.count // number of transactions
// 纵坐标最大值暂时先设置为交易峰值的1.5倍，比较实时交易次数与之前一次请求获取的值比较，若大于0，则更新最大值
maxFlow = parseInt(dataDeal * 1.5) > maxFlow ? parseInt(dataDeal * 1.5) : maxFlow
self.optionDealNumLine.yAxis[0].max = maxFlow
// add more data
var data1 = self.optionDealNumLine.series[0].data;
data1.shift(); //去掉数组的第一个
data1.push(dataDeal); //在数组末尾增加一个
// update time
self.optionDealNumLine.xAxis[0].data.shift(); //去掉数组的第一个
self.optionDealNumLine.xAxis[0].data.push(axisData); //在数组末尾增加一个
// redraw
chartLine.setOption(self.optionDealNumLine);
}, 3000)
this.getLadderList()
this.ladderListInterval = setInterval(function(){
self.getLadderList()
},3000)
}
getCurrentDealData(){
let hours=new Date().getHours()
let minute=new Date().getMinutes()
let second=new Date().getSeconds()
let time = hours+':'+minute+':'+second;
let count = Math.floor(Math.random()*200)
var self = this
var data={
"data": {
"time": time,
"count": count
},
"code": 200,
"message": {
"en": "Success",
"zh": "成功"
}
}
if(data.code==200){
self.setState({
currentDealData:data.data
})
}else{
}
}
getLadderList(){
var self=this
let data={
"data": [
{
"rank": 1,
"ip": "192.168.1.170",
"cur_pts": 24381,
"pre_pts": 16871,
"wavy": [
16,
16,
15,
12,
19,
18,
26,
14,
18,
17
]
},
{
"rank": 2,
"ip": "192.168.1.171",
"cur_pts": 13992,
"pre_pts": 12555,
"wavy": [
28,
16,
27,
11,
25,
22,
26,
30,
14,
17
]
},
{
"rank": 3,
"ip": "192.168.1.172",
"cur_pts": 10299,
"pre_pts": 16766,
"wavy": [
22,
30,
11,
25,
10,
15,
20,
19,
23,
19
]
},
{
"rank": 4,
"ip": "192.168.1.173",
"cur_pts": 20339,
"pre_pts": 9335,
"wavy": [
26,
25,
25,
20,
19,
14,
12,
11,
14,
28
]
},
{
"rank": 5,
"ip": "192.168.1.174",
"cur_pts": 23413,
"pre_pts": 26239,
"wavy": [
25,
30,
15,
12,
10,
27,
26,
27,
17,
19
]
},
{
"rank": 6,
"ip": "192.168.1.175",
"cur_pts": 24789,
"pre_pts": 16401,
"wavy": [
13,
23,
24,
21,
30,
15,
19,
21,
25,
26
]
},
{
"rank": 7,
"ip": "192.168.1.176",
"cur_pts": 8963,
"pre_pts": 24950,
"wavy": [
15,
16,
23,
28,
11,
27,
20,
18,
29,
16
]
}
],
"code": 200,
"message": {
"en": "Success",
"zh": "成功"
},
"total_item": 7,
"total_page": 1
}
for(let i=0;i<7;i++){
for(let j=0;j<10;j++){
data.data[i].wavy[j]=Math.floor(Math.random()*30)
}
}
self.setState({
ladderList: data.data,
totalItemsCount: data.total_item,
totalPagesCount: data.total_page,
})
}
render() {
return (
<div className="container">
<div id="dealNum-line" style={{ width: "100%", height: "100%" }}></div>
</div>
);
}
}
export default XXXXX;
3:面积图（代码解析）
//Dom元素
<div className="container">
<div id="dealNum-line" style={{ width: "100%", height: "100%" }}></div>
</div>
//DidMount
let self = this;
let maxFlow = 100; // set maximum number of transactions
let chartLine = echarts.init(document.getElementById('dealNum-line'))
this.flowUpdate = setInterval(function () {
// self.getBlockChainNodeMsg();
//调用getCurrentDealData
self.getCurrentDealData();
var axisData;
axisData = self.state.currentDealData.time; // current time
let dataDeal= self.state.currentDealData.count // number of transactions
// 纵坐标最大值暂时先设置为交易峰值的1.5倍，比较实时交易次数与之前一次请求获取的值比较，若大于0，则更新最大值
maxFlow = parseInt(dataDeal * 1.5) > maxFlow ? parseInt(dataDeal * 1.5) : maxFlow
//调用state下的optionDealNumLine
self.optionDealNumLine.yAxis[0].max = maxFlow
// add more data
var data1 = self.optionDealNumLine.series[0].data;
data1.shift(); //去掉数组的第一个
data1.push(dataDeal); //在数组末尾增加一个
// update time
self.optionDealNumLine.xAxis[0].data.shift(); //去掉数组的第一个
self.optionDealNumLine.xAxis[0].data.push(axisData); //在数组末尾增加一个
// redraw
chartLine.setOption(self.optionDealNumLine);
}, 3000)
//调用getLadderList
this.getLadderList()
this.ladderListInterval = setInterval(function(){
self.getLadderList()
},3000)
//方法（getCurrentDealData）
getCurrentDealData(){
let hours=new Date().getHours()
let minute=new Date().getMinutes()
let second=new Date().getSeconds()
let time = hours+':'+minute+':'+second;
let count = Math.floor(Math.random()*200)
var self = this
var data={
"data": {
"time": time,
"count": count
},
"code": 200,
"message": {
"en": "Success",
"zh": "成功"
}
}
if(data.code==200){
self.setState({
currentDealData:data.data
})
}else{
}
}
//方法（getLadderList）
getLadderList(){
var self=this
let data={.....请根据上面定义数据}
for(let i=0;i<7;i++){
for(let j=0;j<10;j++){
data.data[i].wavy[j]=Math.floor(Math.random()*30)
}
}
//随机0-30放入data数据内
self.setState({
ladderList: data.data,
totalItemsCount: data.total_item,
totalPagesCount: data.total_page,
})
}
//"constructor下this.optionDealNumline"
this.optionDealNumLine = {
animation: true,
grid:{
// 各方为距离
left:35,
top:12,
right:12,
bottom:20,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
//划过时弹出x/y轴的块颜色
backgroundColor: '#283b56'
}
}
},
legend: {
show:false
},
dataZoom: {
show: false,
start: 40,
end: 100,
// filterMode: 'empty'
},
xAxis: [{
type: 'category',
boundaryGap: false, // margin of axis
splitLine: {
show: true,
lineStyle: {
// 垂直线条颜色
color: "#444851"
}
},
axisLine: {
lineStyle: {
//最底下线条的颜色
color: '#a1a6ad'
}
},
axisLabel:{
fontSize:10,
// 最底下文字的font-color颜色
color:'#A1A6AD'
},
data: (function () {
// generate a time-based axis
var now = new Date();
var res = [];
var len = 30;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
now = new Date(now - 5000);
}
return res;
})()
}],
yAxis: [{
type: 'value',
scale: true,
name: '',
max: 100,
min: 0,
splitLine: {
show: true,
lineStyle: {
// 横向线条的颜色
color: "#444851"
}
},
axisLine: {
lineStyle: {
//最左边线条的颜色
color: '#A1A6AD'
}
},
axisLabel:{
fontSize:10,
// 左侧文字字体颜色
color:'#A1A6AD'
},
boundaryGap: [0.2, 0.2]
}],
series: [
{
name: 'Real-time Transactions',
type: 'line',
symbol: 'none',
smooth: true,
itemStyle: {
normal: {
//弹出框的圆点颜色
color: "#A26EEC"
}
},
lineStyle: {
normal: {
// 包波浪层的border颜色
color: "#A1FC3A",
width:1,
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
// 渐变色的上半部
color: 'rgba(161,252,58,0.6)'
},{
offset: 1,
// 渐变色的下半部
color: 'rgba(161,252,58,0.1)'
}], false),
}
},
data: (function () {
// init data with 0
var res = [];
var len = 0;
while (len < 30) {
res.push(0);
len++;
}
return res;
})()
}
]
}; 
