前端echarts组件问题合集（渲染、传参、高度...）

1、echarts环形图设置主标题text和副标题subtext在环形图中居中显示

可以通过设置主标题和副标题的textAlign来设置，title-----textAlign

methods: {
    initChart() {
      let self = this;
      // {height:'250px'} 设置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, //设置高度
            emphasis: {
              // hover 样式
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },

问题：设置标题居中时，必须要知道echarts高度才会成功，对于动态渲染的echarts，可以在init echarts时，设置高度；

this.chart = echarts.init(this.$refs.ringChart, { height: self.height });

 2、echarts动态传参

父组件：

<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"],
      },
    };
  },
};

 

子组件：

props接收数据并watch数据：

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,
    },
  },

3、echarts子组件触发点击事件，父组件刷新数据

子组件：

$emit,让父组件监听到自定义事件 ；

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

      that.chart.off("click"); //防止 触发多次 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)
    },
  }

4、自定义设置柱状图横坐标显示换行

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;
            },
          },
}

5、数据量过大，设置滑块显示

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)"
          },
],

echarts更多案例网址（来源网络）：

ECharts案例大全（最新版），含各种案例，实例。 - 掘金 (juejin.cn)

 Echarts - ChartLib (datains.cn)