Vue ECharts line3D点击空白处重置图表视角- 附完整示例

ECharts：一个基于 JavaScript 的开源可视化图表库。

目录

效果

 一、介绍

 1、官方文档：Apache ECharts

2、官方示例

二、准备工作

1、安装依赖包

 2、示例版本 

三、使用步骤

1、在单页面引入 ' echarts '

2、指定容器并设置容器宽高

3、数据处理（关键点）

        1）数据格式为一维数组  

        2）x、y、z轴设置axisLabel的margin

        3）监听“空白处”的事件 - 点击“空白处”的时候重置图表视角

四、完整示例

 欢迎扫描下方二维码关注VX公众号

---

效果

 一、介绍

 1、官方文档：Apache ECharts

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

2、官方示例

​

二、准备工作

1、安装依赖包

npm install echarts echarts-gl --save

 2、示例版本 

"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>

 欢迎扫描下方二维码关注VX公众号