自己封装可复用的echarts通用组件

分为两部分 

组件chatModule.vue

 

<template>
  <div ref="mybar" :style="{ width: width, height: height }"></div>
</template>
<script>
export default {
  props: {
    //图表数据
    data: {
      type: Object,
      default: () => {},
    },
    //图表宽
    width: {
      type: String,
      default: "100%",
    },
    //图表高
    height: {
      type: String,
      default: "350px",
    },

    //图表颜色
    colors: {
      type: Array,
      default: () => {
        return [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ];
      },
    },
  },
  data() {
    return {
      myChart: "",
    };
  },
  watch: {
    data: {
      // 监听图表变化重新渲染图表
      handler() {
        this.initChart(this.$refs.mybar, this.data);
      },
      deep: true,
    },
  },

  computed: {},
  created() {},
  mounted() {
    // 初始化渲染
    this.initChart(this.$refs.mybar, this.data);
  },
  methods: {
    initChart(dom, currentData) {
      //清空重新渲染
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose(); //销毁
      }
      this.myChart = this.$echarts.init(dom);
      let option = this.option(currentData);
      this.myChart.setOption(option);
    },
    option(currentData) {
      let seriesList = currentData.list.map((item) => {
        return {
          name: item.name || "",
          type: item.type || "line", //不传默认为折线图
          data: item.data,
        };
      });
      // 返回echarts配置参数
      return {

         grid: {

            left: '0',

            right: '0',

            top: '40',

            bottom: '0',

            containLabel: true

        },

        color: this.colors,  //自定义颜色
        legend: {},
        tooltip: {  //提示框浮层内容格式器
          trigger: "axis",
          formatter: '{b}<br />{a}:{c}'+currentData.list[0].unit,  //自定义格式
          axisPointer: {
            type: "shadow",

          },
        },
        itemStyle: {
          borderRadius: [5, 5, 0, 0],
        },
        xAxis: {
          type: "category",
          data: currentData.x,   //横坐标数据
          axisLine: {
            show: true,
            lineStyle: {
              color: "#00e3ff", //x轴线颜色
              width: 1,
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
          toolbox: {},
          axisLabel: {
            // interval: 2,
            // rotate:50,
            // show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(122,122,122,1)",
              fontSize: "14",
            },
          },
        },
        yAxis: {
          type: "value",
          name: currentData.list[0].unit, //单位
          axisLabel: {
            formatter: "{value}",  //显示格式
            show: true,
            textStyle: {
              color: "rgba(122,122,122,1)",
              fontSize: "12",
            },
          },
        },

        /*   yAxis: {
            type: "value",
            name: "", //单位
            axisLabel: {
              //formatter: '{value} %'
              show: true,
              textStyle: {
                color: "rgba(255,255,255,1)",
                fontSize: "12",
              },
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,1)",
                width: 1,
                type: "solid",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#304d6c", //网格颜色
              },
            },
          }, */
        series: seriesList,  //每一条配置
      };
    },
  },
};
</script>

<style></style>

 

父组件  调用echarts组件

  
<template>
     <div>
             <chartModule  :data="chartData1" />
              <chartModule  :data="chartData2" :colors='["#aced16", "#6f5553", "#d172a8"]' />
    </div>
</template>

  import chartModule from "./com/chartModule.vue"; //封装组件的路径
export default{
  components: {
    chartModule
  },
   data(){
    return{
      chartData1: null,
      chartData2:null,
    }
},
methods: {
    geData() {
      this.chartData1 = {
        x: ["22-11", "22-12", "23-1", "23-2", "23-3", "23-4", "23-5", "23-6"],
        list: [
          {
            name: "收益",
            data: [152, 136, 109, 104,78, 178, 163,  92],
            type:'bar',
            unit:"万元"
          },
          {
            name: "支出",
            data: [78, 178, 163, 152, 136, 109, 104, 92],
            type:'bar'
          },
          {
            name: "净收益",
            data: [178, 108, 50, 30, 196, 16, 144, 32],
            type:'bar'
          },
        ],
      };
      this.chartData2 = {
        x: ["22-11", "22-12", "23-1", "23-2", "23-3", "23-4", "23-5", "23-6"],
        list: [
          {
            name: "收益",
            data: [199, 106, 10, 15,70, 108, 123,  192],
            type:'line'
          },
          {
            name: "支出",
            data: [78, 178, 163, 152, 136,70, 108, 123,],
            type:'line'
          },
          {
            name: "净收益",
            data: [70, 108, 123, 30, 196, 16, 144, 32],
            type:'line'
          },
        ],
      };

    },
}
}