折线图

折线图实战

介绍折线图相关内容,数据收集,整理数据,编写扇形图的例子

02-01侠课岛    初级拔高       

前端/前端/Vue + ECharts实战 6     0     349

折线图实战

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

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

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

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

6

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?