echarts折线图，最高点和最低点如何显示到图的最高位置和最低位置？

Question

echarts折线图，最高点和最低点如何显示到图的最高位置和最低位置？

因为echart图高度比较小，所以折线图中的数字差别不是很大的时候，看着像一条直线，当把高度改到500px时，才能明显看出折线图的起伏，请问该怎么设置呢？

<template>
  <div>
    <div id="chart-panel" style="height: 50px; width: 100%;"></div>
  </div>
</template>

<script>
var echarts = require("echarts");

let dataTemp = [
  { date: "2024-10-31", value: 3, rate: 11.1 },
  { date: "2024-11-01", value: 14, rate: 14.1 },
  { date: "2024-11-02", value: 21, rate: 15.1 },
  { date: "2024-11-03", value: 24, rate: 16.1 },
  { date: "2024-11-04", value: 18, rate: 21.1 },
  { date: "2024-11-05", value: 20, rate: 31.1 },
  { date: "2024-11-06", value: 24, rate: 25.5 },
];
export default {
  name: "",
  props: {

  },
  mounted() {
    var dom = document.getElementById("chart-panel");
    var myChart = echarts.init(dom);
    var option;
    var app = {};
    option = {
      //   backgroundColor: "#05224d",
      title: {
        //          text: '单位：(万元)',
        textStyle: {
          // color: "rgba(131, 162, 192, 1)",
          fontSize: 12,
        },
        top: "4%",
        left: "2%",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["数量"],
        icon: "rich",
        show: false,
        itemWidth: 14,
        itemHeight: 14,
        textStyle: {
          color: "#C6D1DB",
          fontSize: "14px",
        },
        top: 8,
        right: 10,
        itemGap: 34,
      },
      grid: {
        left: "0",
        right: "0",
        bottom: "0",
        top: "0",
        containLabel: true,
      },
      formatter: function(params) {
        let param = params.length > 0 ? params[0] : {};
        var res = `
        <div>
          <span>数量：${param.data.value}</span>
        </div>
        <div>
          <span>比例：${param.data.rate}%</span>
        </div>
      `;
        return param.name + res;
      },
      xAxis: {
        data: dataTemp.map(s => s.date),
        type: "category",
        boundaryGap: false,
        axisLine: {
          show: false,
        },

        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "rgba(255, 255, 255, 0.3)",
          fontSize: 12,
          padding: [10, 0, 0, 0],
        },
      },
      yAxis: {
        type: "value",
        boundaryGap: false,
        min: 0,
        max: 30,
        axisTick: {
          show: false, //刻度线
        },
        axisLine: {
          show: false, //隐藏y轴
        },
        axisLabel: {
          show: false, //隐藏刻度值
        },

        splitLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.12)",
            type: "dashed",
          },
        },
      },
      series: [
        {
          name: "数量",
          type: "line",
          data: dataTemp,
          smooth: true,
          color: "rgba(38, 127, 235, 1)",
          lineStyle: {
            width: 2,
          },
          showSymbol: false,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(38, 127, 235, 0.15)",
                },
                {
                  offset: 1,
                  color: "rgba(38, 127, 235, 0)",
                },
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10,
          },
          symbol: "circle",
          symbolSize: 4,
        },
      ],
    };
    if (option && typeof option === "object") {
      myChart.setOption(option);
    }
  },
  data() {
    return {};
  },
};
</script>

找到问题了：

grid需要修改为：containLabel: false

echarts4

阅读 617

AI BotBETA

要在 ECharts 折线图中显示最高点和最低点，并将它们标记在图的最高位置和最低位置，你可以使用 `markPoint` 功能。此外，为了更清晰地显示折线图的起伏，你可以增加图表的高度。以下是修改后的代码：

1. 增加图表的高度。
2. 添加 `markPoint` 来显示最高点和最低点。

<div id="chart-panel" style="height: 200px; width: 100%;"></div> <!-- 增加高度 -->

</div>
</template>

let dataTemp = [
{ date: "2024-10-31", value: 3, rate: 11.1 },
{ date: "2024-11-01", value: 14, rate: 14.1 },
{ date: "2024-11-02", value: 21, rate: 15.1 },
{ date: "2024-11-03", value: 24, rate: 16.1 },
{ date: "2024-11-04", value: 18, rate: 21.1 },
{ date: "2024-11-05", value: 20, rate: 31.1 },
{ date: "2024-11-06", value: 24, rate: 25.5 },
];

