CODEWITHSUNDEEP
javascriptvue.jsecharts
user14543107
user14543107

Reputation: 117

How to draw a line in echarts

I have created a simple echart in Vue. The chart should display the amount of a said thing in the span of one month. I managed to setup the y-axis and x-axis values, but I can't seem to draw a line, let's say if I have an amount of 50 in one month. This is how it looks now visually: https://i.sstatic.net/TkwkI.jpg

Here is my html:

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

and here is my 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"]
}
    }
  }
}

Why is my line not displaying and how can I display it?

Upvotes: 0

Views: 2137

Answers (1)

Nevzat G&#252;nay
Nevzat G&#252;nay

Reputation: 1225

You are confusing yAxis and series. You do not need to add yAxis data, just put it into series data as an array.

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
}]

I hope it will be helpful for you.

Upvotes: 1

Related Questions