嗷嗚~

methods: {
    initChart() {
      let self = this;
      // {height:'250px'} 設(shè)置title 在center 必須要知道echarts 高度
      this.chart = echarts.init(this.$refs.ringChart, { height: self.height });
      this.chart.setOption({
        title: {
          text: self.ringTitle,
          subtext: self.ringTotal, //副標題
          left: "49%",
          top: "center",
          textStyle: {
            //主標題樣式
            color: "#666",
            fontWeight: "normal",
            fontSize: 12,
          },
          subtextStyle: {
            //副標題樣式
            color: "#000",
            fontSize: 14,
            fontWeight: "bold",
          },
          textAlign: "center", // 主、副標題水平居中顯示
        },
        tooltip: {
          trigger: "item",
        },
        color: ["#f5f5f5", "#fbd5d4"],
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["45%", "65%"],
            data: this.chartData,
            showEmptyCircle: true,
            // height: this.height, //設(shè)置高度
            emphasis: {
              // hover 樣式
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },

<lineBar
      :linexAxis="linexAxis"
      :lineSeries1="lineSeries1"
      :lineSeries2="lineSeries2"
    ></lineBar>

import lineBar from "../../dashbord/lineBar";
export default {
  components: { lineBar },
  data() {
    return {
      linexAxis: ["星期一", "星期二"],
      lineSeries1: {
        name: "星期一",
        data: ["10", "6", "19"],
      },
      lineSeries2: {
        name: "星期二",
        data: ["9", "20", "5"],
      },
    };
  },
};

mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
    linexAxis: {
      type: Array,
      required: () => [],
    },
    lineSeries1: {
      type: Object,
      required: () => {},
    },
    lineSeries2: {
      type: Object,
      required: () => {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },

watch: {
    linexAxis(newVal) {
      this.chart.setOption({
        xAxis: {
          data: newVal,
        },
      });
    },
    lineSeries1: {
      handler(newVal) {
        this.chart.setOption({
          series: [
            {
              name: newVal.name,
              data: newVal.data,
            },
          ],
        });
      },
      deep: true,
    },
    lineSeries2: {
      handler(newVal) {
        this.chart.setOption({
          series: [
            {},
            {
              name: newVal.name,
              data: newVal.data,
            },
          ],
        });
      },
      deep: true,
    },
  },

initChart() {
      let that = this;
      this.chart = echarts.init(this.$el, "macarons");

      that.chart.off("click"); //防止 觸發(fā)多次 echarts 點擊事件
      that.chart.on("click", function (params) {
        that.$emit("getMessage", params.dataIndex);
      });
      this.chart.setOption({
        ... ...
      });
    },

<lineBar
      :linexAxis="linexAxis"
      :lineSeries1="lineSeries1"
      :lineSeries2="lineSeries2"
      @getMessage="showMsg"
    ></lineBar>

methods:{
    showMsg(title) {
      console.log(title)
    },
  }

xAxis: {
  axisLabel: {
            color: "#666",
            align: 'center',
            formatter(params) {
              // 當字符串長度超過3時
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 3; //一行顯示幾個字
              var rowNumber = Math.ceil(paramsNameNumber / 
  provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, 
  paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
          },
}

dataZoom: [
          {
            type: 'slider',
            realtime: true,
            start: 0,
            end: 50,
            height: 14,
            bottom: 0,
            xAxisIndex: [0],
            fillerColor: "rgba(139, 139, 139,.2)"
          //  fillerColor: "rgba(171,145,255,.2)"
          },
],