react中使用3D折线图跟3D曲面图

react项目通过echarts使用3D图

1.引入echarts跟echarts-gl

	"echarts": "^4.9.0","echarts-gl": "^1.1.1",

这是我用的版本，挺好使的，echarts版本过5后容易出问题这里不做解释

2.封装个组件专门接收echarts配置

//Myecharts.jsx
import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import 'echarts-gl'const Myecharts=(props)=> {useEffect(() => {var myChart = echarts.init(document.getElementById(props.id));console.log(props.option)if(props.option!=null){myChart.setOption(props.option)}else{console.log("err,无数据")}}, [props.option]) // 当props.option变化时，重新执行const stylestr = {width: '100%',height:'100%'}return (<div id={props.id} style={stylestr}></div>)
}export default Myecharts;

我这里react版本是16.8.6的这个注意下，高版本一些引入导出会有些不同

3.需要使用的地方直接引入组件然后传配置就行

import React, { useState, useEffect, useRef } from 'react'
import { Myecharts } from '../lib/index'
import * as echarts from 'echarts'
import 'echarts-gl'const Chart = () => {// var x = [1, 2, 3, 4]// var y = [6, 7, 8, 9]// var z = [11, 12, 13, 14]// const xyz = x.map((value, index) => [value, y[index], z[index]])var data = []var data3 = []// 3d折线数据for (var t = 0; t < 25; t += 0.001) {var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t)var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t)var z = t + 2.0 * Math.sin(75 * t)data.push([x, y, z])}for (var i = 0; i <= 10000; i++) {var x = i + 0.5var y = ivar z = i + 1.5data3.push([x, y, z])}// 3d曲面数据const apiData = {xAxis: [0, 0.1, 0.2, 0.3, 0.4, 0.5],yAxis: [0, 0.1, 0.2, 0.3, 0.4, 0.5],data: [[0.0, 0.31, 0.59, 0.81, 0.95, 1.0],[0.31, 0.59, 0.81, 0.95, 0.99, 0.95],[0.59, 0.81, 0.95, 0.99, 0.95, 0.81],[0.81, 0.95, 0.99, 0.95, 0.81, 0.59],[0.95, 0.99, 0.95, 0.81, 0.59, 0.31],[1.0, 0.95, 0.81, 0.59, 0.31, 0.0]]}const chartData = processGridData(apiData)function processGridData (apiData) {const { xAxis, yAxis, data } = apiDataconst result = []for (let i = 0; i < yAxis.length; i++) {for (let j = 0; j < xAxis.length; j++) {if (data[i][j] !== null && data[i][j] !== '-') {result.push([xAxis[j], yAxis[i], data[i][j]])}}}return result}let option = {tooltip: {},backgroundColor: '#fff',visualMap: {show: false,dimension: 2,min: 0,max: 30,inRange: {color: ['#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026']}},xAxis3D: {type: 'value'},yAxis3D: {type: 'value'},zAxis3D: {type: 'value'},grid3D: {viewControl: {projection: 'orthographic'}},series: [{type: 'line3D',data: data3,lineStyle: {width: 4}},// {//   name: '数据',//   type: 'line3D',//   data: data1,//   lineStyle: { color: '#ff0000' } // 红色线条// },// {//   name: '数据2',//   type: 'line3D',//   data: data2,//   lineStyle: { color: '#00ff00' } // 绿色线条// },// {//   name: '数据3',//   type: 'line3D',//   data: data3,//   lineStyle: { color: '#a50026' }// }]}// 曲面let option2 = {tooltip: {},backgroundColor: '#fff',visualMap: {//视觉映射show: false,dimension: 2,min: -1,max: 1,inRange: {color: ['#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026']}},xAxis3D: {type: 'value'},yAxis3D: {type: 'value'},zAxis3D: {type: 'value'},grid3D: {viewControl: {// projection: 'orthographic'}},series: [{name: '数据',type: 'surface',zlevel: -10,wireframe: {show: true,lineStyle: {color: 'rgba(0,0,0,0.3)',width: 0.8}},data: chartData// equation: {//   x: { step: 0.02 },//   y: { step: 0.02 },//   z: function (x, y) {//     if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) return '-'//     return Math.sin(x * Math.PI) * Math.sin(y * Math.PI)//   }// }},// {//   name: '数据2',//   zlevel: -10,//   type: 'surface',//   data: [[0, 20, 0.006], [1000, 20, 0.009], [1200, 20, 0.0095], [1500, 20, 0.010],//   [0, 40, 0.016], [1000, 40, 0.022], [1200, 40, 0.024], [1500, 40, 0.025],//   [0, 60, 0.006], [1000, 60, 0.012], [1200, 60, 0.014], [1500, 60, 0.015],//   [0, 80, 0.008], [1000, 80, 0.015], [1200, 80, 0.017], [1500, 80, 0.020],//   [0, 100, 0.015], [1000, 100, 0.022], [1200, 100, 0.026], [1500, 100, 0.032],],// },// {//   name: '数据3',//   zlevel: -10,//   type: 'surface',//   data: [[10, 20, 0.006], [100, 20, 0.009], [120, 20, 0.0095], [150, 20, 0.010],//   [10, 30, 0.016], [100, 40, 0.022], [120, 40, 0.024], [150, 40, 0.025],//   [10, 40, 0.006], [100, 60, 0.012], [120, 60, 0.014], [150, 60, 0.015],//   [10, 50, 0.008], [100, 80, 0.015], [120, 80, 0.017], [150, 80, 0.020],//   [10, 60, 0.015], [100, 100, 0.022], [120, 100, 0.026], [150, 100, 0.032],],// }]}const stystr = {width: '400px',height: '400px'}// useEffect(() => {//   var myChart = echarts.init(document.getElementById('main'))//   myChart.setOption(option)// })return (<div style={{ width: '100%', height: '450px', display: 'flex' }}><Myecharts id={'main'} style={stystr} option={option}></Myecharts><Myecharts id={'main1'} style={stystr} option={option2}></Myecharts>{/* <div style={stystr} id='main'></div> */}</div>)
}export default Chart

这里面有我测试两个3D的例子，重点是那两个例子需要的数据格式，我已经模拟出来了也处理了，这个可以看一下其它的直接照搬就行

封装不完善，自己需要可以把配置也封装进去