Echarts绘图使用经验
摘要
1.如何查找echarts相对路径中的数据文件(针对动态加载)；
2.他山之石可以攻玉(通过类比echarts其他代码中的相同键值对的书写，做相同字段的静态直接替换，或者对近义词字段直接做替换来绘图)
1.查找echarts相对路径中的数据文件(针对动态加载)
以 https://echarts.baidu.com/echarts2/doc/example/webkit-dep2.html 这个和弦图为例，右键"查看元素">“程序员开发工具(左上角的小箭头)”>选中待查找字段"data/webkit-dep.json">定位到html脚本代码"data/webkit-dep.json">“网络”>过滤器输入栏中输入"data/webkit-dep.json">“刷新页面”>通过"GET"的方式，我们就找到了相对路径的数据，实际请求的绝对路径：https://echarts.baidu.com/echarts2/doc/example/data/webkit-dep.json 。看到这里，以后你就知道你要查找的所有例程，他们的数据文件的前缀都是:https://echarts.baidu.com/echarts2/doc/example/ 。
2.字段的同义词、近义词替换(静态的直接改写和数据替换)
针对静态数据，主要的部分就是data、nodes、links、groups(==category)等几个字段。
2.1.修改前的代码:
option = {
title : {
text: 'webkit内核依赖',
subtext: '数据来自网络',
x:'right',
y:'bottom'
},
tooltip : {
trigger: 'item',
formatter : "{b}"
},
toolbox: {
show : true,
feature : {
restore : {show: true},
magicType: {
show: true,
type: ['force', 'chord'],
option: {
chord: {
minRadius : 2,
maxRadius : 10,
ribbonType: false,
itemStyle: {
normal: {
label: {
show: true,
rotate: true
},
chordStyle: {
opacity: 0.2
}
}
}
},
force: {
minRadius : 5,
maxRadius : 8,
itemStyle : {
normal : {
label: {
show: false
},
linkStyle : {
opacity : 0.5
}
}
}
}
}
},
saveAsImage : {show: true}
}
},
legend : {
######################需要修改的部分begin##############################
data : ['HTMLElement', 'WebGL', 'SVG', 'CSS', 'Other'],
######################需要修改的部分end##############################
orient : 'vertical',
x : 'left'
},
noDataEffect: 'none',
series :[{
//FIXME No data
type: 'force',
}],
};
$.ajax({
url: 'data/webkit-dep.json',
dataType: 'json',
success: function (data) {
option.series[0] = {
type: 'chord',
ribbonType: false,
name: 'webkit-dep',
itemStyle: {
normal: {
label: {
show: true,
rotate: true
},
chordStyle: {
opacity: 0.2
}
}
},
######################需要修改的部分begin##############################
categories: data.categories,
nodes: data.nodes,
links: data.links,
######################需要修改的部分end##############################
minRadius: 2,
maxRadius: 10,
gravity: 1.1,
scaling: 1.1,
steps: 20,
large: true,
useWorker: true,
coolDown: 0.995
};
myChart.setOption(option);
myChart.hideLoading();
}
});
2.2.修改后的代码
option = {
title : {
text: 'webkit内核依赖',
subtext: '数据来自网络',
x:'right',
y:'bottom'
},
tooltip : {
trigger: 'item',
formatter : "{b}"
},
toolbox: {
show : true,
feature : {
restore : {show: true},
magicType: {
show: true,
type: ['force', 'chord'],
option: {
chord: {
minRadius : 2,
maxRadius : 10,
ribbonType: false,
itemStyle: {
normal: {
label: {
show: true,
rotate: true
},
chordStyle: {
opacity: 0.2
}
}
}
},
force: {
minRadius : 5,
maxRadius : 8,
itemStyle : {
normal : {
label: {
show: false
},
linkStyle : {
opacity : 0.5
}
}
}
}
}
},
saveAsImage : {show: true}
}
},
legend : {
######################需要修改的部分begin##############################
data:['root','A', 'B'],
######################需要修改的部分end##############################
orient : 'vertical',
x : 'left'
},
noDataEffect: 'none',
series :[{
//FIXME No data
type: 'force',
}],
};
$.ajax({
url: 'data/webkit-dep.json',
dataType: 'json',
success: function (data) {
option.series[0] = {
type: 'chord',
ribbonType: false,
name: 'webkit-dep',
itemStyle: {
normal: {
label: {
show: true,
rotate: true
},
chordStyle: {
opacity: 0.2
}
}
},
######################需要修改的部分begin##############################
categories:['root','A', 'B'],
nodes: [
{name:'root'},
{name:'A'},
{name:'B'},
{name:'d1'},
{name:'d2'},
{name:'d3'},
{name:'d4'}
],
links: [
{source: 'root', target: 'A', weight:1, name: '效力'},
{source: 'root', target: 'B', weight:1, name: '效力'},
{source: 'A', target: 'd1', weight:1, name: '效力'},
{source: 'A', target: 'd3', weight:1, name: '效力'},
{source: 'B', target: 'd2', weight:1, name: '效力'},
{source: 'B', target: 'd4', weight:1, name: '效力'},
// Ribbon Type 的和弦图每一对节点之间必须是双向边
{target: 'A', source: 'root', weight: 1},
{target: 'B', source: 'root', weight: 1},
{source: 'd1', target: 'A', weight:1, name: '效力'},
{source: 'd3', target: 'A', weight:1, name: '效力'},
{source: 'd2', target: 'B', weight:1, name: '效力'},
{source: 'd4', target: 'B', weight:1, name: '效力'
],
######################需要修改的部分end##############################
minRadius: 2,
maxRadius: 10,
gravity: 1.1,
scaling: 1.1,
steps: 20,
large: true,
useWorker: true,
coolDown: 0.995
};
myChart.setOption(option);
myChart.hideLoading();
}
});