我们学习了几个通用配置之后，终于来到我们第二种图表——折线图了。
折线图就是把数据展示成折线那样，便于观察数据的变更和走势。
image.png

实现步骤

基础代码

我们再来回忆一下，生成 echaets 图表需要哪几步

  • 引入js文件
  • 准备容器（盒子）
  • 初始化 echarts 示例对象
  • 设置 option（配置项）
  • 将 option 设置给 echarts 示例对象

我们只需要更改 option 的内容就可以生成一个折线图了，其中把我们之前配置过的柱状图的 series 的 type 改为 line 就生成了折线图。

现在我们准备一些数据先生成一个折线图：
x轴：[‘一月’,’二月’,’三月’,’四月’,’五月’,’六月’,’七月’,’八月’,’九月’,’十月’,’十一月’,’十二月’]
y轴：[‘12’,’15’,’56’,’78’,’56’,’32’,’59’,’65’,’78’,’89’,’75’,’60’]

  1. var myCharts = echarts.init(document.querySelector("div"))
  2. var xData = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] // x轴的数据
  3. var yData1 = ['12','15','56','78','56','32','59','65','78','89','75','60'] // y轴的数据
  4. var option = {
  5.     xAxis: {
  6.       type: "category", // 类目轴
  7.     data: xData,
  8.   },
  9.   yAxis: {
  10.       type: 'value' // 数值轴
  11.   },
  12.   series: [
  13.     {
  14.         name: '销量', // 名称：销量
  15.       type: 'line',    // 类型：折线图
  16.       data: yData1,
  17.     }
  18.   ]  
  19. }
  20. myCharts.setOption(option)

点击查看【codepen】