echarts读取JSON文件并画图

Suppose-dilemma

已于 2022-09-01 19:41:52 修改

阅读量8.2k

点赞数 18

CC 4.0 BY-SA版权

分类专栏：前端文章标签： echarts json 前端

于 2022-09-01 16:27:06 首次发布

本文链接：https://blog.youkuaiyun.com/ifhuke/article/details/126642795

前端专栏收录该内容

4 篇文章

订阅专栏

Echarts读入json数据画图

1. 创建一个文件选择器
2. 选择JSON文件
3. 数据处理
4. 传入数据开始画图
5. 结果展示
6. 完整代码

1. 创建一个文件选择器

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