echarts 3D折线图应用

废话不多说，先上效果图
公司最近做一个振动项目，需要展示振动曲线，考虑其直观性，决定用3D折线图来做。
首先你要引入echarts的相关js，下图为我引入的例子，其中GL那个js是echarts控制3D的，你可根据自己需要去echarts官方网站上下载这俩js

<script src="${ctxStatic}/plugin/echarts4/echarts.min.js"></script>
<script src="${ctxStatic}/plugin/echarts4/echarts-gl.js"></script>

前台页面自己定义个div

<div id="lsqx" style="display:none;height:600px;right:10px;left:221px;border: 1px;bottom: 20px;z-index:999;position: absolute"></div>

下边的是绘制曲线的方法，曲线数据你们自己造就行了

function historyLine(xzdsj,fft,fft1st,fft1stX,fft1stY,fft2nd,fft2ndX,fft2ndY,fft3rd,fft3rdX,fft3rdY,fft4th,fft4thX,fft4thY,fft5th,fft5thX,fft5thY,selected){// closeLine();$("#lsqx").show();var x1 = xzdsj;x1 = x1.split(",");var fft1 = fft;fft1 = fft1.split(",");var fft1st = fft1st;fft1st = fft1st.split(",");var fft2nd = fft2nd;fft2nd = fft2nd.split(",");var fft3rd = fft3rd;fft3rd = fft3rd.split(",");var fft4th = fft4th;fft4th = fft4th.split(",");var fft5th = fft5th;fft5th = fft5th.split(",");// console.log(xzdsj);// console.log(x);var xzdsjArr= xzdsj;var arrayLength = xzdsjArr.toString().split(',');var xzdsjArrayLength= new Array();var xzdsjArrayLengthStr= new Array();var xzdsjArrayLengthStr0= new Array();var step=0.32/(arrayLength.length)for(var i=0;i<arrayLength.length;i++){xzdsjArrayLength[i]=keepTwoDecimal(i*step);xzdsjArrayLengthStr+=keepTwoDecimal(i*step)+","xzdsjArrayLengthStr0+="0"+","}xzdsjArrayLengthStr = xzdsjArrayLengthStr.substring(0, xzdsjArrayLengthStr.lastIndexOf(','));xzdsjArrayLengthStr0 = xzdsjArrayLengthStr0.substring(0, xzdsjArrayLengthStr0.lastIndexOf(','));xzdsjArrayLengthStr=xzdsjArrayLengthStr.split(",")xzdsjArrayLengthStr0=xzdsjArrayLengthStr0.split(",")// console.log(xzdsjArrayLengthStr);data = [x1,  //速度曲线fft1st,  //fftfft2nd,fft3rd,fft4th,fft5th,]dataX = xzdsjArrayLengthStr;dataX0 = xzdsjArrayLengthStr0;dataY = ['速度曲线','频率曲线('+ fft1stX +'Hz)','频率曲线('+ fft2ndX +'Hz)','频率曲线('+ fft3rdX +'Hz)','频率曲线('+ fft4thX +'Hz)','频率曲线('+ fft5thX +'Hz)'];//vdata里面存放的是处理之后的数据var vdata = [];var FFTdata = [];for(i=0;i<dataY.length;i++){vdata[i] = [];   //vdata里面存放的是二维数组}for(i=0;i<dataY.length;i++){FFTdata[i] = [];   //vdata里面存放的是二维数组}
//将处理完之后的数据存放到 vdata 里面for(var t=0;t<dataY.length;t++){var y = dataY[t];for(var k=0;k<data[0].length;k++){for(var p=0;p<dataX.length;p++){var x = dataX[p];var z = data[t][p];vdata[t].push([x,y,z]);FFTdata[t].push([y,x,z]);}break;}}var myChart = echarts.init(document.getElementById('lsqx'),'macarons');myChart.clear();var lsqx = document.getElementById('lsqx');// lsqx.style.display = "block";var option;// console.log(xzdsj);option = {title: {text: selected// ,// subtext:selected,},xAxis3D: {type: 'category',name: '',data: dataX,axisLabel:{show: false,interval: 0  //使x轴都显示},splitLine:{show:false}},yAxis3D: {type: 'category',name: '',data: dataY,axisLabel:{show: true,interval: 0   //使y轴都显示}},zAxis3D: {type: 'value',name: ''},//图例legend: {orient: 'vertical',right: 10,top: 230,icon: 'roundRect',textStyle:{color: '#fff'}},tooltip:{show:true},grid3D: {boxWidth: 900,boxHeight:300,boxDepth: 200,axisLine: {show: true,interval: 0,lineStyle: {color: '#fff'}},viewControl: {distance: 500,minDistance: 40,maxDistance: 800,},splitArea:{show:true},light:{color: '#fff',shadow: true}},toolbox: {feature: {dataView: {show: true, readOnly: false},restore: {show: true},saveAsImage: {show: true},// dataZoom: {  show: true  },myTool1: {show: true,title: '关闭',icon: 'path://M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575',onclick: function (){$("#lsqx").hide();$("#datetime1").hide();$("#timeList").hide();}}}},series: [{type: 'scatter3D',name: '速度曲线',symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},bevelSmoothness:4,data:vdata[0]   //每个区的数据一一对应},{type: 'scatter3D',name: '频率曲线('+ fft1stX +'Hz)',symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:vdata[1]},{type: 'scatter3D',name: '频率曲线('+ fft2ndX +'Hz)',symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:vdata[2]},{type: 'scatter3D',name: '频率曲线('+ fft3rdX +'Hz)',symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:vdata[3]},{type: 'scatter3D',name: '频率曲线('+ fft4thX +'Hz)',symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:vdata[4]},{type: 'scatter3D',name: '频率曲线('+ fft5thX +'Hz)',symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:vdata[5]},{type: 'line3D', //当type为line3D时有label没有作用，官网没有label这个配置项name: '速度曲线',lineStyle: {width: 4},symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:vdata[0]    //每个区的数据一一对应},{type: 'line3D',name: '频率曲线('+ fft1stX +'Hz)',lineStyle: {width: 3     //线的宽度},symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:vdata[1]},{type: 'line3D',name: '频率曲线('+ fft2ndX +'Hz)',lineStyle: {width: 3},symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:vdata[2]},{type: 'line3D',name: '频率曲线('+ fft3rdX +'Hz)',lineStyle: {width: 3},symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:vdata[3]},{type: 'line3D',name: '频率曲线('+ fft4thX +'Hz)',lineStyle: {width: 3},symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:vdata[4]},{type: 'line3D',name: '频率曲线('+ fft5thX +'Hz)',lineStyle: {width: 3},symbol: 'none',  //取消折点圆圈smooth: true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:vdata[5]}]};// option.legend.selected[selected] = true;myChart.setOption(option);
}

