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.data
let 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>
![[云原生] k8s配置资源管理](https://img-blog.csdnimg.cn/direct/871295aa5f0c436ab8a69167e827b1e8.png)
