echart组件复用

最新推荐文章于 2024-04-09 18:37:07 发布

原创最新推荐文章于 2024-04-09 18:37:07 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#echart #复用 #图表

element-ui 同时被 2 个专栏收录

5 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

本文介绍如何创建一个名为lineEcharts的ECharts图表组件，以便在多个地方复用。首先，我们详细展示了如何在Vue.js应用中创建这个组件。接着，父组件通过导入子组件并传递必要的数据来调用它。组件的复用性和灵活性使得我们可以方便地从后台获取数据并动态构建图表。最后，文章提供了一个父组件的完整代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、创建echarts组件，用于复用
lineEcharts.vue

<template>
    <div :id="id" style="height: 100%"></div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: "lineEchart",
    data () {
      return {

      }
    },
    props: ['id','lineData'],
    mounted() {
      this.$nextTick(()=>{
        this.myChart = echarts.init(document.getElementById(this.id),'shine');
        this.initData()
      })
    },
    methods: {
      initPieCharts () {
        let vm = this;
        let o = vm.lineData;
        const option = {
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            name: '风速（m/s）',
            type: 'category',
            boundaryGap: false,
            data: [2.5,3.5,4.5,5.5,6.5,7.5,8.5,9.5,10.5,11.5,12.5,13.5,14.5,15.5,16.5,17.5,18.5,19.5,20.5,21.5,22.5,23.5,24.5],
          },
          yAxis: {
            name: '湍流强度',
            type: 'value',
          },
          series: o && o.map((v)=>{
            return Object.assign({
              smooth: true,
            },v)
          }) || []
        };
        this.myChart.setOption(option);
      },
      initData() {
        this.initPieCharts()
      },
    },
    watch: {
      lineData: function(){
        this.initData()
      }
    }
  }
</script>

<style scoped></style>

2、父组件中调用echarts组件
1）引入echarts子组件

import lineEchart from '@/components/echarts/lineEchart'
components: {lineEchart},

定义需要传入的数据

boxList: [
          {label: "M值湍流图", name: 'lineOnflow', data: {}},
          {label: "扇区管理后M值湍流", name: 'lineAftOnflow', data: {}},
          {label: "ETM极端湍流", name: 'lineETM', data: {}},
          {label: "扇区管理后ETM极端湍流", name: 'lineAfterETM', data: {}},
        ],

3）组件的复用

<el-row :gutter="100">
      <el-col :span="12">
        <h3 class="title">{{item.label}}</h3>
        <line-echart :ref="'echart'+index" :id="item.name" :lineData="item.data" class="chart-item" :lineData.sync="item.data || null"></line-echart>
      </el-col>
    </el-row>

4）从后台拿到数据，构建数据

analysisData () {
        Https.analysis().then((res) => {
          if(res.data) {
            vm.$set(vm.boxList, 0, Object.assign(vm.boxList[0], {data: res.data.mturbLine}))
            vm.$set(vm.boxList, 1, Object.assign(vm.boxList[1], {data: res.data.mmanageTurbLine}))
            vm.$set(vm.boxList, 2, Object.assign(vm.boxList[2], {data: res.data.etmTurbLine}))
            vm.$set(vm.boxList, 3, Object.assign(vm.boxList[3], {data: res.data.etmManageTurbLine}))
            vm.refreshEcharts();
          }
        }).catch((err => {
          console.log(err)
        }))
      },
       refreshEcharts () {
        for (let i in this.boxList) {
          if(this.$refs['echart' + i]){
            this.$refs['echart' + i][0].initData();
          }
        }
      },

效果图：
在这里插入图片描述
父组件完整代码：

<template>
  <div class="home">
    <el-row :gutter="100">
      <el-col :span="12">
        <h3 class="title">{{item.label}}</h3>
        <line-echart :ref="'echart'+index" :id="item.name" :lineData="item.data" class="chart-item" :lineData.sync="item.data || null"></line-echart>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import lineEchart from '@/components/echarts/lineEchart'

  let Https = new https()
  export default {
    data() {
      return {
        boxList: [
          {label: "M值湍流图", name: 'lineOnflow', data: {}},
          {label: "扇区管理后M值湍流", name: 'lineAftOnflow', data: {}},
          {label: "ETM极端湍流", name: 'lineETM', data: {}},
          {label: "扇区管理后ETM极端湍流", name: 'lineAfterETM', data: {}},
        ],
      }
    },
    components: {lineEchart},
    mounted () {
      this.analysisData();
    },
    methods: {
      analysisData () {
        Https.analysis().then((res) => {
          if(res.data) {
            vm.$set(vm.boxList, 0, Object.assign(vm.boxList[0], {data: res.data.mturbLine}))
            vm.$set(vm.boxList, 1, Object.assign(vm.boxList[1], {data: res.data.mmanageTurbLine}))
            vm.$set(vm.boxList, 2, Object.assign(vm.boxList[2], {data: res.data.etmTurbLine}))
            vm.$set(vm.boxList, 3, Object.assign(vm.boxList[3], {data: res.data.etmManageTurbLine}))
            vm.refreshEcharts();
          }
        }).catch((err => {
          console.log(err)
        }))
      },
      refreshEcharts () {
        for (let i in this.boxList) {
          if(this.$refs['echart' + i]){
            this.$refs['echart' + i][0].initData();
          }
        }
      },
    }
  }
</script>