Eacharts组件封装

//使用封装的组件   id：自定义 且必须唯一  options为传入的数据
 <create-echarts
  eid="propaganda-year"
   :options="options1"
 ></create-echarts>
 
 import { lineCharttwo } from "@/components/Charts/lineCharttwo";  //eacharts 相关自定义配置文件 
import CreateEcharts from "@/components/Charts/CreateEcharts.vue"; //组件
import { computed, ref } from "vue";
// 需要的数据
const dataList = ref([
  {
    name: "发布浏览量月趋势 ",
    smooth: 0.6,
    list: [],
    colors: [
      "rgba(39, 232, 212, 0)",
      "rgba(96, 163, 255, 0.4000)",
      "rgba(96, 163, 255, 1)",
    ],
    fontColor: "#fff",
    icon: "",
  },
]);
//要传入到配置文件的数据
const options = computed(() => {
  return lineCharttwo(tags.value, dataList.value, false, "", "", "");
});

封装的eacharts组件

<template>
  <div class="create_echarts_container">
    <div v-show="animated" class="bg">
      <img alt="" src="@/assets/images/pie.png" />
    </div>
    <div class="create_echarts_main" :id="eid"></div>
  </div>
</template>
<script>
import {
  computed,
  inject,
  onMounted,
  onUnmounted,
  watch,
} from "@vue/runtime-core";
import { debounce } from "@/assets/js/debounce";
import * as echarts from "echarts";
import "echarts-gl";
export default {
  name: "CreateEcharts",

  props: {
    /* id */
    eid: {
      type: String,
      required: true,
    },
    /* 数据 */
    options: {
      type: Object,
      required: true,
    },
    /* 显示提示 */
    showTip: {
      type: Number,
    },
    /* 高亮 */
    highlight: {
      type: Number,
    },
    animated: {
      type: Boolean,
      default: () => false,
    },
  },

  setup(props) {
    /* id */
    const echartsId = computed(() => {
      return props.eid;
    });

    /* echarts 参数 */
    const options = computed(() => {
      return props.options;
    });

    /*/!* 显示默认提示 *!/
    const showTip = computed(() => {
      return props.showTip;
    });

    /!* 显示默认高亮 *!/
    const highlight = computed(() => {
      return props.highlight;
    });*/

    /* echarts */
    // const echarts = inject("echarts");

    /* 定义 echart */
    let echart;

    /* 创建 echarts 图 */
    const draw = () => {
      echart.clear();
      echart.setOption(options.value);
      /*echart.dispatchAction({
        type: 'showTip',
        seriesIndex: showTip.value,
        dataIndex: 0, //默认选中第二个
      });
      echart.dispatchAction({
        type: 'highlight',
        seriesIndex: highlight.value,
        dataIndex: 0, //默认选中第二个
      });*/
    };

    /* 初始化 */
    const init = () => {
      if (!document.getElementById(echartsId.value)) return;
      if (echart != null && echart != "" && echart != undefined) {
        echart.dispose(); //销毁
      }
      echart = echarts.init(document.getElementById(echartsId.value));
      draw();
    };

    /* 监听 echarts 参数变化 */
    watch(options, () => {
      init();
    });

    onMounted(() => {
      init();
      window.addEventListener(
        "resize",
        debounce(
          () => {
            echart.setOption(options.value);
            echart.resize();
          },
          200,
          true
        )
      );
    });

    /* 销毁时清除 echart */
    onUnmounted(() => {
      echart.clear();
    });
  },
};
</script>

<style lang="less" scoped>
.create_echarts_container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .create_echarts_main {
    width: 100%;
    height: 100%;
  }

  @keyframes rotate-ring {
    0% {
      transform: rotate(0) translate(-50%, -50%);
    }
    100% {
      transform: rotate(360deg) translate(-50%, -50%);
    }
  }
  .bg {
    position: absolute;
    left: 33%;
    top: 42%;
    width: 0;
    height: 100%;

    img {
      position: absolute;
      left: 0;
      top: 0;
      width: auto;
      height: 78%;
      transform: translate(-50%, -50%);
      transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      animation-name: rotate-ring;
      animation-duration: 5000ms;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }
}
</style>

配置文件

//折线图

import { FontSize } from "@/assets/echarts/FontSize";

