【揭秘echarts折線圖】實戰案例教你輕鬆繪製數據可視化圖表

最佳答案

ECharts折線圖是一種常用的數據可視化圖表，可能清楚地展示數據的變更趨向。本文將經由過程實戰案例，具體介紹怎樣利用ECharts繪製折線圖，幫助你輕鬆控制數據可視化圖表的製作。

一、ECharts簡介

ECharts是由百度團隊開辟的開源JavaScript庫，用於實現數據可視化。它支撐多種圖表範例，包含折線圖、柱狀圖、餅圖等，並且存在豐富的設置項跟交互功能。

二、情況搭建

引入ECharts庫

在HTML文件的<head>標籤中引入ECharts庫：

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

創建圖表容器

在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繪製折線圖的基本方法。在現實利用中，你可能根據須要調劑圖表款式、設置項跟交互功能，實現愈加豐富的數據可視化後果。