Vue封装Echarts组件

图表可以参考Echatrs 数据是使用Mock随机生成的 参考Mock

安装

npm install echarts --save

封装组件

封装一个Echarts组件 让这个组件可以使用任何图表
Color这个属性可以不需要

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

<script>
import * as echarts from 'echarts';
export default {
  name: "Echart",
  props: {
    //接收组件 返回方法 因为需要重复使用
    chartData: {
      type: Object,
      default() {
        return {
          xData: [],
          series: []
        }
      }
    },
    //有没有xy坐标 父传子 传boolean来判断是否有坐标轴
    isAxisChart: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    //判断用那个需要坐标的
    options() {
      console.log(this.isAxisChart);
      return this.isAxisChart ? this.axisOption : this.normalOption
    }
  },
  watch: {
    //监听对象的变化 变化后初始化图表
    chartData:{
      handler: function () {
        console.log(this.chartData);
        this.initchart();
      },
      deep:true
    }
  },
  data() {
    return {
      echart: null,
      //有坐标
      axisOption: {
        //图例
        legend: {
          textStyle: {
            color: '#333'
          }
        },
        //鼠标悬停显示内容
        tooltip: {
          trigger: 'axis'
        },
        //偏移
        grid: {
          left: '20%'
        },
        //x轴数据
        xAxis: {
          type: 'category',
          data: [],
          //图表竖轴文字颜色
          axisLine: {
            lineStyle: {
              color: '#17b3a3'
            }
          },
          //图表底部文字颜色
          axisLabel: {
            color: '#333'
          }
        },
        //y轴数据
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#17b3a3'
              }
            }
          }
        ],
        //颜色
        color: [
          '#2ec7c9',
          '#b6a2de',
          '#5ab1ef',
          '#ffb980',
          '#d87a80',
          '#8d98b3',
          '#e5cf0d',
          '#97b552',
          '#95706d',
          '#dc69aa',
          '#07a2a4',
          '#9a7fd1',
          '#588dd5',
          '#f5994e',
          '#c05050',
          '#59678c',
          '#c9ab00',
          '#7eb00a',
          '#6f5553',
          '#c14089'
        ],
        //渲染成什么图表
        series: []
      },
      //没有坐标的图表
      normalOption: {
        series: [],
        //颜色
        color: [
          '#2ec7c9',
          '#b6a2de',
          '#5ab1ef',
          '#ffb980',
          '#d87a80',
          '#8d98b3',
          '#e5cf0d',
          '#97b552',
          '#95706d',
          '#dc69aa',
          '#07a2a4',
          '#9a7fd1',
          '#588dd5',
          '#f5994e',
          '#c05050',
          '#59678c',
          '#c9ab00',
          '#7eb00a',
          '#6f5553',
          '#c14089'
        ],
        tooltip: {
          trigger: 'item'
        }
      }
    }
  },
  methods: {
    //初始化图表
    initchart() {
      //初始化的时候处理数据
      this.initchartdata();
      if (this.echart) {
        this.echart.setOption(this.options);
        //console.log(this.options);
      } else {
        //没有就初始化  this.$refs.echart获取dom
        this.echart = echarts.init(this.$refs.echart);
        this.echart.setOption(this.options);
      }
    },
    //根据图表类型去渲染图表
    initchartdata() {
      //是坐标轴图表
      console.log(this.isAxisChart);
      if (this.isAxisChart) {
        this.axisOption.xAxis.data = this.chartData.xData;
        this.axisOption.series = this.chartData.series;
        //console.log(this.axisOption.series);
        console.log(this.chartData);
      } else {//不是坐标图表 如扇形
        this.normalOption.series = this.chartData.series;
      }
    }
  }
}
</script>

<style scoped>

</style>

获取数据的Mock

import mock from "mockjs";


