vue怎么引用echarts

在 vue.js 项目中引用 echarts 的步骤包括：安装 echarts 并引入至项目中。在组件中使用 组件或普通 dom 元素来创建图表。为图表设置配置项，包括标题、数据等。

如何引用 ECharts 至 Vue.js 项目

第一步：安装 ECharts

npm install echarts --save

登录后复制

第二步：在 Vue.js 项目中引入 ECharts

import * as echarts from 'echarts'

登录后复制

第三步：在 Vue.js 组件中使用 ECharts

使用 组件

<template><e-charts :options="options"></e-charts></template><script>
import { ref } from '<a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/15721.html" target="_blank">vue'
import * as echarts from 'echarts'

export default {
  setup() {
    const options = ref({})

    // 设置图表配置项
    options.value = {
      title: {
        text: '示例图表'
      },
      series: [
        {
          type: 'bar',
          data: [5, 20, 36, 10, 10]
        }
      ]
    }

    return {
      options
    }
  }
}
</script>

登录后复制

使用普通 DOM 元素

<template><p id="myChart"></p>
</template><script>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

export default {
  setup() {
    const chartDom = ref(null)

    onMounted(() => {
      const myChart = echarts.init(chartDom.value)

      // 设置图表配置项
      const options = {}

      myChart.setOption(options)
    })

    return {
      chartDom
    }
  }
}
</script>

登录后复制

以上就是vue怎么引用echarts的详细内容，更多请关注叮当号网其它相关文章！