3D echarts 点位报表展示
一,准备工作
1)获取Echarts
以下为官网推荐的几种获取 ECharts方式:
从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码版本,包含了常见的错误提示和警告。
在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts”
cdn 引入,你可以在 cdnjs,npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。
我是采用的第一种方式,直接去官网下载的。下载页面为http://echarts.baidu.com/download.html
话不多说 直接上代码
var option = { tooltip: {}, backgroundColor: '#fff', visualMap: { show: true, dimension: 2, min: -10, max: 10, text:['高','低'], calculable : true, realtime: true, inRange: { color: ['#ffcd88','#fabd67','#eba84c','#dc9534','#cf831b','#c07102','#9c5a00'] } }, xAxis3D: { type: 'value', name:'X' }, yAxis3D: { type: 'value', name:'Y' }, zAxis3D: { type: 'value', name:'Z', minInterval: 1, min:0, max:10 }, grid3D: { boxWidth:200, boxDepth:150, viewControl: { //projection: 'orthographic', rotateSensitivity: [1,1], distance:250, minAlpha:0, alpha:30, beta:0 } }, series: [{ type: 'surface', wireframe: { // show: false }, name:'001', data:[{ name:'1,1', value:[0,0,5] },{ name:'1,2', value:[1,0,5] },{ name:'1,3', value:[2,0,5] },{ name:'2,1', value:[0,1,5] },{ name:'2,2', value:[1,1,5] },{ name:'2,3', value:[2,1,5] },{ name:'3,1', value:[0,2,5] },{ name:'3,2', value:[1,2,5] },{ name:'3,3', value:[2,2,5] }] }] };