Vue3+Echarts5.x

引入 ECharts

import * as echarts from 'echarts';

规定Type类型

type EChartsOption = echarts.EChartsOption;
const barChart = ref<any>(null);//实例化Dom对象
let barChartSeries: any;

初始化图表

// 图表初始化
onMounted(() => {
  if (barChart.value) {
    nextTick(() => {
      barChartSeries = echarts.init(barChart.value, '', {
        devicePixelRatio: 3,
      });
      barChartSeries.setOption(option.value);
    });
  }
});

柱状图案例

上一个柱状图简单案例,一目了然。
在这里插入图片描述

<template>
  <div ref="barChart" class="barChart"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;
const barChart = ref<any>(null);
let barChartSeries: any;
const option = ref<EChartsOption>({
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],

    axisLine: {
      lineStyle: {
        color: '#D1DFFD',
      },
    },
    // 坐标轴文字颜色
    axisLabel: {
      color: '#44494F',
      fontSize: 14,
      margin: 20,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',

    axisLabel: {
      margin: 20,
      // align: 'left',
      color: '#44494F',
      fontSize: 14,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#F8F8FC',
        width: 2,
      },
    },
  },
  series: [
    {
      barWidth: 32,
      itemStyle: {
        color: '#60A1FF',
        borderWidth: 4.5,
        borderRadius: [4, 4, 0, 0],
      },
      data: [
        120,
        {
          value: 200,
          itemStyle: {
            color: '#FFAA00',
          },
        },
        150,
        80,
        70,
        110,
        130,
      ],
      type: 'bar',
    },
  ],
});
// 图表初始化
onMounted(() => {
  if (barChart.value) {
    nextTick(() => {
      barChartSeries = echarts.init(barChart.value, '', {
        devicePixelRatio: 3,
      });
      barChartSeries.setOption(option.value);
    });
  }
});
window.onresize = () => {
  barChartSeries.resize();
};
</script>

<style scoped lang="less">
.barChart {
  width: 100%;
  height: 85%;
}
</style>

### Vue3 中集成和使用 Three.jsECharts 的方法 在 Vue3 项目中集成和使用 Three.jsECharts 是一种常见的需求,尤其是在开发需要复杂图形渲染和数据可视化的应用程序时。以下是实现这一目标的具体方式: #### 一、Vue3 项目初始化 首先,创建一个新的 Vue3 项目并安装必要的依赖项。可以通过 `vue-cli` 或者 Vite 来快速搭建环境。 ```bash npm init vite@latest my-vue-app --template vue cd my-vue-app npm install three echarts axios element-plus mockjs ``` 上述命令会安装以下核心库: - **three**: 提供 WebGL 渲染功能[^1]。 - **echarts**: 数据可视化工具。 - **axios**: HTTP 请求处理。 - **element-plus**: UI 组件库(适用于 Vue3)[^2]。 - **mockjs**: 后端接口模拟。 #### 二、Three.js 集成到 Vue3 为了将 Three.js 整合到 Vue3 应用程序中,可以按照如下方式进行操作: ##### 创建一个封装好的 Three.js 组件 通过编写一个独立的 Vue 组件来加载和控制 Three.js 场景。 ```javascript <template> <div ref="renderer"></div> </template> <script> import * as THREE from &#39;three&#39;; export default { name: "ThreeScene", mounted() { this.init(); this.animate(); }, methods: { init() { const scene = new THREE.Scene(); // 初始化场景 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 设置相机视角 const renderer = new THREE.WebGLRenderer({ antialias: true }); // 创建渲染器 renderer.setSize(window.innerWidth, window.innerHeight); this.$refs.renderer.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); // 定义几何体 const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); // 将材质应用于几何体 scene.add(cube); camera.position.z = 5; function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } this.animate = animate; // 动画函数绑定至实例上以便调用 } } }; </script> ``` 此代码片段展示了如何设置基本的 Three.js 场景,并将其嵌入到 Vue3 组件中。 #### 三、ECharts 集成到 Vue3 对于 ECharts,在 Vue3 中也可以轻松完成配置。推荐的方式是利用官方提供的 `echarts-for-vue` 插件或者直接引入原生 API 进行操作。 ##### 编写一个简单的折线图组件 下面是一个基于 ECharts 的图表组件示例: ```javascript <template> <div id="chart" style="width: 600px; height: 400px;"></div> </template> <script> import * as echarts from &#39;echarts&#39;; export default { data() { return { chartInstance: null }; }, mounted() { this.initChart(); }, beforeUnmount() { if (this.chartInstance) { this.chartInstance.dispose(); } }, methods: { initChart() { const chartDom = document.getElementById(&#39;chart&#39;); this.chartInstance = echarts.init(chartDom); const option = { title: { text: &#39;销售数据分析&#39; }, tooltip: {}, legend: { data: [&#39;销量&#39;] }, xAxis: { type: &#39;category&#39;, data: [&#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;, &#39;周日&#39;] }, yAxis: { type: &#39;value&#39; }, series: [{ name: &#39;销量&#39;, type: &#39;line&#39;, data: [120, 200, 150, 80, 70, 110, 130] }] }; this.chartInstance.setOption(option); } } }; </script> ``` 这段脚本实现了在一个 Vue3 页面中绘制一条表示每周销售额变化趋势的折线图。 #### 四、项目结构建议 合理的文件夹布局有助于维护大型项目的整洁度。这里给出一个可能适用的例子: ``` src/ ├── assets/ # 存放静态资源如图片、字体等 │ └── images/ ├── components/ # 自定义通用组件目录 │ ├── Charts.vue # 图表相关逻辑集中于此处 │ └── ThreeDModel.vue # 三维模型展示模块 ├── views/ # 主要视图页面集合 │ ├── DashboardView.vue │ └── AnalysisView.vue ├── plugins/ # 第三方插件初始化位置 │ ├── echarts.ts │ └── threejs.ts ├── store/ # Vuex 状态管理仓库 └── App.vue # 根组件入口 ``` 以上设计遵循单一职责原则,便于后续扩展与调试。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值