ECharts：一个基于 JavaScript 的开源可视化图表库。
目录
效果
一、介绍
1、官方文档：Apache ECharts
2、官方示例
二、准备工作
1、安装依赖包
2、示例版本
三、使用步骤
1、在单页面引入 ' echarts '
2、指定容器并设置容器宽高
3、数据处理（关键点）
1）数据格式为一维数组
2）x、y、z轴设置axisLabel的margin
3）监听“空白处”的事件 - 点击“空白处”的时候重置图表
四、完整示例
效果
一、介绍
1、官方文档：Apache ECharts
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html
2、官方示例
二、准备工作
1、安装依赖包
npm install echarts echarts-gl --save2、示例版本
"echarts": "^5.4.2",
"echarts-gl": "^2.0.9",注：3D图表需要安装 "echarts-gl"，切记
三、使用步骤
1、在单页面引入 ' echarts '
import * as echarts from "echarts";注：上面的代码会引入 ECharts 中所有的图表和组件，如果你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。详见官方文档：在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts
2、指定容器并设置容器宽高
<template><div id="main"></div>
</template><script>import * as echarts from "echarts";export default {name: "mutiYAxis",data() {return {};},methods: {initChart() {let data = this.datalet chartDom = document.getElementById("main");let myChart = echarts.init(chartDom);let option;...详见完整示例 },},};
</script><style scoped>#main {width: 1000px;height: 500px;}
</style>3、数据处理（关键点）
1）数据格式为一维数组
[[1.25,0,0],[0.6648083899854317,1.0353777219787,0.2244367291811391],[-0.48889458931439583,1.068254166584824,0.5702471407416707],[-1.0809033510776862,0.1540790360935266,1.1398102439909492],[-0.650032792305071,-0.7526218011559339,2.000488320197701],[0.2547247747068576,-0.8611009233593129,3.1740848966345796],[0.7849024914214132,-0.22841148463694622,4.633432549928953],[0.5771151343572326,0.5029258196352845,6.306644538830419],[-0.1091605463221669,0.7422602172849531,8.088364896663746],[-0.7052790532756156,0.3190087600728554,9.85625637256739],[-0.6991599213595703,-0.45330790513892094,11.490145900584054],[0.004065150973672331,-0.9185243034653587,12.890831379309573],[0.8578295942092691,-0.5454594645776986,13.995606548843941],[1.0090791801824923,0.4672249852307217,14.788074361226283],[0.16270461078510265,1.178730899762885,15.300713076801252],[-0.9405668342457869,0.80511900322781,15.609793498951996],[-1.1961396322597975,-0.3595981394199102,15.823442787056548],[-0.33596891645118115,-1.1738470535820111,16.064722830628625],[0.764879924501324,-0.8699084264271705,16.45237137611818],[1.0588477255161683,0.16051016617013988,17.08221987112051],[0.3968325245712395,0.8877782253688824,18.012196086186695],[-0.48103554848031876,0.734781092044553,19.253258565837005],[-0.8030631267668673,-0.007108438577899955,20.767681644172168],[-0.4042968487238494,-0.6420852869061568,22.474959415784156],[0.3190650369180267,-0.6811708936747477,24.264404705511872]
]2）x、y、z轴设置axisLabel的margin
xAxis3D: {axisLabel: {margin: 5}},yAxis3D: {axisLabel: {margin: 10}},zAxis3D: {axisLabel: {margin: 20}},注：如果不分别设置会出现重叠的情况，如下图所示
下图是设置了效果
3）监听“空白处”的事件 - 点击“空白处”的时候重置图表视角
事件与行为 - 概念篇 - 使用手册 - Apache ECharts
Documentation - Apache ECharts
myChart.getZr().on('click', event => {// 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。if (!event.target) {// 点击在了空白处，重置图表视角。option.grid3D.viewControl.alpha = 20;option.grid3D.viewControl.beta = 40;myChart.setOption(option);}})四、完整示例
<template><div class="line3D"><div id="main"></div></div>
</template><script>
import * as echarts from 'echarts';
import 'echarts-gl';
export default {name: "line3D",data() {return {};},mounted() {this.$nextTick(() => {this.initChart();});},methods: {initChart() {let chartDom = document.getElementById("main");let myChart = echarts.init(chartDom);let option;let data = [];for (let t = 0; t < 25; t += 1) {let x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);let y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);let z = t + 2.0 * Math.sin(75 * t);data.push([x, y, z]);}console.log(data);option = {tooltip: {trigger: 'item',},backgroundColor: '#fff',visualMap: {show: false,dimension: 2,min: 0,max: 30,inRange: {color: ['#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026']}},grid3D: {boxWidth: 200 // 控制立体空间的大小},viewControl: {distance: 150 // 调节视角与物体之间的距离},xAxis3D: {type: 'value',name: 'X',nameGap: 30,axisLabel: {margin: 5}},yAxis3D: {type: 'value',name: 'Y',nameGap: 30,axisLabel: {margin: 10}},zAxis3D: {type: 'value',name: 'Z',nameGap: 30,axisLabel: {margin: 20}},grid3D: {viewControl: {projection: 'orthographic'}},series: [{type: 'line3D',data: data,lineStyle: {width: 4}}],};option && myChart.setOption(option);myChart.getZr().on('click', event => {// 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。if (!event.target) {// 点击在了空白处，重置图表。option.grid3D.viewControl.alpha = 20;option.grid3D.viewControl.beta = 40;myChart.setOption(option);}})},},
};
</script><style lang="less" scoped>
#main {width: 1000px;height: 500px;
}
</style>
