<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#chart-panel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 1000px;
height: 750px;
}
</style>
<script src="./lib/5.5.0/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="chart-panel"></div>
<script type="text/javascript">
//初始化图表对象。
var myChart = echarts.init(document.getElementById('chart-panel'));
//图表配置。
$.get('./json/life-expectancy.json', function (rawData) {
const series = [];
rawData.counties.forEach(function (country) {
const data = rawData.series.map(function (yearData) {
const item = yearData.filter(function (item) {
return item[3] === country;
})[0];
return {
label: {
show: +item[4] % 20 === 0 && +item[4] > 1940,
position: 'top'
},
emphasis: {
label: {
show: true
}
},
name: item[4],
value: item
};
});
var links = data.map(function (item, idx) {
return {
source: idx,
target: idx + 1
};
});
links.pop();
series.push({
name: country,
type: 'graph',
coordinateSystem: 'cartesian2d',
data: data,
links: links,
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: 5,
lineStyle: {
color: '#333'
},
itemStyle: {
borderWidth: 1,
borderColor: '#333'
},
label: {
color: '#333',
position: 'right'
},
symbolSize: 10,
animationDelay: function (idx) {
return idx * 100;
}
});
});
let option = {
toolbox: {
show: true,
feature: {
saveAsImage: {},
},
},
visualMap: {
show: false,
min: 0,
max: 100,
dimension: 1
},
legend: {
data: rawData.counties,
selectedMode: 'single',
right: 100
},
grid: {
left: 30,
bottom: 0,
containLabel: true,
top: 80
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'value',
scale: true
},
dataZoom: {
type: 'inside'
},
series: series
};
//将图表对象和图表配置进行关联。
myChart.setOption(option);
});
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
EChart关系图-GraphLifeExpectancy.rar (4个子文件)
图表
lib
5.5.0
echarts.js 3.21MB
echarts.min.js 1005KB
svg
geo
index.html 4KB
images
json
life-expectancy.json 77KB
共 4 条
- 1
资源评论
图表制作解说(目标1000个图表)
- 粉丝: 844
- 资源: 268
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功