echarts 3D折线图应用相关推荐

echarts 3d折线图鼠标/坐标轴指示线修改颜色
echarts提供了一个统一的坐标指示器的修改配置项,所以一般情况下tooltip设置axisPointer信息即可 tooltip: {show: true,axisPointer: { //坐标指 ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
echarts画折线图和数据excel导出
最近一直使用echarts画折线图,在此做个记录最后样式代码 <!DOCTYPE html> <html style="height: 100%">&l ...
java绘制三维曲线_使用JFreeChart绘制2D和3D折线图 | 学步园
这是一个Web Project 首先是web.xml xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schem ...
JFreeChart在Struts2中实现3D折线图统计
在Struts2中,用JFreeChart实现3D折线图统计前段时间学习了一下JFreeChart,现在来整理一下自己所作的实例. 下面分别用两种方式来实现: 一种是以java应用程序的方式,一种是 ...
使用JFreeChart绘制2D和3D折线图
完整版见https://jadyer.github.io/ 这是一个Web Project 首先是web.xml <?xml version="1.0" encoding=& ...
Python数据可视化 Pyecharts 制作 Line3D 3D折线图
Python3 的 Pyecharts 制作 Line3D(3D折线图) 时需要使用的设置参数和常用模板案例,可根据实际情况对案例中的内容进行调整即可. 文章目录 Demo 举例弹簧3D折线图 Li ...

echarts 3D折线图应用

echarts 3D折线图应用相关推荐

最新文章

热门文章