Echats实现可交互拖拽分类式雷达图
不多说直接先上结果。
最终效果图（死亡配色哈哈哈，改，全都可以改，点位置、颜色、文字、大小什么都可以改）
（本文内容涵括：Echats多图表生成、图表隐藏、雷达图图表层颜色调整、图表点拖拽实现、雷达图的拖拽样式；用JavaScript读取excel数据、把字符串数据转成数字类型、再两两组合成组）
闲着也是闲着，还不如琢磨提升效率的事情。
前景提要：如何处理一表需要八项分类、4个层级的数据，用可视化图表展示分布情况？用什么图？如何实现？
当前难题与解决思路：
- 没有相关图表——自己定制
- 图表制作当前靠手工制作，一个一个在PPT贴好，费时费力——靠程序脚本生成
- 相关程序生成的分布不美观——对不合适的点拖拽到合适地方，点要能交互
- 同事设计出身，不懂程序操作——程序要简单易用
出于对标签可拖拽的事，一直心心念，也觉得之前那图实在是太太太丑了，还好，偶然发现Echats中有符合心意的功能。自己这边情况的电脑不能安装任何软件，所以HTML与JavaScript这种可以靠在线网站实现的最适合我现在用了。
参考链接
很好就是这种。可惜没有现成的可用，都是直角坐标系，极坐标系得自己整一个，也没学过JavaScript。不过看起来不难，就直接啃吧。
从官方参考资料知道主要是使用 convertToPixel 这个 API，进行了从数据到“像素坐标”的转换，所以我换一个坐标图无所谓，只要把转换坐标改就行，官方也有考虑到，留着“polar”极坐标系。
改成这样 换成”polar“（我不喜欢dataitem，所以换成item名字）
position: myChart.convertToPixel('polar', item),拖拽功能有现成的，下一步是生成想要的图，我需要的图标签位置和一般雷达图不一样。得亏Echats功能众多，想了个办法——表层图表+隐藏图表。
先准备一个表层的。
标签再建立一个16分层的，隐藏掉轴线与线段，隔段打入标签名字。
Echats实现多图表方法——Examples - Apache ECharts
实现轴线等隐藏，在配置手册也有。
radar: [
{ //表层雷达图
indicator: [
{ name: '', max: 4 },
{ name: '', max: 4 },
{ name: '', max: 4 },
{ name: '', max: 4 },
{ name: '', max: 4 },
{ name: '', max: 4 },
{ name: '', max: 4 },
{ name: '', max: 4 },
],
//调整大小
radius: ["0%", "95%"],
//调整层数，需要4层
splitNumber : 4,
//是否显示坐标轴轴线
axisLine: {
show: true
},
//分层颜色
splitArea: {
areaStyle: {
color: ['rgba(252, 211, 40, 0.68)', 'rgba(250, 178, 30, 0.67)', 'rgba(245, 138, 9, 0.67)', 'rgba(255, 80, 0, 0.66)']
}
}
},
{ //通过标签的雷达图
indicator: [
{ name: '', max: 4 },
{ name: '系统反馈', max: 4 },
{ name: '', max: 4 },
{ name: '内容需求', max: 4 },
{ name: '', max: 4 },
{ name: '功能需求', max: 4 },
{ name: '', max: 4 },
{ name: '信息架构', max: 4 },
{ name: '', max: 4 },
{ name: '交互设计', max: 4 },
{ name: '', max: 4 },
{ name: '信息设计', max: 4 },
{ name: '', max: 4 },
{ name: '界面设计', max: 4 },
{ name: '', max: 4 },
{ name: '视觉呈现', max: 4 },
],
//调整大小
radius: ["0%", "90%"],
//隐藏轴线
axisLine: {
show: false
},
//隐藏分层
splitArea: {
show: false,
},
//线设置为透明
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0)"//不透明度为0
}
},
//标签字体设置
axisName: {
fontWeight: "bold",
fontSize: 15,
color: "rgba(0, 0, 0, 1)"
}
},
],表面功夫做好了，准备用一个雷达图只显示点也隐藏掉图。为什么？因为原本以外两个就够了，但是要移动点，雷达图轴必须是”value“类型——radiusAxis的type和angleAxis。否则用类别形式数据点不能自由移动，或者图表会随着点位置变化而变化（所以要加上max和min限制）。用radar自由度不高也难实现，所以用polar生成。
效果：
代码段：
var data = [];
var symbolSize = 20;
var ban = [
'sada', '1', '2', '3', '4', '5', '6','7','8','9','10','11','12','13','14','15','16'
];
var duan = ['1', '2', '3', '4'];
option = {
polar: {radius: ["0%", "90%"]//大小
},
angleAxis: [{
type: 'value',
data: ban,//分16瓣
min: 1,//固定1到17瓣，这样value类型时才不会图表随点变化
max:17,
boundaryGap: false,//坐标轴两边留白策略
axisLine: {
show: false//隐藏线
}}],
radiusAxis: [{
type: 'value',
data: duan,//分4层
max: 4,
min: 0,
axisLine: {
show: false
},
axisLabel: {
rotate: 45//长度坐标文字倾斜角度
}
}],
series: [
{
//name: 'Punch Cardbbb',
id: 'a',
type: 'scatter',
coordinateSystem: 'polar',
symbolSize: symbolSize,//点大小
data: data//你所需要的数据
}]};把它们合在一起，我再显示出第三层和第一层图表，整个图的底层实现逻辑就是这样的关系。用这种方法实现数据按要求归类，也容易确定相应的坐标数据应该是多少。
雷达图实现。JavaScript也就学了一点基础就直接开敲，可能有些多余的或者格式错误。
代码段
图搞定了，接下来怎么把excel的数据直接用上让它直接生成数据点呢？原表已经处理好了数据，直接引入就行。（注意，实际用时只留数据就行，”y坐标“、”角坐标“要去掉。因为现在读取表只是简单获取）
参考了别人的
jquery获取excel表格数据 - 简书 (jianshu.com)
原本他是生成json类型，但实在是不好用就改成生成csv类型
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
console.log(fromTo);
persons = persons.concat(XLSX.utils.sheet_to_csv(workbook.Sheets[sheet]));
break;
}是为了接下来进行将字符串转换成数字，用parseFloat可以处理浮点数，用parseInt反而把小数点以后去掉了。然后再两个两个打包成一组[1.5,2]这样的。代码实现如下
var shuju =0;
$('#excel-file').change(function(e) {
var files = e.target.files;
var fileReader = new FileReader();
var s = [];
fileReader.onload = function(ev) {
try {
var data = ev.target.result,
workbook = XLSX.read(data, {
type: 'binary'
}), // 以二进制流方式读取得到整份excel表格对象
persons = []; // 存储获取到的数据
} catch (e) {
console.log('文件类型不正确');
return;
}
// 表格的表格范围，可用于判断表头是否数量是否正确
var fromTo = '';
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
console.log(fromTo);
persons = persons.concat(XLSX.utils.sheet_to_csv(workbook.Sheets[sheet]));
break; // 如果只取第一张表，就取消注释这行
}
}
var w = [];
var a = [];
s = persons.toString().split("\n");
s.pop();//莫名其妙数据没少情况下最后多了一个NaN，删掉
//console.log(s);//如果有问题可以取消这里注释看生成了什么
w = s.toString().split(",");
//console.log(w);//如果有问题可以取消这里注释看生成了什么
//变成数字
var turnNum = function(nums){
for(let i=0;i最终生成的result：
最终代码合并一下就是
最终样式，然后就是慢慢一个一个挪了/(ㄒoㄒ)/~~比起之前的python做的图，在HTML用JavaScript的Echats有更多功能和可实现的地方，交互功能比python更容易达到。现在想想之前随机排实在是太丑了。后面再想办法把python的随机加进来和对数据表excel的判断加进来吧。
其实写的时候遇到许多问题，例如为什么点不能交互？数据为什么传递不过来？但现在是完成了才开始写稿，所以有些过程忘记了许多。HTML也就借个框，剩下都是JavaScript完成。