ECharts 折线图 饼图 动态获取数据和样式修改

异步原因，使用v-if判断接口数据是否获得， Object.keys() 将对象的key合在一起返回一个数组。
<line-chart :reportList="reportList" v-if="Object.keys(reportList).length"></line-chart>

  created() {
    reportGet("reports/type/1")
      .then((res) => {
        let { meta, data } = res.data;
        if (meta.status == 200) {
          this.reportList = data;
        }else{
          this.$message.error(meta.msg);
        }
      })
      .catch((err) => {
        this.$message.error(err);
      });
  },

折线图 图表组件

<script>
import * as echarts from "echarts";
export default {
  name: "LineChart",
  props: {
    reportList: {
      type: Object,
      // 接口数据没有获得时的默认值
      default: () => {
        return {
          title: {
            text: "折线图",
          },
          tooltip: {},
          xAxis: {
            axisLabel: {
              /* 显示所有的x轴的数据 */
              interval: 0,
              /* 放不下的倾斜角度 */
              rotate: 0,
              /* 数据距离刻度线的距离 */
              margin: 10,
            },
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "line",
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      lineList: {},
    };
  },
  mounted() {
    var myChart = echarts.init(document.getElementById("line"));
    this.lineList = JSON.parse(JSON.stringify(this.reportList));
    this.lineList.title = { text: "折线图" };
    this.lineList.grid = {
      width: "80%",
      left: "15%",
      // top:'30%'
    };
    // this.lineList.grid={};
    // this.lineList.grid.width='80%'
    // this.lineList.grid.left='20%'

    // x轴文字样式
    this.lineList.xAxis[0].axisLabel = {
      interval: 0,
      rotate: 30,
      margin: 10,
    };

    this.lineList.legend.top='10%'

    // 把折线图区域删除
    this.lineList.series.forEach(r => {
      delete r.areaStyle;
      // 线条圆润
      r.smooth=true
     
    });
    // 绘制图表
    myChart.setOption(this.lineList);
    window.LineChart = myChart;
  },
};
</script>

饼图 图表组件

<script>
import * as echarts from "echarts";
export default {
  name: "PieChart",
  props:['reportList'],
  data() {
    return {
      pieList: {},
    };
  },
  mounted() {
    var myChart = echarts.init(document.getElementById("pie"));
    this.pieList = JSON.parse(JSON.stringify(this.reportList));
    // 只显示华东的饼图
    this.pieList.series.splice(1);
    // 标题
    this.pieList.title = { text: "华东数据" };
    // 触摸提示 提示框浮层内容格式器formatter
    // 饼图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
    this.pieList.tooltip = {formatter: '{a}<br />{b}: {c} ({d}%)'};
    // 图例位置
    this.pieList.legend.top = "10%";
    this.pieList.legend.left = "0";
    // 修改图表类型
    this.pieList.series[0].type = "pie";
    // 把图例除了华东都删除
    this.pieList.legend.data.splice(1);
    // 拿到时间和数值，整合数据格式，展示线对应的名字
    let nameList = this.pieList.xAxis[0].data;
    let valueList = this.pieList.series[0].data;
    let newArr = [];
    nameList.forEach((r, i) => {
      let obj = {
        name: r,
        value: valueList[i],
      };
      newArr.push(obj);
    });
    this.pieList.series[0].data = newArr;
    // 设置圆心、半径大小
    this.pieList.series[0].radius = ["10%", "50%"];
    // 设置饼图上下左右位置
    this.pieList.series[0].center = ["50%", "60%"];
    // 形状玫瑰
    this.pieList.series[0].roseType = "area";
    // 设置圆角
    this.pieList.series[0].itemStyle = {
      borderRadius: 5,
    };
    // 隐藏xy轴
    this.pieList.xAxis = {
      show: false,
    };
    this.pieList.yAxis = {
      show: false,
    };
    // 绘制图表
    myChart.setOption(this.pieList);
    window.PieChart = myChart;
  },
};
</script>