Vue笔记：封装Echarts

Echart.vue组件的封装

data中是固定属性，props中定义动态参数，是父组件获取数据时传递到子组件的参数，xData为横坐标轴数据，series为Echarts的series数据，isAxisChart为是否带有坐标轴。

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

<script>
import echarts from 'echarts'
export default {
  props: {
    chartData: {
      type: Object,
      default() {
        return {
          xData: [],
          series: []
        }
      }
    },
    isAxisChart: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption
    },
    isCollapse() {
      return this.$store.state.tab.isCollapse
    }
  },
  watch: {
    chartData: {
      handler: function() {
        this.initChart()
      },
      deep: true
    },
    isCollapse() {
      setTimeout(() => {
        this.resizeChart()
      }, 300)
    }
  },
  data() {
    return {
      echart: null,
      axisOption: {
        legend: {
          textStyle: {
            color: '#333'
          }
        },
        grid: {
          left: '20%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#17b3a3'
            }
          },
          axisLabel: {
            color: '#333'
          }
        },
        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: {
        tooltip: {
          trigger: 'item'
        },
        color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf'],
        series: []
      }
    }
  },
  methods: {
    initChart() {
      this.initChartData()
      if (this.echart) {
        this.echart.setOption(this.options)
      } else {
        this.echart = echarts.init(this.$refs.echart)
        this.echart.setOption(this.options)
      }
    },
    initChartData() {
      if (this.isAxisChart) {
        this.axisOption.xAxis.data = this.chartData.xData
        this.axisOption.series = this.chartData.series
      } else {
        this.normalOption.series = this.chartData.series
      }
    },
    resizeChart() {
      this.echart ? this.echart.resize() : ''
    }
  },
  mounted() {
    window.addEventListener('resize', this.resizeChart)
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeChart)
  }
}
</script>

<style lang="scss" scoped></style>

简单饼状图

<template>
    <div>
        <echart :chartData="echartData.video" style="height: 260px" :isAxisChart="false"></echart>
    </div>
</template>

<script>
    import Echart from '../../components/Echart.vue';
    import axis from "axios";
    export default {
        components: {
            Echart
        },
        data() {
            return {
                msg: '我是一个头部组件',
                echartData: {
                    video: {
                        series: []
                    }
                }
            }
        },
        methods: {
            getTableData() {
                axis.get('/api/chartdata1/')//axis后面的.get可以省略；
                    .then((res) => {
                            res = res.data
                            // 视频饼图
                            this.echartData.video.series.push({
                                data: res.data.videoData,
                                type: 'pie'
                            })
                        })
                    .catch(
                        (error) => {
                            console.log(error);
                        });
            },
        },
        created() {
            this.getTableData()
        }
    }
</script>
<style lang="scss" scoped>

</style>

 flask接口构造数据：

# 获取图表数据
# http://127.0.0.1:8081/api/chartdata1/
@app.route('/api/chartdata1/')
def chartdata1():
    returnres = {"state": 200, "msg": "succsuful", "data": ""}
    reslist = [{'name':'springboot','value':1000},{'name':'vue','value':800}]
    resdict = {'videoData': reslist}
    returnres["data"] = resdict
    return jsonify(returnres)

 柱状图

<template>
    <div>
        <echart :chartData="echartData.user" style="height: 260px"></echart>
    </div>
</template>

<script>
    import Echart from '../../components/Echart.vue';
    import axis from "axios";
    export default {
        components: {
            Echart
        },
        data() {
            return {
                msg: '我是一个头部组件',
                echartData: {
                    user: {
                        xData: [],
                        series: []
                    },
                }
            }
        },
        methods: {
            getTableData() {
                axis.get('/api/chartdata2/')//axis后面的.get可以省略；
                    .then((res) => {
                            res = res.data
                            // 用户柱状图
                            // 坐标轴初始化
                            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
                            })
                        })
                    .catch(
                        (error) => {
                            console.log(error);
                        });
            },
        },
        created() {
            this.getTableData()
        }
    }
</script>
<style lang="scss" scoped>

</style>

flask构造接口数据：

# 获取图表数据
# http://127.0.0.1:80821/api/chartdata2/?xx=
@app.route('/api/chartdata2/')
def chartdata2():
    returnres = {"state": 200, "msg": "succsuful", "data": ""}
    reslist = [{'date': '周一', 'new': 100, 'active': 200}, {'date': '周二', 'new': 100, 'active': 200},
               {'date': '周三', 'new': 100, 'active': 200}, {'date': '周四', 'new': 100, 'active': 200},
               {'date': '周五', 'new': 100, 'active': 200}, {'date': '周六', 'new': 100, 'active': 200},
               {'date': '周日', 'new': 100, 'active': 200}]
    resdict = {'userData': reslist}
    returnres["data"] = resdict
    return jsonify(returnres)

折线图

<template>
    <div>
        <echart :chartData="echartData.order" style="height: 260px" ></echart>
    </div>
</template>

<script>
    import Echart from '../../components/Echart.vue';
    import axis from "axios";
    export default {
        components: {
            Echart
        },
        data() {
            return {
                msg: '我是一个头部组件',
                echartData: {
                    order: {
                        xData: [],
                        series: []
                    },
                }
            }
        },
        methods: {
            getTableData() {
                axis.get('/api/chartdata3/')//axis后面的.get可以省略；
                    .then((res) => {
                            res = res.data
                             // 订单折线图
                            const order = res.data.orderData
                            this.echartData.order.xData = order.date
                            // 第一步取出series中的name部分——键名
                            let keyArray = Object.keys(order.data[0])
                            // 第二步，循环添加数据
                            keyArray.forEach(key => {
                                this.echartData.order.series.push({
                                    name: key,
                                    data: order.data.map(item => item[key]),
                                    type: 'line'
                                })
                            })
                        })
                    .catch(
                        (error) => {
                            console.log(error);
                        });
            },
        },
        created() {
            this.getTableData()
        }
    }
</script>
<style lang="scss" scoped>

</style>

flask接口构造数据：

# 获取图表数据
# http://127.0.0.1:80821/api/chartdata3/?xx=
@app.route('/api/chartdata3/')
def chartdata3():
    returnres = {"state": 200, "msg": "succsuful", "data": ""}
    datalist = []
    reslist = {'date':['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],'data':''}
    for i in range(0,7):
      datalist.append(
          {
          'vue': random.randint(1, 500),
          'wechat': random.randint(1, 500),
          'ES6': random.randint(1, 500),
          'Redis': random.randint(1, 500),
          'React': random.randint(1, 500),
          'springboot': random.randint(1, 500)
        })
    reslist['data'] =datalist
    resdict = {'orderData': reslist}
    returnres["data"] = resdict

    return jsonify(returnres)