<template>
  <div ref="echart"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    isAxisChart: {
      type: Boolean,
      default: true,
    },
    chartData:{
        type:Object,
        default(){
            return {
            xData:[],
            series:[]
            }
        }
    }
  },
  watch: {
    chartData: {
      handler: function () {
        this.initChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.initChartData();
      if (this.echart) {
        this.echart.setOption(this.options);
      } else {
        // 吐了 字母写对，bug因为一个echart多写了个n 报错TypeError: Cannot read properties of null (reading 'setOption')
        this.echart = echarts.init(this.$refs.echart);
        this.echart.setOption(this.options);
      }
    },
    initChartData() {
      if (this.isAxisChart) {
        this.axisOption.xAxis.data = this.chartData.xData;
        this.axisOption.series = this.chartData.series;
      } else {
        this.normalOption.series = this.chartData.series;
      }
    },
  },
  data() {
    return {
      axisOption: {
        legend: {
          // 图例文字颜色
          textStyle: {
            color: "#333",
          },
        },
        grid: {
          left: "20%",
        },
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category", // 类目轴
          data: [],
          axisLine: {
            lineStyle: {
              color: "#17b3a3",
            },
          },
          axisLabel: {
            interval: 0,
            color: "#333",
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
          },
        ],
        color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
        series: [],
      },
      normalOption: {
        tooltip: {
          trigger: "item",
        },
        color: [
          "#0f78f4",
          "#dd536b",
          "#9462e5",
          "#a6a6a6",
          "#e1bb22",
          "#39c362",
          "#3ed1cf",
        ],
        series: [],
      },
      // 给个初始值null不然会报错
      echart: null,
      // chartData: {
      //   xData: ["20191001", "20191002", "20191003"],
      //   series: [
      //     {
      //       name: "苹果",
      //       data: [5920, 4738, 659],
      //       type: "line",
      //     },
      //     {
      //       name: "vivo",
      //       data: [6564, 7380, 3745],
      //       type: "line",
      //     },
      //   ],
      // },
    };
  },
  computed: {
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption;
    },
  },
};
</script>
父组件基本调用方法
<el-card style="height: 200px;width:300px">
  <!-- 柱状图 -->
  <!-- <div style="height:200px" ref="userEcharts"></div> -->
  <echart :chartData="echartData.user" style="height: 200px" isAxisChart="true" />
</el-card>

isAxisChart:是否显示图例

饼状图传入数据示例
{
    "series": [
        {
            "data": [
               
                {
                    "name": "魅族",
                    "value": 2200
                },
                {
                    "name": "三星",
                    "value": 4500
                }
            ],
            "type": "pie"
        }
    ]
}

柱状图数据

{
    "xData": [
        "周一",
        "周二",
       
    ],
    "series": [
        {
            "name": "新增用户",
            "data": [
                5,
                10,
                
            ],
            "type": "bar"
        },
        {
            "name": "活跃用户",
            "data": [
                200,
                500,
                
            ],
            "type": "bar"
        }
    ]
}

折线图数据：

{
    "xData": [
        "20191001",
        "20191002",
        "20191003",
       
    ],
    "series": [
        {
            "name": "苹果",
            "data": [
                5920,
                4738,
                659,
                
            ],
            "type": "line"
        },
        {
            "name": "vivo",
            "data": [
                6564,
                7380,
                3745,
                
            ],
            "type": "line"
        },
        
       
    ]
}