export default {
name: "",
props: {},
mounted() {

var dom = document.getElementById("chart-panel");
var myChart = echarts.init(dom);
var option;
var app = {};

// 计算最高点和最低点
let maxData = Math.max(...dataTemp.map(item => item.value));
let minData = Math.min(...dataTemp.map(item => item.value));
let maxIndex = dataTemp.findIndex(item => item.value === maxData);
let minIndex = dataTemp.findIndex(item => item.value === minData);

option = {
  // 其他配置保持不变...

  series: [
    {
      name: "数量",
      type: "line",
      data: dataTemp,
      smooth: true,
      color: "rgba(38, 127, 235, 1)",
      lineStyle: {
        width: 2,
      },
      showSymbol: false,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(38, 127, 235, 0.15)",
            },
            {
              offset: 1,
              color: "rgba(38, 127, 235, 0)",
            },
          ],
          false
        ),
        shadowColor: "rgba(0, 0, 0, 0.1)",
        shadowBlur: 10,
      },
      markPoint: {
        data: [
          {
            type: 'max',
            name: '最大值',
            value: maxData,
            itemStyle: {
              color: 'red',
            },
            label: {
              show: true,
              formatter: `{c}`,
              position: 'top',
            },
          },
          {
            type: 'min',
            name: '最小值',
            value: minData,
            itemStyle: {
              color: 'green',
            },
            label: {
              show: true,
              formatter: `{c}`,
              position: 'bottom',
            },
          },
          // 如果需要显示具体的日期，可以使用以下方式（但这种方式需要手动计算坐标）
          // {
          //   coord: [dataTemp[maxIndex].date, maxData], // 注意：这里的 date 需要转换为 x 轴的坐标值，ECharts 不直接支持日期字符串作为坐标
          //   name: '最大值日期',
          //   value: maxData,
          //   itemStyle: {
          //     color: 'red',
          //   },
          //   label: {
          //     show: true,
          //     formatter: `日期: ${dataTemp[maxIndex].date}, 值: ${maxData}`,
          //     position: 'top',
          //   },
          // },
          // {
          //   coord: [dataTemp[minIndex].date, minData],
          //   name: '最小值日期',
          //   value: minData,
          //   itemStyle: {
          //     color: 'green',
          //   },
          //   label: {
          //     show: true,
          //     formatter: `日期: ${dataTemp[minIndex].date}, 值: ${minData}`,
          //     position: 'bottom',
          //   },
          // },
        ],
      },
    },
  ],
};

if (option && typeof option === "object") {
  myChart.setOption(option);
}

},
data() {

return {};

},
};
</script>


注意：
- `markPoint` 中的 `type: 'max'` 和 `type: 'min'` 会自动标记数据中的最大值和最小值。
- 如果你需要显示具体的日期，可以使用 `coord` 属性，但需要注意日期字符串需要转换为 x 轴的坐标值，这通常涉及到对日期数据的预处理或使用 ECharts 提供的 `convertToPixel` 方法。在上述代码中，这部分被注释掉了，因为直接使用日期字符串作为坐标在 ECharts 中是不支持的。
- 增加了图表的高度以更清晰地显示折线图的起伏。

1 个回答

得票最新

qngyun1029

95832188268

发布于
11 月 11 日广东

✓ 已被采纳

因为echart图高度比较小，所以折线图中的数字差别不是很大的时候，看着像一条直线，当把高度改到500px时，才能明显看出折线图的起伏，请问该怎么设置呢？

<template>
  <div>
    <div id="chart-panel" style="height: 50px; width: 100%;"></div>
  </div>
</template>

<script>
var echarts = require("echarts");

let dataTemp = [
  { date: "2024-10-31", value: 3, rate: 11.1 },
  { date: "2024-11-01", value: 14, rate: 14.1 },
  { date: "2024-11-02", value: 21, rate: 15.1 },
  { date: "2024-11-03", value: 24, rate: 16.1 },
  { date: "2024-11-04", value: 18, rate: 21.1 },
  { date: "2024-11-05", value: 20, rate: 31.1 },
  { date: "2024-11-06", value: 24, rate: 25.5 },
];
export default {
  name: "",
  props: {

  },
  mounted() {
    var dom = document.getElementById("chart-panel");
    var myChart = echarts.init(dom);
    var option;
    var app = {};
    option = {
      //   backgroundColor: "#05224d",
      title: {
        //          text: '单位：(万元)',
        textStyle: {
          // color: "rgba(131, 162, 192, 1)",
          fontSize: 12,
        },
        top: "4%",
        left: "2%",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["数量"],
        icon: "rich",
        show: false,
        itemWidth: 14,
        itemHeight: 14,
        textStyle: {
          color: "#C6D1DB",
          fontSize: "14px",
        },
        top: 8,
        right: 10,
        itemGap: 34,
      },
      grid: {
        left: "0",
        right: "0",
        bottom: "0",
        top: "0",
        containLabel: true,
      },
      formatter: function(params) {
        let param = params.length > 0 ? params[0] : {};
        var res = `
        <div>
          <span>数量：${param.data.value}</span>
        </div>
        <div>
          <span>比例：${param.data.rate}%</span>
        </div>
      `;
        return param.name + res;
      },
      xAxis: {
        data: dataTemp.map(s => s.date),
        type: "category",
        boundaryGap: false,
        axisLine: {
          show: false,
        },

        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "rgba(255, 255, 255, 0.3)",
          fontSize: 12,
          padding: [10, 0, 0, 0],
        },
      },
      yAxis: {
        type: "value",
        boundaryGap: false,
        min: 0,
        max: 30,
        axisTick: {
          show: false, //刻度线
        },
        axisLine: {
          show: false, //隐藏y轴
        },
        axisLabel: {
          show: false, //隐藏刻度值
        },

        splitLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.12)",
            type: "dashed",
          },
        },
      },
      series: [
        {
          name: "数量",
          type: "line",
          data: dataTemp,
          smooth: true,
          color: "rgba(38, 127, 235, 1)",
          lineStyle: {
            width: 2,
          },
          showSymbol: false,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(38, 127, 235, 0.15)",
                },
                {
                  offset: 1,
                  color: "rgba(38, 127, 235, 0)",
                },
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10,
          },
          symbol: "circle",
          symbolSize: 4,
        },
      ],
    };
    if (option && typeof option === "object") {
      myChart.setOption(option);
    }
  },
  data() {
    return {};
  },
};
</script>

问题找到了：

grid需要修改为：containLabel: false

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进