echarts图表中数据太多，可以将数据从页面配置项中拿出来，放入到单独的json文件中，并对其进行引用。简洁页面代码的同时也易于管理。
异步加载
入门示例中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function(data) {
// data 的结构:
// {
// categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
// values: [5, 20, 36, 10, 10, 20]
// }
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {},
xAxis: {
data: data.categories
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: data.values
}
]
});
});参考来源：异步数据的加载与动态更新
实例
以引入数据文件salary_data.json为例，名称可以自定义。
在需要引入数据文件的echarts配置项中，写入引入路径代码：
一般写在定义option后
<script type="text/javascript">
var dom = document.getElementById("container"); var myChart = echarts.init(dom);
var app = {};
var option;
//在此配置项位置引入路径，如需引入网络路径则：
//var ROOT_PATH = 'https://XXX'
//$.get(ROOT_PATH + '/salary_data.json/.json', function (data) {
//myChart.setOption( (
//引入本地路径，如根目录下salary_data.json文件
$.get('/salary_list.json', function (salary_data) {
myChart.setOption(
(
option = {xxx；
...}
))})
// 即将配置项option包起来，对应的括弧在此位置结束
if (option && typeof option === 'object') {
myChart.setOption(option);
}
//myChart名称需一一对应
</script>如果一个页面内有多个独立的echarts图表、或者多个独立的echarts配置脚本（scripts），可以使用同一个数据json文件中的数据。但是需要在页面中每个配置脚本中加入引入路径代码。且保证每个charts名称不能一致，如改为 sheet1Chart.setOption、 sheet2Chart.setOption：
// 第一个脚本
<script type="text/javascript">
XXX;
$.get('/salary_data.json', function (salary_data) {
sheet1Chart.setOption(
(
XXX;
)) })
if (option && typeof option === 'object') {
sheet1Chart.setOption(option);
}
</script>
// 第二个脚本
<script type="text/javascript">
XXX;
$.get('/salary_data.json', function (salary_data) {
sheet2Chart.setOption(
(
XXX;
)) })
if (option && typeof option === 'object') {
sheet2Chart.setOption(option);
}
</script>
在hexo主题目录下source/（hexo根目录）下新建一个数据文件salary_data.json，输入数据格式：
{
"数据名1": ["1","2","3","4","5"],
"数据名2": ["1","2","3","4","5"],
"数据名3": ["1","2","3","4","5"],
"数据名4": ["1","2","3","4","5"],
"数据名5": ["1","2","3","4","5"]
}
// 数据名使用字母字符，只是为了便于理解使用的数据名。在需要使用数据的配置项中即可直接使用数据：
series: [
{
name: '数据名1',
data: salary_data.数据名1
},
{
name: '数据名2',
data: salary_data.数据名2
},
{
name: '数据名3',
data: salary_data.数据名3
},
{
name: '数据名4',
data: salary_data.数据名4
},
{
name: '数据名5',
data: salary_data.数据名5
}
]