// 图表数据
let List = []
export default {
    getStatisticalData: () => {
        for (let i = 0; i < 7; i++) {
            List.push(
                mock.mock({
                    vue: mock.Random.float(100, 8000, 0, 2),
                    wechat: mock.Random.float(100, 8000, 0, 2),
                    ES6: mock.Random.float(100, 8000, 0, 2),
                    Redis: mock.Random.float(100, 8000, 0, 2),
                    React: mock.Random.float(100, 8000, 0, 2),
                    springboot: mock.Random.float(100, 8000, 0, 2)
                })
            )
        }
        return {
            code: 20000,
            data: {
                // 饼图
                videoData: [
                    {
                        name: 'springboot',
                        value: mock.Random.float(1000, 10000, 0, 2)
                    },
                    {
                        name: 'vue',
                        value: mock.Random.float(1000, 10000, 0, 2)
                    },
                    {
                        name: '小程序',
                        value: mock.Random.float(1000, 10000, 0, 2)
                    },
                    {
                        name: 'ES6',
                        value: mock.Random.float(1000, 10000, 0, 2)
                    },
                    {
                        name: 'Redis',
                        value: mock.Random.float(1000, 10000, 0, 2)
                    },
                    {
                        name: 'React',
                        value: mock.Random.float(1000, 10000, 0, 2)
                    }
                ],
                // 柱状图
                userData: [
                    {
                        date: '周一',
                        new: mock.Random.integer(1, 100),
                        active: mock.Random.integer(100, 1000)
                    },
                    {
                        date: '周二',
                        new: mock.Random.integer(1, 100),
                        active: mock.Random.integer(100, 1000)
                    },
                    {
                        date: '周三',
                        new: mock.Random.integer(1, 100),
                        active: mock.Random.integer(100, 1000)
                    },
                    {
                        date: '周四',
                        new: mock.Random.integer(1, 100),
                        active: mock.Random.integer(100, 1000)
                    },
                    {
                        date: '周五',
                        new: mock.Random.integer(1, 100),
                        active: mock.Random.integer(100, 1000)
                    },
                    {
                        date: '周六',
                        new: mock.Random.integer(1, 100),
                        active: mock.Random.integer(100, 1000)
                    },
                    {
                        date: '周日',
                        new: mock.Random.integer(1, 100),
                        active: mock.Random.integer(100, 1000)
                    }
                ],
                // 折线图
                orderData: {
                    date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
                    data: List
                },
                tableData: [
                    {
                        name: 'ES6',
                        todayBuy: mock.Random.float(100, 1000, 0, 2),
                        monthBuy: mock.Random.float(3000, 5000, 0, 2),
                        totalBuy: mock.Random.float(40000, 1000000, 0, 2)
                    },
                    {
                        name: '小程序',
                        todayBuy: mock.Random.float(100, 1000, 0, 2),
                        monthBuy: mock.Random.float(3000, 5000, 0, 2),
                        totalBuy: mock.Random.float(40000, 1000000, 0, 2)
                    },
                    {
                        name: 'Vue',
                        todayBuy: mock.Random.float(100, 1000, 0, 2),
                        monthBuy: mock.Random.float(3000, 5000, 0, 2),
                        totalBuy: mock.Random.float(40000, 1000000, 0, 2)
                    },
                    {
                        name: 'springboot',
                        todayBuy: mock.Random.float(100, 1000, 0, 2),
                        monthBuy: mock.Random.float(3000, 5000, 0, 2),
                        totalBuy: mock.Random.float(40000, 1000000, 0, 2)
                    },
                    {
                        name: 'React',
                        todayBuy: mock.Random.float(100, 1000, 0, 2),
                        monthBuy: mock.Random.float(3000, 5000, 0, 2),
                        totalBuy: mock.Random.float(40000, 1000000, 0, 2)
                    },
                    {
                        name: 'Redis',
                        todayBuy: mock.Random.float(100, 1000, 0, 2),
                        monthBuy: mock.Random.float(3000, 5000, 0, 2),
                        totalBuy: mock.Random.float(40000, 1000000, 0, 2)
                    }
                ]
            }
        }
    }
}

拦截Mock

import mock from 'mockjs'
import homeapi from './home'

//设置200-2000毫秒延时
mock.setup({
    timeout: '200-2000'
})

//拦截请求 : 首页相关请求
//拦截的是 /home/getdata
mock.mock(/\/home\/getdata/,'get',homeapi.getStatisticalData)

使用

<el-card>
<echart style="height:230px" :chartData="echartData.order"></echart>
</el-card>
<div class="graph">
<el-card shadow="hover">
  <echart style="height:190px" :chartData="echartData.user"></echart>
</el-card>
<el-card shadow="hover">
  <!--:isAxisChart="false" 没有xy轴-->
  <echart style="height:190px" :chartData="echartData.video" :isAxisChart="false"></echart>
</el-card>
</div>

<script>
import Echart from "@/components/Echart";
export default {
  name: "HomeView",
  components:{
    Echart
  },
  data(){
    return{
      //图表数据
      echartData: {
        order: {
          xData: [],
          series: []
        },
        user: {
          xData: [],
          series: []
        },
        video: {
          series: []
        }
      }
    }
  },
  methods:{
    //获取home数据
    gettabls(){
      this.$http.get('/home/getdata').then((res)=>{
        console.log(res.data);
        //表格数据
        this.tableData=res.data.tableData;
        //订单折线图
        const orderdata=res.data.orderData;
        //获取折线X坐标值
        this.echartData.order.xData=orderdata.date;
        //取出键名 series.name;
        let keyorder=Object.keys(orderdata.data[0]);
        console.log(keyorder);
        keyorder.forEach(key=>{
          this.echartData.order.series.push({
            name:key === 'wechat' ? '小程序':key,
            data:orderdata.data.map(items=>items[key]),
            type:'line'
          })
        })

        // 用户柱状图
        this.echartData.user.xData = res.data.userData.map(item => item.date)
        this.echartData.user.series.push({
          name: '新增用户',
          data: res.data.userData.map(item => item.new),
          type: 'bar'
        })
        this.echartData.user.series.push({
          name: '活跃用户',
          data: res.data.userData.map(item => item.active),
          type: 'bar',
          barGap: 0
        })
        // 视频饼图
        this.echartData.video.series.push({
          data: res.data.videoData,
          type: 'pie'
        })
      })
    }
  },
  created() {
    this.gettabls();
  }
}
</script>

效果