在vue3中 引入echarts

安装:npm install echarts --save
方式一:直接在组件中引用

javascript 复制代码
<template>

  <div

    ref="myChart"

    id="myChart"

    :style="{ width: '800px', height: '400px' }"

  ></div>

</template>



<script>

import * as echarts from 'echarts';

export default {

  mounted() {

    const dom = this.$refs['myChart']; // 获取dom节点

    const myChart = echarts.init(dom); // 初始化echarts实例



    const option = {

      xAxis: {

        type: 'category',

        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

      },

      yAxis: {

        type: 'value'

      },

      series: [

        {

          data: [820, 932, 901, 934, 1290, 1330, 1320],

          type: 'line',

          smooth: true

        }

      ]

    };

    // 设置实例参数

    myChart.setOption(option);

  }

};

</script>

方式二:在main.js中挂载,如何再组件中使用

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
 
// 引入 echarts
import * as echarts from 'echarts'
const app = createApp(App)
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts
 
app.mount('#app')

选项式api语法:

javascript 复制代码
<template>
  <div
    ref="myChart"
    id="myChart"
    :style="{ width: '800px', height: '400px' }"
  ></div>
</template>
<script>
export default {
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      const dom = this.$refs['myChart'];
      const myChart = this.$echarts.init(dom); // 初始化echarts实例
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      };
      // 设置实例参数
      myChart.setOption(option);
    }
  }
};
</script>

组合式api语法

javascript 复制代码
<template>
  <div
    ref="myChart"
    id="myChart"
    :style="{ width: '800px', height: '400px' }"
  ></div>
</template>
 
<script>
import { getCurrentInstance, onMounted } from 'vue';
 
export default {
  setup() {
    // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
    let internalInstance = getCurrentInstance();
    let echarts = internalInstance.appContext.config.globalProperties.$echarts;
 
    onMounted(() => {
      const dom = document.getElementById('myChart');
      const myChart = echarts.init(dom); // 初始化echarts实例
      const option = {
        xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
      };
      // 设置实例参数
      myChart.setOption(option);
    });
    return {};
  }
};
</script>
相关推荐
gqkmiss4 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃10 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰14 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye20 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm22 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js