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.5
var y = i
var z = i + 1.5
data3.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 } = apiData
const 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的例子，重点是那两个例子需要的数据格式，我已经模拟出来了也处理了，这个可以看一下其它的直接照搬就行
封装不完善，自己需要可以把配置也封装进去