VUE2+Element-ui+封装Echarts图表

该文详细展示了如何在Vue2项目中结合Element-ui和Echarts封装图表组件,使用mock.js模拟数据。主要步骤包括组件结构设计、数据处理、Echarts图表配置以及mock数据的生成和使用。

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

VUE2+Element-ui+Echarts图表

封装Echarts图表,如下效果图

请添加图片描述

Home组件代码块,使用的mock.js模拟数据封装
<template>
  <div style="height: 400px">
    <ChartsPart id="demo" :chartData="echartData.order"></ChartsPart>
  </div>
</template>
 
<script>
//引入组件 略去
import ChartsPart from '@/components/EchartEasy.vue'
export default {
  components: {
    ChartsPart,
  },

  data() {
    return {
      echartData: {
        // 订单折线图数据
        order: {
          // X轴数据
          xData: [],
          yData: {
            type: 'value',
          },
          // series是x轴图表内,一个个的数据坐标轴
          series: [],
        },
        // 用户柱状图数据
        user: {
          xData: [],
          // series是x轴图表内,一个个的数据坐标轴
          series: [],
        },
        // 视频饼状图数据
        video: {
          // series是x轴图表内,一个个的数据坐标轴
          series: [],
        },
      },
    }
  },
  methods: {
    getTableData() {
      this.$http.get('/home/getOnData').then((res) => {
        // EChart图表数据
        res = res.data
        // console.log(res.data)
        // 订单折线图
        const order = res.data.orderData
        // console.log(order)
        // x轴数据
        this.echartData.order.xData = order.date
        // series图像渲染,x轴中的内置图表
        // 第一步取出series中name部分-键名
        // 通过 对象中的键值取出,需要数据的键名
        let keyArray = Object.keys(order.data[0])
        console.log(keyArray)
        // 循环遍历每一项数据
        keyArray.forEach((key) => {
          // 在data数据中定义的echartData.order.series中存放数据
          this.echartData.order.series.push({
            name: key === 'wechat' ? '小程序' : key,
            // key是一个变量,所以要[在这里装着],变量提升
            data: order.data.map((item) => item[key]),
            type: 'line', // 线性图
          })
        })
      })
    },
  },
  // 页面还没渲染完成,在这里调用接口比较好
  created() {
    // console.log(this.echartData.order)
    // console.log(this.ChartTestData)
    this.getTableData()
  },
}
</script>

Echarts图表组件

<template>
  <div style="height: 400px" ref="myEchart">echart</div>
</template>
 
<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartEasy',
  // 数据部分是由,父组件传入的
  props: {
    chartData: {
      // 数据肯定是一个对象
      type: Object,
      // 设置对象的默认值
      // 使用default函数,再return返回
      // 父组件修改内容,本身组件不受影响
      default() {
        return {
          // x轴的数据
          xData: [],
          yData: {
            type: 'value',
          },
          // y轴的值,是根据x轴中图表的数据进行动态增加或减少的
          // yAxis: {
          
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姜香小白鱼

如今生活困难,望支持一下,感谢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值