cesium 插入图表展示

设置 Cesium 和图表库

npm install chart.js //安装chart.js

创建 Cesium 组件

<template>
  <div>
    <div id="cesiumContainer" style="width: 100%; height: 70vh;"></div>
    <canvas id="myChart" style="width: 100%; height: 30vh;"></canvas>
  </div>
</template>

<script>
import { Viewer } from 'cesium';
import Chart from 'chart.js';

export default {
  name: 'CesiumMapWithChart',
  mounted() {
    // 初始化 Cesium Viewer
    this.viewer = new Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),
      imageryProvider: Cesium.IonImageryProvider,
      accessToken: 'token' // 替换token
    });

    // 创建图表
    this.createChart();
  },
  beforeDestroy() {
    // 清理 Cesium Viewer
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
  methods: {
    createChart() {
      const ctx = document.getElementById('myChart').getContext('2d');
      const myChart = new Chart(ctx, {
        type: 'bar', // 图表类型
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  }
};
</script>

<style>
#cesiumContainer {
  position: relative;
}
</style>