读取json文件导入Echarts柱状图模板中

Echarts是一个使用JavaScript实现的开源可视化库，在制作图表的时候可以直接到官网上获取相应的表格模板。本文编写了一份json文件，使用$.get()或者$.ajax()读取文件内容，绘制图表。

1. 初始化div，给柱状图预留足够的区域
   <div id="charts" style="width:100%;height:600px;"></div>

2. 引入echarts.js

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

3. 编写json数据文件：

{
    "data_pie" :{
		"name":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
		"value":[5, 20, 36, 10, 10, 20]
	} 
}

在编写json文件的过程中主要有以下几个问题：

(1)json的基本数据格式：

在json中，数据呈现“名称：值对”的格式，数据之间由逗号分隔，用{}保存对象，用[]保存数组，一个数组内可以包含多个对象，当值为字符串时，需要用""括起来。

比如，在本例中，设置一个对象名为"data_pie"，它具有两个属性，"name"表示服装的种类，"value"表示对应的销量，用数组分别存储对应的值（即种类和销量），对象之间用逗号分隔。

(2)如何将json和条形统计图的横纵坐标对应起来

横轴对应服装的种类，纵轴对应销量，因此在读取数据的时候，应该将data_pie.name导入横轴，配置要在X轴显示的项，将data_pie.value导入系列列表中（注意不是y轴，因为并不是要显示在Y轴的项）

4. JavaScript部分代码：

方法一：采用$.get()获取JSON数据并绘制图表

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('charts'));//charts为上文初始化的div，id为charts
$.get('json/ceshi.json', function(data) {
	//json/ceshi.json是上文编写的json文件的存储路径
	myChart.setOption({
		title: {
			text: "销量图",
			x: "center",
			//x:"center"用于将标题居中，默认左对齐，还有"right",padding用于设置上右下左边距，可用padding:5设置四周边距均为5px
			padding: [20, 20, 0, 0]
		},
		legend: {
			data: ["销量"],
			x: "right",
			padding: [20, 20, 0, 40],
		},
		xAxis: {
			data: data.data_pie.name
		},
		yAxis: {},
		series: [{
			name: '销量',
			type: 'bar', // 设置图表类型为柱状图，更多图表类型可以参考Echarts教程
			data: data.data_pie.value
		}]
	})
}, 'json')
</script>

方法二：用$.ajax获取JSON数据并绘制图表：

$.ajax({
	type: "GET", //请求方式
	url: "json/ceshi.json", //json文件的存储地址，即该文件的请求路径
	dataType: "json", //数据类型可以为 text xml json  script  jsonp
	success: function(data) {
		//这一部分和上述代码中的内容相同 
		myChart.setOption({
			title: {
				text: "销量图",
				x: "center",
				//x:"center"用于将标题居中，默认左对齐，还有"right",padding和css相似，用于设置上右下左边距，可用padding:5设置四周边距均为5px
				padding: [20, 20, 0, 0]
			},
			legend: {
				data: ["销量"],
				x: "right",
				padding: [20, 20, 0, 40],
			},
			xAxis: {
				data: data.data_pie.name
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'bar', // 设置图表类型为柱状图，更多图表类型可以参考Echarts教程
				data: data.data_pie.value
			}]
		})
	}
});

不同的Echarts模板应该对应不同的json，并且实现过程也有区别，比如柱状图和树状图的区别就显而易见，等日后涉及到相关的应用时再做改进吧！