VUE3引入Echarts两种方法

qq_44532387

已于 2022-11-10 11:16:50 修改

阅读量5.4k

点赞数 12

分类专栏： vue 文章标签： echarts javascript ecmascript

于 2022-04-29 16:07:06 首次发布

本文链接：https://blog.csdn.net/qq_44532387/article/details/124497170

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在Vue.js项目中安装和使用ECharts。首先通过npm安装Echarts，并全局引入到项目中。然后展示了两种在组件中使用ECharts的方法：一种是全局挂载，另一种是局部引用。最后，还提到了使用Vue的setup语法糖来初始化ECharts实例。每种方法都包含具体的代码示例，确保图表能够正确渲染。

摘要由CSDN通过智能技术生成

1、安装Echarts

npm install echarts --save

2、全局引入

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import * as echarts from 'echarts'

const app = createApp(App)

app.config.globalProperties.$echarts = echarts // 全局挂载echarts

app.use(store).use(router).mount('#app')

组件中使用

<template>
  <div>
    <div class="canvars" ref="myRef"></div>
  </div>
</template>

<script>
import { ref, onMounted, getCurrentInstance } from 'vue'
export default {
  setup() {
    const { proxy } = getCurrentInstance() // 获取全局配置项
    const myRef = ref(null) // 获取dom实例

    onMounted(() => {
      renderChart() // 生命周期挂载函数渲染图表
    })

    const renderChart = () => {
      const myChart = proxy.$echarts.init(myRef.value)

      myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
    }

    return {
      myRef
    }
  }
}
</script>

<style scoped>
.canvars {
  width: 200px;
  height: 200px;
}
</style>

3、局部引用

<template>
  <div>
    <h5>资产监控</h5>
    <div class="canvars" ref="myRef"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
export default {
  setup() {
    const myRef = ref(null) // 获取dom实例

    onMounted(() => {
      renderChart() // 生命周期挂载函数渲染图表
    })

    const renderChart = () => {
      const myChart = echarts.init(myRef.value)

      myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
    }

    return {
      myRef
    }
  }
}
</script>

<style scoped>
.canvars {
  width: 200px;
  height: 200px;
}
</style>

setup语法糖写法

<template>
  <div>
    <div id="canvas" ref="canvas"></div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, onUnmounted } from 'vue';

const { proxy } = getCurrentInstance()

const canvas = ref() // dom实例
let myChart = null // echarts实例

onMounted(() => {
  renderChart()
})

const renderChart = () => {
  myChart = proxy.$echarts.init(canvas.value)

  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
}
</script>

<style lang='less' scoped>
#canvas {
  width: 300px;
  height: 300px;
}
</style>