echarts讀取JSON文件并畫圖完整代碼

更新時間：2023年06月29日 14:26:02 作者：Suppose-dilemma

Echarts官網上提供了很多圖表例子供我們白嫖,有時候遇到數據量比較大時,它會向后臺請求json文件來加載圖表數據,這篇文章主要給大家介紹了echarts讀取JSON文件并畫圖的相關資料,需要的朋友可以參考下

1. 創(chuàng)建一個文件選擇器

<input type="file" id="files" value="選文件"/>
<script>
	var inputElement = document.getElementById("files");
	inputElement.addEventListener("change", handleFiles, false);
	function handleFiles() {
	    var selectedFile = document.getElementById("files").files[0];//獲取讀取的File對象
	    var reader = new FileReader();//讀取操作就是由它完成的。
	    reader.readAsText(selectedFile);//讀取文件的內容
	    reader.onload = function(){
	        console.log("讀取結果：", this.result);//當讀取完成之后會回調這個函數，然后此時文件的內容存儲到了result中。直接操作即可。
	    };
	}

文件選擇器能夠選擇并讀取本設備的文件。

2. 選擇JSON文件

JSON文件中的內容如下所示，文件中的引號必須為雙引號，否則會報錯：

{
	"Matcha Latte": {
		"2015": 43.3,
		"2016": 85.8,
		"2017": 93.7
	},
	"Cheese Cocoa": {
		"2015": 86.4,
		"2016": 65.2,
		"2017": 82.5
	},
	"Milk Tea": {
		"2015": 83.1,
		"2016": 73.4,
		"2017": 55.1
	},
	"Walnut Brownie": {
		"2015": 72.4,
		"2016": 53.9,
		"2017": 39.1
	}
}

3. 數據處理

我們需要用讀入的數據來在echarts上進行繪圖，又因為echarts接收的數據的類型是數組類型，所以我們需要將讀入的數據轉為數組類型的數據才能將其直接傳入echarts中。

//this.result是讀入的JSON文件的數據，讀出的數據時對象類型，要轉為數組才行
let json = JSON.parse(this.result);
//echarts開頭必須添加每一列的名字
list = [['Product','2015','2016','2017']];
//得到json文件中的所有鍵
json_key = Object.keys(json);
for(let i = 0;i < json_key.length;i++){
  //將每一行數據拼接成數組
  list_i = [json_key[i]].concat(Object.values(json[json_key[i]]))
  list.push(list_i)
}

4. 傳入數據開始畫圖

<div id="main" style="width: 1000px;height:500px;"></div>
function draw(list){
  // 基于準備好的dom，初始化echarts實例
  var myChart = echarts.init(document.getElementById('main'));
  console.log(list)
  //瀏覽器寬度改變的時候，始終保持圖表寬度是頁面的 100%。
  window.onresize = function() {
    myChart.resize();
  };
  // 指定圖表的配置項和數據
  var option = {
    legend: {},
    tooltip: {},
    toolbox: {
      feature: {
        //圖片下載功能
        saveAsImage: {
          type: 'png',
          name: 'test1',
          backgroundColor: 'auto',
          show: true,
          title: true,
        },
      },
    },
    dataset: {
      // 默認把第一個維度映射到 X 軸上，后面維度映射到 Y 軸上。
      source: list
    },
    xAxis: {
      //是否顯示
      show: true,
    },
    //指定y軸為類目軸，參數默認'value'
    yAxis: {type: 'category'},
    series: [{ type: 'bar' }],
    series: [
      {
        type: 'bar',
        //設定x軸顯示的數據，y軸顯示的數據
        encode: {
          x: '2015',
          y: 'product',
        },
      },
      {
        type: 'bar',
        encode: {
          x: '2016',
          y: 'product',
        },
      },{
        type: 'bar',
        encode: {
          x: '2017',
          y: 'product',
        },
      },
    ]
  };
  myChart.setOption(option);
}

5. 結果展示

6. 完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./JS/echarts.js"></script>
  <title>Document</title>
</head>
<body>
  <input type="file" id="files" value="選文件"/>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script>
    var inputElement = document.getElementById("files");
    inputElement.addEventListener("change", handleFiles, false);
    function handleFiles() {
        var selectedFile = document.getElementById("files").files[0];//獲取讀取的File對象
        var reader = new FileReader();//這里是核心！??！讀取操作就是由它完成的。
        reader.readAsText(selectedFile);//讀取文件的內容
        reader.onload = function(){
            console.log("讀取結果：", this.result);//當讀取完成之后會回調這個函數，然后此時文件的內容存儲到了result中。直接操作即可。
            let json = JSON.parse(this.result);
            list = [['Product','2015','2016','2017']];
            json_key = Object.keys(json);
            for(let i = 0;i < json_key.length;i++){
              list_i = [json_key[i]].concat(Object.values(json[json_key[i]]))
              list.push(list_i)
            }
            draw(list)
        };
    }
    function draw(list){
      // 基于準備好的dom，初始化echarts實例
      var myChart = echarts.init(document.getElementById('main'));
      console.log(list)
      //瀏覽器寬度改變的時候，始終保持圖表寬度是頁面的 100%。
      window.onresize = function() {
        myChart.resize();
      };
      // 指定圖表的配置項和數據
      var option = {
        legend: {},
        tooltip: {},
        toolbox: {
          feature: {
            //圖片下載功能
            saveAsImage: {
              type: 'png',
              name: 'test1',
              backgroundColor: 'auto',
            },
          },
        },
        dataset: {
          // 默認把第一個維度映射到 X 軸上，后面維度映射到 Y 軸上。
          source: list
        },
        xAxis: {
          //是否顯示
          show: true,
        },
        //指定y軸為類目軸，參數默認'value'
        yAxis: {type: 'category'},
        series: [
          {
            type: 'bar',
            //設定x軸顯示的數據，y軸顯示的數據
            encode: {
              x: '2015',
              y: 'product',
            },
          },
          {
            type: 'bar',
            encode: {
              x: '2016',
              y: 'product',
            },
          },{
            type: 'bar',
            encode: {
              x: '2017',
              y: 'product',
            },
          },
        ]
      };
      myChart.setOption(option);
    }
  </script>
</body>
</html>