Echarts折线图组件封装

封装的折线图组件

<template>
  <div :style="{height: height}" :id="barID"></div>
</template>

<script>
export default {
  name: "echartsHorLine",
  data(){
    return{
      barID: `barID-${~~(Math.random() * 100000)}`,
    }
  },
  props:{
    height: {
      type: String,
      default: '300px'
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    data: {
      handler(val){
        this.initEchartsHorBar(val)
      },
      deep:true,
    }
  },
  mounted() {
    this.charts = this.$echarts.init(document.getElementById(this.barID))
    this.initEchartsHorBar(this.data)
  },
  methods:{
    initEchartsHorBar(val){
      const {xData, series} = val;
      let option = {
        legend: {},
        tooltip: {},
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 6, // 刻度标签与轴线之间的距离
          },
        },
        yAxis: {
          type: 'value'
        },
        series: series
      };
      this.charts.clear(option)
      this.charts.setOption(option)
    },
  },
}
</script>

<style scoped>

</style>