Блог

Я создал простую echart в Vue. На диаграмме должно отображаться количество указанной вещи в течение одного месяца. Мне удалось настроить значения по осям y и x, но, похоже, я не могу нарисовать линию, скажем, если у меня будет сумма 50 за один месяц. Вот как это выглядит сейчас визуально: https://imgur.com/a/m1RCPfA

Вот мой html:

 <div class="chart-wrapper">
     <chart :options="chartOptionsLine"></chart>
  </div>
 

и вот мой js:

 data() {
    return {
chartOptionsLine: {
  xAxis: {
    data: [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12",
      "13",
      "14",
      "15",
      "16",
      "17",
      "18",
      "19",
      "20",
      "21",
      "22",
      "23",
      "24",
      "25",
      "26",
      "27",
      "28",
      "29",
      "30",
      "31"
    ]
  },
   tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
  yAxis: {
    data: [
      "1k",
      "5k",
      "10k"
    ],
  },
  series: [
    {
      type: "line",
      data: [10000]
    }
  ],
  title: {
    text: "Monthly Stock Prices",
    x: "center",
    textStyle: {
      fontSize: 24
    }
  },
  color: ["#127ac2"]
}
    }
  }
}
 

Почему моя строка не отображается и как я могу ее отобразить?

Вы сбиваете с толку yAxis и series . Вам не нужно добавлять данные yAxis, просто поместите их в ряд данных в виде массива.

 xAxis: {
    data: [1, 2, 3 ,4, 5, 6, 7]
},
title: {
    text: "Monthly Stock Prices",
    x: "center",
    textStyle: {
        fontSize: 24
    }
},
color: ["#127ac2"],
yAxis: {
    type: 'value'
},
tooltip: {
    formatter: '{b}: {c}'
},
series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true
}]
 

Я надеюсь, что это будет полезно для вас.