Echarts

更新: 2025/1/20 字数: 0 字 时长: 0 分钟

说明

基于echarts封装的组件，可以传入各种参数来展示不同类型的图表，具体参数功能请参考echarts官网

示例

柱状图

<script setup>
const barOption = {
  title: {},
  tooltip: {},
  xAxis: {
    data: [
      t("charts.January"),
      t("charts.February"),
      t("charts.March"),
      t("charts.April"),
      t("charts.May"),
      t("charts.June"),
    ],
  },
  yAxis: {},
  series: [
    {
      name: "sales",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};
</script>
<template>
  <Chart :option="refBarOption" :style="{ height: '330px' }" />
</template>

折线图

<script setup>
const lineOption = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
};
</script>
<template>
  <Chart :option="refLineOption" :style="{ height: '330px' }" />
</template>

仪表盘

<script setup>
const scoreOption = {
  tooltip: {
    formatter: "{a} <br/>{b} : {c}%",
  },
  series: [
    {
      name: "Pressure",
      type: "gauge",
      detail: {
        formatter: "{value}",
      },
      data: [
        {
          value: 50,
          name: "SCORE",
        },
      ],
    },
  ],
};
</script>
<template>
  <Chart :option="refScoreOption" :style="{ height: '330px' }" />
</template>

基础配置

组件的默认配置，可以传入新的option修改。

const contrastColor = "rgba(255, 255, 255, 0.65)";
const backgroundColor = "transparent";

const axisCommon = function () {
  return {
    axisLine: {
      lineStyle: {
        color: contrastColor,
      },
    },
    splitLine: {
      lineStyle: {
        color: "#484753",
      },
    },
    splitArea: {
      areaStyle: {
        color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"],
      },
    },
    minorSplitLine: {
      lineStyle: {
        color: "#20203B",
      },
    },
  };
};

const colorPalette = [
  "#4992ff",
  "#7cffb2",
  "#fddd60",
  "#ff6e76",
  "#58d9f9",
  "#05c091",
  "#ff8a45",
  "#8d48e3",
  "#dd79ff",
];
const theme: any = {
  color: colorPalette,
  backgroundColor,
  axisPointer: {
    lineStyle: {
      color: "#817f91",
    },
    crossStyle: {
      color: "#817f91",
    },
    label: {
      // TODO Contrast of label backgorundColor
      color: "#fff",
    },
  },
  legend: {
    textStyle: {
      color: contrastColor,
    },
  },
  textStyle: {
    color: contrastColor,
  },
  title: {
    textStyle: {
      color: "red",
    },
    subtextStyle: {
      color: "rgba(255, 255, 255, 0.65)",
    },
  },
  toolbox: {
    iconStyle: {
      borderColor: contrastColor,
    },
  },
  dataZoom: {
    borderColor: "#71708A",
    textStyle: {
      color: contrastColor,
    },
    brushStyle: {
      color: "rgba(135,163,206,0.3)",
    },
    handleStyle: {
      color: "#353450",
      borderColor: "#C5CBE3",
    },
    moveHandleStyle: {
      color: "#B0B6C3",
      opacity: 0.3,
    },
    fillerColor: "rgba(135,163,206,0.2)",
    emphasis: {
      handleStyle: {
        borderColor: "#91B7F2",
        color: "#4D587D",
      },
      moveHandleStyle: {
        color: "#636D9A",
        opacity: 0.7,
      },
    },
    dataBackground: {
      lineStyle: {
        color: "#71708A",
        width: 1,
      },
      areaStyle: {
        color: "#71708A",
      },
    },
    selectedDataBackground: {
      lineStyle: {
        color: "#87A3CE",
      },
      areaStyle: {
        color: "#87A3CE",
      },
    },
  },
  visualMap: {
    textStyle: {
      color: contrastColor,
    },
  },
  timeline: {
    lineStyle: {
      color: contrastColor,
    },
    label: {
      color: contrastColor,
    },
    controlStyle: {
      color: contrastColor,
      borderColor: contrastColor,
    },
  },
  calendar: {
    itemStyle: {
      color: backgroundColor,
    },
    dayLabel: {
      color: contrastColor,
    },
    monthLabel: {
      color: contrastColor,
    },
    yearLabel: {
      color: contrastColor,
    },
  },
  timeAxis: axisCommon(),
  logAxis: axisCommon(),
  valueAxis: axisCommon(),
  categoryAxis: axisCommon(),

  line: {
    symbol: "circle",
  },
  graph: {
    color: colorPalette,
  },
  gauge: {
    title: {
      color: contrastColor,
    },
  },
  candlestick: {
    itemStyle: {
      color: "#FD1050",
      color0: "#0CF49B",
      borderColor: "#FD1050",
      borderColor0: "#0CF49B",
    },
  },
};