Vue3 使用ECharts

bigegpt 2025-01-20 10:56 6 浏览

一、建立最新的Vue3工程

npm init vue@latest

二、安装ECharts

npm install echarts --save

三、在vue中引入echarts

* 本文为了更清晰的展示代码，已将vue工程中多余的代码清除。

1.使用provide方法，在App.vue中引入全局echarts

代码如下：

<template>
  <RouterView/>
</template>

<script setup lang="ts">
import {RouterView} from 'vue-router'

import * as echarts from 'echarts'
import {provide} from "vue";

provide('ec', echarts)
</script>

2.创建chart1页面，引用echarts，使用echarts官方代码建立柱状图

<template>
  <div id="myEcharts" style="width: 900px;height: 800px"></div>
</template>

<script setup>
import {inject, onMounted} from "vue";

let echarts = inject("ec");

onMounted(() => {
  //建立echarts对象，指定显示区域
  let chart = echarts.init(document.getElementById("myEcharts"))
  // 指定图表的配置项和数据
  let option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  chart.setOption(option);
});
</script>

3.成果

*provide / inject 是vue中提供的一种父组件为子组件传值的方法

echarts自定义tooltip

上一篇：最强echarts封装(优化依赖自动渲染清除大小自适应，主题切换)
下一篇：分享7个常用的echarts示例

Vue3 使用ECharts

一、建立最新的Vue3工程

二、安装ECharts

三、在vue中引入echarts

1.使用provide方法，在App.vue中引入全局echarts

2.创建chart1页面，引用echarts，使用echarts官方代码建立柱状图

3.成果

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

7 个对 Java 意义重大的性能指标，你知道几个?

Laravel框架使用图片处理简单教程

PHP 远程调试最佳实践