折线图实战

折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。

创建图表实例的步骤已经在前面简述过了，这里就不再复述。直接贴代码。

let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");

export default {
  name: "Line",
  data() {
    return {
      lineCharts: null,
      options: {
        title: {
          text: '2017年我国非洲游客访问量'
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2015年", "2016年", "2017年"]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}"   // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
          }
        },
        series: [
          {
            name: "非洲游客访问量",
            type: "line",
            data: [1700.5, 1803.7, 1830],
            markPoint: {   // 设置折线图的最高和最低点
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: { //用于带有起点和终点信息的线数据的绘制
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.lineCharts = echarts.init(document.getElementById("line")); // 初始化图表实例
    this.lineCharts.setOption(this.options); // 设置图表配置项
  },
  beforeDestroy() {
    if (!this.charts) {
      return;
    }
    this.lineCharts.dispose(); // 释放销毁图表
    this.lineCharts = null;
  }
};