Echarts与后台交互实现真实数据渲染——express模拟后端接口数据 & fetch-更新部分内容 & data数据-json格式-NetworkResponse中查询

Echarts与后台交互实现真实数据渲染——express模拟后端接口数据 & fetch-更新部分内容 & data数据-json格式-Network/Response中查询

实例

第一步：在APP.js同层级的component下新建test-echarts.js

第二步：在App.js中进行导入

import React from "react";
import './App.css';
import BaseRouter from './component/test-echarts.js'

function App() {
  return (
    <div>
      hello world
      <BaseRouter/>
    </div>
  );
}
export default App;

test-echarts.js文件如下：

/*
  测试echarts效果
*/
import React from 'react'

class TestChart extends React.Component {
  render () {
    return (
      <div>
        <div>测试图表echarts</div>
        {/*图表显示位置*/}
        {/* <div id="main" style={styles}></div> */}
      </div>
    )
  }
} 

export default TestChart

npm run start，打开界面

在 webpack 打包环境中使用 echarts

通过 npm 安装 ECharts

npm install echarts --save

echarts官网：https://echarts.apache.org/zh/index.html

在打包环境中使用 ECharts

test-echarts.js文件增加如下：

import * as echarts from 'echarts';
console.log(echarts)

查看打印echarts对象

图表显示

test-echarts.js文件增加如下：

/*
  测试echarts效果
*/
import React from 'react'
import * as echarts from 'echarts';
// console.log(echarts)

class TestChart extends React.Component {
  componentDidMount () {
     // 初始化图表效果
    let mychart = echarts.init(document.getElementById('main'))
    let option ={
      xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
      }]
  }

  // 必须调用setOption设置图表的配置
        mychart.setOption(option)
  }
  render () {
    let styles = {
      height: '300px',
      width: '300px'
    }
    return (
      <div>
        <div>测试图表echarts</div>
        {/*图表显示位置*/}
        <div id="main" style={styles}></div>
      </div>
    )
  }
} 

export default TestChart

npm run start，打开界面

参考实例-折线图

模拟接口数据

01-文件目录

02-配置端口文件

index.js

const express = require('express');
const path = require('path');
const router = require('./router.js');
const bodyParser = require('body-parser');
const app = express();

// 处理请求参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 设置允许跨域访问该服务, cors
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, mytoken');
  next();
});

// 启动静态资源服务
app.use(express.static('public'));

// app.post('hello', (req,res) => {
//   let p = req.body;
//   res.end('hello');
// })

// 配置路由
app.use(router);
// 监听端口
app.listen(3001, ()=>{
    console.log('running...');
});

03-包文件

package.json

{
  "name": "mydata",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.4"
  }
}

04-测试接口文件

router.js

/*
  路由模块
*/
const express = require('express');
const router = express.Router();
const data = require('./data.json');



// 测试接口
router.get('/data', (req, res) => {
  let data = {
    time: ['Mon', 'Tue','测试', 'Wed', 'Thu', 'Fri', 'Sat', 'Suun'],
    data: [820, 90, 520,901, 934, 1290, 1330, 130]
  }
  res.json(data)
})

module.exports = router;

验证显示

05-其他文件为空

06-界面文件

test-echarts.js文件如下：

/*
  测试echarts效果
*/
import React from 'react'
import * as echarts from 'echarts';
// console.log(echarts)

class TestChart extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      chartData: {}
    }
  }
  componentDidMount () {
  //   // 调用后台接口获取图表数据
    fetch('http://localhost:3001/data')
      .then(res => {
        return res.json()
      })
      .then(res => {
        // this.setState({
        //   chartData: res
        // })
        // 初始化图表效果
    let mychart = echarts.init(document.getElementById('main'))
  //   let option ={
  //     xAxis: {
  //         type: 'category',
  //         boundaryGap: false,
  //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  //     },
  //     yAxis: {
  //         type: 'value'
  //     },
  //     series: [{
  //         data: [820, 932, 901, 934, 1290, 1330, 1320],
  //         type: 'line',
  //         areaStyle: {}
  //     }]
  // }
        let { time, data } = res
        console.log(time)
        let option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: time
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'line',
                areaStyle: {}
            }]
        }
   // 必须调用setOption设置图表的配置
        mychart.setOption(option)
      })
    

  }
  render () {
    let styles = {
      height: '400px',
      width: '400px'
    }
    return (
      <div>
        <div>测试图表echarts</div>
        {/*图表显示位置*/}
        <div id="main" style={styles}></div>
      </div>
    )
  }
} 

export default TestChart

node index.js和npm run start后，打开界面验证接口数据

07-第二种写法

router.js

/*
  路由模块
*/
const express = require('express');
const router = express.Router();
const data = require('./data.json');



// 测试接口
router.get('/data', (req, res) => {
  // let data = {
  //   time: ['Mon', 'Tue','测试', 'Wed', 'Thu', 'Fri', 'Sat', 'Suun'],
  //   data: [820, 90, 520,901, 934, 1290, 1330, 130]
  // }
  res.json(data)
})

module.exports = router;

data.json

{
 "time":["Mon","Tue","测试1","测试2","Thu","Fri","Sat","Suun"],
 "data":[820,90,520,901,934,1290,1330,130]
}

node index.js和npm run start后，打开界面验证接口数据