v-charts组件化示例及动态传参

why_Because

已于 2022-07-13 11:06:06 修改

阅读量950

点赞数

分类专栏：备忘文章标签： echarts v-charts

于 2022-07-13 10:59:01 首次发布

本文链接：https://blog.csdn.net/qq_41287423/article/details/125758664

版权

本文通过一个具体的v-charts组件化示例，详细讲解如何将echarts图表封装为Vue组件，并实现动态传参，以便灵活配置图表样式和数据。适合于需要在Vue项目中复用和定制图表的开发者。

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

在这里插入图片描述

注意：echarts 安装5.0以下的版本，否则会报错，5.0以上的引入方式不同  "echarts": "^4.9.0","v-charts": "^1.19.0"
npm install echarts v-charts -S

//在main.js 中，按需加载v-charts组件
import VePie from 'v-charts/lib/pie.common';//饼图
import VeHistogram from 'v-charts/lib/histogram.common';//柱状图
import VeRing from 'v-charts/lib/ring.common';// 环形图
import VeLine from 'v-charts/lib/line';//折线图
Vue.component(VePie.name, VePie);
Vue.component(VeHistogram.name, VeHistogram);
Vue.component(VeRing.name, VeRing);
Vue.component(VeLine.name, VeLine);

//折线图组件，chartLine.vue ，柱状图只是将组件<ve-line>换成<ve-histogram>
<template>
  <ve-line
    ref="chartObj"
    :data="chartObj.chartData"
    :settings="chartObj.chartSettings"
    :title="{ text: chartConfig.title}"
    :loading="chartObj.chartDataLoading"
    :data-empty="chartObj.chartEmpty"
    :mark-point="chartObj.chartMarkPoint"
    :extend="chartObj.extend"
    :height="chartConfig.height"
  />
</template>

<script>
export default {
   
  props: {
   
    chartConfig: {
   
      type: Object,
      default: () => {
   
        return {
   };
      }
    }
  },
  data() {
   
    return {
   
      chartObj: {
   
        extend: {
   
          xAxis: {
   
            nameGap: 10
          },
          legend: {
   
            selectedMode: false
          },
          yAxis: {
   
            minInterval: 1,
            nameTextStyle: {
   
              align: 'left'
            }
          }
        },
        chartSettings: