折线图的实现步骤

Qwe7

发布于 2022-06-15 08:21:01

4590

发布于 2022-06-15 08:21:01

文章被收录于专栏：网络收集

2、图表2 折线图

1.折线图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
  <html lang="en">

  <head>
    <script src="js/echarts.min.js"></script>
  </head>

  <body>
    <div style="width: 600px;height:400px"></div>
    <script>
      var mCharts = echarts.init(document.querySelector("div")) var option = {}
      mCharts.setOption(option)
    </script>
  </body>

</html>

此时 option 是一个空空如也的对象

步骤2 准备x轴的数据

var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

步骤3 准备 y 轴的数据

var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]

步骤4 准备 option , 将 series 中的 type 的值设置为: line

var option = {
  xAxis: {
    type: 'category',
    data: xDataAr
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'line',
    data: yDataAr
  }]
}

最终的效果如下: