echarts 折线图1.0记录一下做过的折线图基础配置请参考 Echarts (基本配置) - 掘金 (juejin

记录一下做过的折线图

这里直接上代码

<template>
  <div>
    <div class="myChart" ref="myChart_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null, // echarts实例对象
      xData: ["11.00", "11.10", "11.20", "11.30", "11.40", "11.50", "12.00"],
      yData: ["-22","-26","-28","-25","-22","-24","-26"],
    };
  },

  //由于初始化echarts实例对象需要使用到dom元素,必须要在mounted就调用
  mounted() {
    this.initEchart();
  },
  methods: {
    //创建一个echart
    initEchart() {
      this.chartInstance = this.$echarts.init(this.$refs.myChart_ref);

      const option = {
        width: 368,
        height: 113,

        grid: {
          top: "10%",
          right: "0%",
          left: "10%",
          bottom: "0%",
          show: true,
          borderColor: "transparent",
          backgroundColor: "rgba(9, 24, 48, 0.4)",
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false, //顶头显示
            data: this.xData,
            //坐标轴刻度标签的相关设置
            axisLabel: {
              margin: 10,
              color: "#e2e9ff",
              textStyle: {
                fontSize: 12,
              },
            },
            //坐标轴在 grid 区域中的分隔线
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.06)",
              },
            },
            // 刻度线
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: -30, // 坐标轴刻度最小值。
            max: -20, // 坐标轴刻度最大值。
            splitNumber: 2, // 坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
            interval: 2, // 强制设置坐标轴分割间隔。

            //坐标轴刻度标签的相关设置
            axisLabel: {
              color: "#e2e9ff",
              textStyle: {
                fontSize: 12,
              },
            },

            //坐标轴在 grid 区域中的分隔线
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.06)",
              },
            },
            // 刻度线
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "line",
            symbol: "circle",
            showAllSymbol: true, //显示所有数据点
            symbolSize: 6, //原点大小
            smooth: true, //开启平滑处理

            lineStyle: {
              normal: {
                width: 2,
                color: "rgba(255, 201, 125, 0.8)", // 线条颜色
              },
            },

            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: "white", // 在折线拐点上显示数据
                },
                color: "rgba(255,255,255,1)", //折线点的颜色
              },
            },

            areaStyle: {
              //区域填充样式
              type: "linear",
              normal: {
                origin: "start", //为负数时的 渐变方向
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(255,255,255,0)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 201, 125, 0.5)",
                    },
                  ],
                  false // 缺省为 false
                ),
              },
            },

            data: this.yData,
          },
        ],
      };

      this.chartInstance.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.myChart {
  position: absolute;
  left: 800px;
  top: 400px;
  width: 448px;
  height: 180px;
  background: rgb(0, 255, 94);
}
</style>