elizebeth/src/xt_pages/qcd/components/LineChart.vue

<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import { debounce } from "@/utils";

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "230px"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object
    },
    title: {
      type: String,
      default: "chart"
    },
    options: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      chart: null,
      chartOptions: {
        xAxis: [],
        legend: [],
        series: []
      }
    };
  },
  mounted() {
    this.initChart();
    if (this.autoResize) {
      this.__resizeHanlder = debounce(() => {
        if (this.chart) {
          this.chart.resize();
        }
      }, 100);
      window.addEventListener("resize", this.__resizeHanlder);
    }

    // 监听侧边栏的变化
    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
    sidebarElm.addEventListener("transitionend", this.__resizeHanlder);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    if (this.autoResize) {
      window.removeEventListener("resize", this.__resizeHanlder);
    }

    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
    sidebarElm.removeEventListener("transitionend", this.__resizeHanlder);

    this.chart.dispose();
    this.chart = null;
  },
  watch: {
    options: function() {
      this.chartOptions = this.options;
      this.initChart();
      this.__resizeHanlder = debounce(() => {
        if (this.chart) {
          this.chart.resize();
        }
      }, 100);
      window.addEventListener("resize", this.__resizeHanlder);
    },

    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  created() {
    this.chartOptions = this.options;
    console.log("this.chartOptions", this.chartOptions, this.options);
  },
  methods: {
    // setOptions({ expectedData, actualData } = {}) {
    //   this.chart.setOption({
    //     title: {
    //         text: this.title,
    //     },
    //     xAxis: {
    //       data: this.chartOptions.xAxis,
    //       boundaryGap: false,
    //       axisTick: {
    //         show: false
    //       }
    //     },
    //     grid: {
    //       left: 50,
    //       right: 50,
    //       bottom: 20,
    //       top: 30,
    //       containLabel: true
    //     },
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'cross'
    //       },
    //       padding: [5, 10]
    //     },
    //     yAxis: {
    //       axisTick: {
    //         show: false
    //       }
    //     },
    //     legend: {
    //       data: this.chartOptions.legend,
    //     },
    //     series: this.chartOptions.series,
    //   })
    // },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        // title: {
        //   text: this.title
        // },
        xAxis: {
          data: this.chartOptions.xAxis.data,
          // boundaryGap: false
          axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: "#E5E5E5" //x轴颜色
            }
          },
          axisLabel: {
            interval: 0,
            formatter: function(value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 8; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
            textStyle: {
              color:"#2F3133"
            }
          }
        },
        grid: {
          left: 0,
          right: 50,
          bottom: 10,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: "#E5E5E5" //y轴颜色
            },
          },
          axisLabel: {
            textStyle: {
              color:"#2F3133"
            }
          }
        },
        // dataZoom: [
        //   {
        //     //Y轴固定,让内容滚动
        //     type: "slider",
        //     show: false,
        //     xAxisIndex: [0],
        //     start: 1,
        //     end: 80, //设置X轴刻度之间的间隔(根据数据量来调整)
        //     zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
        //   },
        //   {
        //     type: "inside",
        //     xAxisIndex: [0],
        //     start: 1,
        //     end: 80,
        //     zoomLock: true //锁定区域禁止缩放
        //   }
        // ],
        legend: this.chartOptions.legend,
        series: this.chartOptions.series
      });
    },
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.chart.clear();
      this.setOptions(this.chartData);
    }
  }
};
</script>