VUE2+Element-ui+封装Echarts图表

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: {