vue中使用echarts

最新推荐文章于 2024-08-15 11:16:20 发布

M_Limeng

最新推荐文章于 2024-08-15 11:16:20 发布

阅读量398

点赞数

文章标签： echarts vue.js

本文链接：https://blog.csdn.net/M_Limeng/article/details/119084701

版权

本文详细介绍了如何在Vue应用中使用vue-echarts模块，包括安装步骤、组件创建、图表引入、配置选项以及实际使用的完整代码示例。重点讲解了如何通过composition-api管理和自定义图表组件。

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

vue中使用echarts

如果在vue里使用echarts可以使用vue-echarts，又因为echarts需要echarts模块，所以我们需要安装这两个模块

yarn add echarts vue-echarts

在vue2中使用该模块时，需要安装@vue/composition-api

yarn add @vue/composition-api

如何使用

1 创建对应的组件

在components中创建一个文件Chart.vue

2 生成基本的模板结构，引入v-chart组件

<template>
  <v-chart></v-chart>
</template>


<script>
import VChart from 'vue-echarts'

export default {
  components: {
    VChart
  }
}
<script>

引入图表所需的模块

按需引入，最终打包体积更小

在使用时必须用到use echarts中的
引入渲染方式echarts/renderers
引入需要的图表echarts/charts
引入需要的组件echarts/components

引入use

import {use} from 'echarts/core'

引入渲染方式

import {CanvasRenderer} from 'echarts/renderers'

引入需要的图表

import {BarChart, LineChart, PieChart} from 'echarts/charts'

引入所需要的组件

如果我们在使用的过程中，用到了没有引入的组件，则会有报错提示

import {TitleComponent,TooltipComponent,LegendComponent,GridComponent} from 'echarts/components'

将所有引入的内容 use

use([
  CanvasRenderer,
  BarChart, 
  LineChart, 
  PieChart
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
]);

配置需要的prop

option
autoresize
loading
等文档中需要的props

{
  props: {
    options: Object,
    autoresize: Boolean,
    loading: Boolean,
    ...
  }
}

给v-chart上添加对应的属性

<v-chart :option="option" :autoresize="autoresize" :loading="loading"></v-chart>

最终的组件代码

<template>
  <v-chart :option="option" :autoresize="autoresize" />
</template>

<script>
import { use } from "echarts/core"
import { CanvasRenderer } from "echarts/renderers"
import {TitleComponent,TooltipComponent,LegendComponent,GridComponent} from 'echarts/components'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from "echarts/components"
import VChart from "vue-echarts"

use([
  CanvasRenderer,
  BarChart, 
  LineChart, 
  PieChart
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  components: {
    VChart
  },
  props: {
    option: Object,
    autoresize: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style scoped>

</style>

使用方法

在需要显示图表的组件中，引入v-chart，配置相关的属性，并且定义高度（必须定义）

<template>
  <div>
    <v-chart style="height: 500px" :option="option"></v-chart>
  </div>
</template>

<script>
import VChart from '@/components/VChart'
export default {
  components: {
    VChart
  },


  data () {
    return {
      option: {
        ...echart配置
      }
    }
  }
}
</script>