echarts读取JSON文件并画图完整代码

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

Echarts官网上提供了很多图表例子供我们白嫖,有时候遇到数据量比较大时,它会向后台请求json文件来加载图表数据,这篇文章主要给大家介绍了echarts读取JSON文件并画图的相关资料,需要的朋友可以参考下

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>

总结

到此这篇关于echarts读取JSON文件并画图的文章就介绍到这了,更多相关echarts读取JSON文件画图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

一文带你深入理解JavaScript对象与包装类
想当然,大家都认识JS中的对象,也知道一些对象的实现方法,所以在了解包装类之前,我们将来对象的实现方法大概的来回想一下,更感兴趣的小伙伴跟着小编一起来看看吧
2024-06-06
Web前端框架bootstrap实战【第一次接触使用】
Bootstrap是Twitter推出的一个开源的前端框架。这篇文章主要介绍了Web前端框架bootstrap实战,需要的朋友可以参考下
2016-12-12
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板
2014-08-08
Javascript表单验证要注意的事项
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。被 JavaScript 验证的这些典型的表单数据有：用户是否已填写表单中的必填项目？用户输入的邮件地址是否合法？用户是否已输入合法的日期？用户是否在数据域 (numeric field) 中输入了文本？
2014-09-09
微信小程序select下拉框实现源码
这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-11-11
JS FormData上传文件的设置方法
使用FormData上传文件时，总是获取不到req.file对象。发现是没有配置对FormData导致的，怎么解决这个问题呢？下面小编给大家带来了JS FormData上传文件的设置方法，需要的朋友参考下吧
2017-07-07
非阻塞动态加载javascript广告实现代码
非阻塞动态加载javascript广告，需要的朋友可以参考下。
2010-11-11
JavaScript中的相等操作符使用详解
JavaScript 中的相等操作符详解，包括 [] == []、[] == ![]、{} == !{}几个操作符,需要的朋友可以参考下
2019-12-12
Javascript中的arguments对象
这篇文章主要介绍了Javascript中的arguments对象的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
window.print()局部打印三种方式(小结)
本文主要介绍了window.print()局部打印三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06