Vue项目中怎么引入Echars

全局引入

1. 首先要安装echars

npm install echarts --save

2. 引入并直接使用(容器一定要有宽高!)

<template>
  <div
    style="width: 600px; height: 300px; border: 1px solid red"
    ref="box"
  ></div>
</template>

<script>
// 也可以main.js中引入，然后挂载到vue原型对象上
import * as echarts from 'echarts' 

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.box)
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例',
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })
  },
}
</script>

按需引入(vue3)

1. 安装echars

npm install echarts --save

2. 创个文件夹,再创个js文件,名字随便起  我一般都这样起utils/echarts

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'

/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart } from 'echarts/charts'

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from 'echarts/components'

// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
])

// 导出
export default echarts

3. 再main.js文件中进行全局挂载,使用的时候,直接 this.$echarts 就可以了

import { createApp } from 'vue'
import App from './App.vue'
// 引入 echarts 核心模块
import echarts from './utils/echars'

const app = createApp(App)

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

app.mount('#app')

4. 可以进行使用了

<template>
  <div
    style="width: 600px; height: 300px; border: 1px solid red"
    ref="box"
  ></div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(this.$refs.box)
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例',
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })
  },
}
</script>

注意: 需要那个就导入那个,并且注册那个。都在创的内个js文件里操作