/* 获取线条数据 */
function getData(data) {
  const series = [];
  data.forEach((el, index) => {
    let colors = [];
    if (el.colors && Array.isArray(el.colors) && el.colors.length > 0) {
      colors = el.colors;
      if (colors.length < 2) {
        colors.push(colors[0]);
      }
      if (colors.length < 3) {
        colors.push("#FFDC2A");
      }
    } else {
      colors = ["rgba(255,234,42,0)", "rgba(255,234,42,.25)", "#FFEA2A"];
    }
    series.push({
      name: el.name,
      type: "line",
      stack: "Total" + index,
      symbol: "none",
      smooth: el.smooth || false,
      data: el.list,
      zlevel: index,
      areaStyle: {
        type: "default",
      },
      lineStyle: {
        color: colors[2],
      },
      color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 1,
            color: colors[0], // 0% 处的颜色
          },
          {
            offset: 0,
            color: colors[1], // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
        // zlevel: index,
        animationDuration: 2500,
      },
    });
  });
  return series;
}

/* 获取legend */
function getLegend(data) {
  const legend = [];
  data.forEach((el) => {
    legend.push({
      name: el.name,
      icon: el.icon,
      itemStyle: {
        color: el.colors ? el.colors[2] || "#FFDC2A" : "",
      },
    });
  });
  return legend;
}

export function lineCharttwo(
  tags,
  data,
  legend = true,
  unit = "人",
  rotate = 0,
  top,
  dataZoom
) {
  /*const list: number[] = [];
  data.forEach(el => list.push(...el.list));
  const minInter: number = Math.max(...list);
  const len: number = (minInter + '').length - 1;
  const powResult: number = Math.pow(10, len);
  const compMin: number = Math.ceil(minInter / (5 * powResult)) * powResult;*/

  const option = {
    tooltip: {
      confine: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        shadowStyle: {
          color: "rgba(26, 148, 255, 0.39)",
          opacity: 0.25,
        },
        z: -1,
      },
      // z: 3,
      borderWidth: 0,
      backgroundColor: "rgba(0, 9, 87, 0)",
      extraCssText: "z-index: 9;box-shadow: none;",
      formatter: function (
        params
      ) {
        let str = "";
        for (let i = 0; i < params.length; i++) {
          str += `<div class="format">${params[i].seriesName
            }：<span style="color:${data[i].fontColor || "#1AD7FF"}">${params[i].value
            }${unit}</span></div>`;
        }
        return (
          '<div class="tooltip-lines">' +
          '<div class="line_title">' +
          params[0].name +
          "</div>" +
          str +
          "</div>"
        );
      },
    },
    legend: {
      show: legend,
      data: getLegend(data),
      itemWidth: 14,
      itemHeight: 2,
      right: "4%",
      top: "5%",
      itemGap: 18,
      textStyle: {
        fontSize: FontSize(0.12),
        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
        fontWeight: 400,
        color: "rgba(255, 255, 255, 0.8)",
      },
    },
    grid: {
      top: top ? '10%' : "25%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      data: tags,
      minInterval: 1,
      axisTick: {
        show: false,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.39)",
        },
      },
      axisLabel: {
        show: true,
        interval: 0,
        color: "rgba(255, 255, 255, 0.8)", //这里用参数代替了
        fontSize: FontSize(0.12),
        rotate: rotate, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
      },
    },
    yAxis: {
      type: "value",
      minInterval: 1,
      // interval: compMin,
      splitNumber: 4,
      splitLine: {
        //分割线配置
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.15)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "rgba(255, 255, 255, 0)",
        },
      },
      axisLabel: {
        show: true,
        color: "rgba(255, 255, 255, 0.8)", //这里用参数代替了
        fontSize: FontSize(0.12),
      },
      name: unit !== "" ? "(" + unit + ")" : "",
      nameTextStyle: {
        padding: [0, 0, 0, FontSize(-0.25)],
        color: "#fff",
        fontSize: FontSize(0.12),
        align: "left",
        verticalAlign: "bottom",
      },
      nameLocation: "end",
    },
    dataZoom: [
      {
        show: dataZoom || dataZoom == false ? false : true,
        moveHandleSize: 5,
        height: 0,
        zoomLock: true,
        end: 120,
        brushStyle: {},
        borderColor: "rgba(248, 244, 244, 0)",
        showDetail: false,
        bottom: "8",
      },
    ],
    series: getData(data),
  };
  return option;
}