echarts读取JSON文件并画图完整代码
作者：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文件画图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！