基于 ECharts 制作简历上的 “技能自评图”
目录
基于 ECharts 制作简历上的 “技能自评图”
0.1 背景
最近上课学到前端数据可视化的内容，发现新大陆，想到可以用来改进一下简历的 “技能自评图” ，之前只是用 Excel 做的雷达图，现在 get 了新技能，正好可以用上。
0.2 ECharts、D3.js、HighCharts介绍
这几个是用得比较多的做前端数据可视化的项目，简单对比一下：
| 比较 | ECharts | D3.js | HighCharts |
|---|---|---|---|
| 授权方式 | Apache License 2.0 | BSD license | 商业化 非商用免费： (CC) Attribution-Non-Commercial license. |
| 中文支持 | 最成熟的中文社区 | 成熟的中文资料 | 国内有代理商，有中文站、技术支持、社区…… |
| 上手难度 | 上手最简单 | 上手相对难 | 上手一般 |
| 特点 | 即使几乎不会 js ， 也能用模板做出各种不错的图表 |
如果 js 功底好， 能做很多高级运用 我看到有人在用这个玩图论😮 |
图标样式很好看 有一些成熟模块： HighCharts Stock HighCharts Maps HighCharts Gantt |
目前我前端还不熟，英语也是半生不熟的，所以就选用了上手比较方便的 ECharts 。
- Apache ECharts 的前身是百度 Echarts 。
- 2018年1月16日，ECharts 进入 Apache Incubator 进行孵化。
- 2020年12月16日，ECharts 在孵化器毕业，成为 Apache 软件基金会的顶级项目。
- 2021年1月26日晚，Apache 基金会官方宣布 ECharts 项目正式毕业。1月28日，ECharts 5 线上发布会举行。
0.3 成效
用 “南丁格尔玫瑰图” 模板做的，这是截图：
武功习得程度)
代码：
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
</body>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
backgroundColor: '#2c343c',
// 标题
title: {
text: '武功习得程度',
textStyle: {
color: 'AliceBlue',
fontSize: '2em',
fontWeight: "600"
},
left: 'center',
top: '2%'
},
// 图例
legend: {
// 竖排
orient: 'vertical',
top: '10%',
left: '12%',
// center: ['10%', '15%'], // 不支持中心定位
icon: 'pin',
// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
textStyle: {
color: 'GhostWhite',
fontSize: '1em',
fontWeight: "200"
},
},
// 图形
series: [{
type: 'pie',
// name: '面积模式',
radius: [80, 300],
// 起始角度
startAngle: 130,
// 绘制图形的位置，基于中心点定位
center: ['57%', '50%'],
// roseType: 'area',
roseType: 'radius',
itemStyle: {
borderRadius: 2
},
legendHoverLink: true,
// selectedOffset: 100,
avoidLabelOverlap: true,
// 标签：各扇区的说明
label: {
// position: 'inside',
formatter: '{b}: {c}分',
// rotate: true
fontWeight: 500,
fontSize: '1.5em'
},
// 标签连接线
labelLine: {
// show: false
minTurnAngle: 90,
maxSurfaceAngle: 90,
lineStyle: {}
},
// 扇区
itemStyle: {
},
// 扇区被激活时
emphasis: {
scale: true,
scaleSize: 10,
itemStyle: {
borderType: 'solid',
borderColor: '#ffffff',
borderWidth: 2
}
},
// 数据
data: [{
value: 100,
name: '少林长拳'
}, {
value: 80,
name: '降龙十八掌'
// itemStyle: {
// color: 'olive',
// }
}, {
value: 95,
name: '打狗棍法'
}, {
value: 60,
name: '六脉神剑'
}, {
value: 90,
name: '凌波微步'
}, {
value: 70,
name: '北冥神功'
}, {
value: 75,
name: '小无相功'
}, {
value: 85,
name: '天山六阳掌'
}, {
value: 80,
name: '天山折梅手'
}, {
value: 60,
name: '独孤九剑'
}, {
value: 80,
name: '九阴真经'
}, {
value: 75,
name: '九阳真经'
}, {
value: 60,
name: '乾坤大挪移'
}, {
value: 35,
name: '易筋经'
}, {
value: 20,
name: '如来神掌'
}, {
value: 30,
name: '御剑飞行'
}]
}],
// 颜色
color: [
'#00af3e',
'#fdd666',
'#b51f29',
'#96b8db',
'#6a2c70',
'#00a4e8',
'#b1b134',
'#f4979c',
'#165b65',
'#91be3e',
'#b24f3f',
'#697d99',
'#dc9018',
'#e31a22',
'#96cbb3',
'#f58268'
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
还有改进的想法，等有时间了，js玩的更溜了再进行。