【揭秘echarts折线图】实战案例教你轻松绘制数据可视化图表

日期:

最佳答案

ECharts折线图是一种常用的数据可视化图表，可能清楚地展示数据的变更趋向。本文将经由过程实战案例，具体介绍怎样利用ECharts绘制折线图，帮助你轻松控制数据可视化图表的制造。

一、ECharts简介

ECharts是由百度团队开辟的开源JavaScript库，用于实现数据可视化。它支撑多种图表范例，包含折线图、柱状图、饼图等，并且存在丰富的设置项跟交互功能。

二、情况搭建

  1. 引入ECharts库

在HTML文件的<head>标签中引入ECharts库：

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  1. 创建图表容器

在HTML文件中创建一个用于展示图表的DOM元素：

   <div id="main" style="width: 600px;height:400px;"></div>

三、数据筹备

以下是一个虚拟的数据集，包含三个都会（北京、上海、广州）在2018年每个季度的GDP数据：

var data = {
  "北京": [12000, 14000, 16000, 18000],
  "上海": [10000, 12000, 14000, 16000],
  "广州": [8000, 10000, 12000, 14000]
};

四、设置图表

利用echarts.init()初始化图表，并利用setOption()设置图表设置项：

var myChart = echarts.init(document.getElementById('main'));

var option = {
  title: {
    text: '2018年各都会季度GDP'
  },
  tooltip: {},
  legend: {
    data:['北京', '上海', '广州']
  },
  xAxis: {
    data: ["Q1", "Q2", "Q3", "Q4"]
  },
  yAxis: {},
  series: [{
    name: '北京',
    type: 'line',
    data: data['北京']
  }, {
    name: '上海',
    type: 'line',
    data: data['上海']
  }, {
    name: '广州',
    type: 'line',
    data: data['广州']
  }]
};

myChart.setOption(option);

五、实战案例：绘制带时光轴的折线图

以下是一个包含时光轴的折线图案例，展示某超市年度销量变更：

var myChart = echarts.init(document.getElementById('main'));

var option = {
  title: {
    text: '某超市年度销量变更'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'line',
    data: [120, 200, 150, 80, 70, 110, 130, 160, 140, 180, 200, 210]
  }]
};

myChart.setOption(option);

六、总结

经由过程本文的实战案例，你已控制了利用ECharts绘制折线图的基本方法。在现实利用中，你可能根据须要调剂图表款式、设置项跟交互功能，实现愈加丰富的数据可视化后果。