echarts 绘制曲线带有平均值

原创已于 2024-11-12 17:07:02 修改 · 418 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2024-09-19 10:07:45 首次发布

echarts 曲线图带水平线

在这里插入图片描述

应用echarts 绘制带有平均值的曲线，…直接上代码

//首先我们需要一个绘制echarts的盒子
<div ref="echartstopref" style="width: 100%; height: 50%"></div>
//然后就是初始化echarts图表
//使用ref获取元素
const myechartstop = ref(null);
onMounted(() => {
//页面加载初始化echarts
  myechartstop.value = markRaw(echarts.init(echartstopref.value));
  echartstopInfo();
});
const echartstopInfo = () => {
  optiontopInfo();
  window.addEventListener("resize", () => {
    myechartstop.value.resize();
  });
};
const optiontopInfo = () => {
  myechartstop.value.setOption({
    title: [
      {
        text: "某某平均借出时长",
        top: 16,
        left: 15,
        textStyle: {
          fontSize: 18,
          color: "#000",
          fontWeight: "600",
        },
      },
      {
        text: `${dataday.value}天`,
        top: "55%",
        left: 16,
        textStyle: {
          fontSize: 15,
          color: "#434343",
          fontWeight: "600",
        },
      },
    ],
    grid: {
      top: "40%",
      left: "25%",
      right: "10%",
      bottom: "-10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      show: false,
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      show: false,
    },
    series: [
      {
        type: "line",
        smooth: true,
        symbol: "none",
        data: datatop.value,
        silent: true,
        itemStyle: {
          color: "#7863FF",
        },
        markLine: {
          symbol: ["none"],
          show: false,
          data: [
            {
              type: "average",
              label: {
                show: false,
              },
              lineStyle: {
                type: "solid",
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "rgba(2, 182, 169, 0)" },
                  { offset: 0.5, color: "rgba(2, 182, 169, 0.5)" },
                  { offset: 1, color: "rgba(2, 182, 169, 0)" },
                ]),
                width: 15,
                // 添加水平线部分阴影
                // shadowColor: "rgba(2, 182, 169, 1)",
                // shadowBlur: 20,
                // shadowOffsetX: 1,
                // shadowOffsetY: 1,
              },
            },
            {
              type: "average",
              label: {
                show: false,
              },
              lineStyle: {
                type: "solid",
                color: "#02B6A9",
                width: 1,
                shadowColor: "rgba(2, 182, 169, 1)",
                shadowBlur: 10,
                shadowOffsetX: 1,
                shadowOffsetY: 1,
              },
            },
          ],
        },
      },
    ],
  });
};