持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情
接CMS数据可视化02
柱状图使用接口数据
- 这个接口和班级概况一样，服务器已经将数据整理完毕。
- 所以我们前端开发者，只需要调用接口获取数据，并将数据传递给 echarts 即可。
- 不过，接口需要一个 batch 参数（考试的次数），所以需要先将下拉菜单处理一下。
创建柱状图的函数，设置形参接收数据。并把数据应用到X轴及series中。
// 形参，直接解构赋值
+function barChart({ avgScore, group, gt60, gt80, lt60 }) {
...... 省略其他代码
let option = {
xAxis: {
type: 'category',
+ data: group, // X轴使用组名 1组 2组 3组 ......
},
series: [
{
+ data: avgScore, // 第一个柱子，使用平均分
type: 'bar',
barWidth: '15%',
name: '平均分',
yAxisIndex: 0,
},
{
+ data: lt60, // 第二个柱子，使用小于60分人数数据
type: 'bar',
barWidth: '15%',
name: '低于60分人数',
yAxisIndex: 1,
},
{
+ data: gt60, // 第三个柱子，使用大于60小于80分人数数据
type: 'bar',
barWidth: '15%',
name: '60~80分人数',
yAxisIndex: 1,
},
{
+ data: gt80, // 第四个柱子，使用大于80分人数数据
type: 'bar',
barWidth: '15%',
name: '80分以上人数',
yAxisIndex: 1,
}
]
}
}
- barChart(); // 这里就不要再调用函数了
折线图使用接口数据
为了断链数据处理能力。所以并没有提供 “返回折线图数据” 的接口。我们需要调用获取学生接口，然后自己处理数据。
调用“获取学生”接口，然后处理
// 获取学员信息 ==> 1、提取期望薪资和实际薪资，做折线图; 2、提取地区，做饼图; 3、提取地区和经纬度，做地图
axios.get('/student/list').then(({ data: res }) => {
let { code, data } = res;
if (code === 0) {
// console.log(data);
// 折线图所需数据，检查折线图需要的数据格式
// (x轴需要一个数组，放姓名)
// (两条线分别需要一个数组，放期望薪资和实际薪资)
let lineData = {
xAxis: [],
salary: [],
truesalary: []
};
// 遍历data，将所需的数据取出，放到前面定义好的数组中
data.forEach(item => {
lineData.xAxis.push(item.name);
lineData.salary.push(item.salary);
lineData.truesalary.push(item.truesalary);
});
// 遍历结束，得到我们所需的数据
// 数据处理好，调用图表函数
lineChart(lineData);
}
})
折线图函数 lineChart 中，设置形参接收数据并使用。
+function lineChart({ xAxis, salary, truesalary }) {
let myChart = echarts.init($('.line')[0]);
let option = {
...... 其他配置项省略
xAxis: {
type: 'category',
boundaryGap: false,
+ data: xAxis
},
// 数据部分
series: [
{
name: '期望薪资',
type: 'line',
smooth: true, // 表示使用平滑曲线
symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
itemStyle: { // 单独控制这条线的颜色
color: '#ee6666'
},
+ data: salary
},
{
name: '实际薪资',
type: 'line',
smooth: true,
symbol: 'none',
itemStyle: { // 单独控制这条线的颜色
color: '#5470c6'
},
+ data: truesalary
}
]
};
myChart.setOption(option);
}
- lineChart(); // 这里不要再调用函数了
地图使用接口数据
地图中使用的数据，只有地名和经纬度。这些数据在 “获取学生”接口中都有，但还是需要我们自己整理。锻炼数据处理能力。
由于前面已经调用过获取学生接口了，所以不用重新发送请求获取数据了，只需要处理即可。
// 分析地图需要什么格式的数据。
// 需要两组数据
// 第一组数据
let chinaGeoCoordMap = {
'北京市': [116.4551, 40.2539],
'内蒙古': [110.3467, 41.4899],
"吉林": [125.8154, 44.2584],
// ......
}
// 第二组数据
let chinaDatas = [
[{
name: '黑龙江11',
value: 0
}], [{
name: '内蒙古',
value: 0
}],
// ......
]
上述数据，用的是省的名字，实际上全部用市的名字或者县的名字都可以。只要对应上即可。
当请求到学生数据之后
// 获取学员信息 ==> 1、提取期望薪资和实际薪资，做折线图; 2、提取地区，做饼图; 3、提取地区和经纬度，做地图
axios.get('/student/list').then(({ data: res }) => {
let { code, data } = res;
if (code === 0) {
// console.log(data);
// 折线图所需数据，检查折线图需要的数据格式
// (x轴需要一个数组，放姓名)
// (两条线分别需要一个数组，放期望薪资和实际薪资)
let lineData = {
xAxis: [],
salary: [],
truesalary: []
};
+ // 地图，第一组数据
+ let chinaGeoCoordMap = { '北京市': [116.4551, 40.2539] };
+ // 地图，第二组数据
+ let chinaDatas = []
// 遍历data，将所需的数据取出，放到前面定义好的数组中
data.forEach(item => {
lineData.xAxis.push(item.name);
lineData.salary.push(item.salary);
lineData.truesalary.push(item.truesalary);
+ chinaGeoCoordMap[item.county] = [item.jing, item.wei];
+ chinaDatas.push([{name: item.county, value: 0}]);
});
// 遍历结束，得到我们所需的数据
// 数据处理好，调用图表函数
lineChart(lineData);
+ mapChart(chinaGeoCoordMap, chinaDatas);
}
})
地图函数中使用数据：
+function mapChart(chinaGeoCoordMap, chinaDatas) {
- var chinaGeoCoordMap = {.......}
- var chinaDatas = [......]
let myChart = echarts.init($('.map')[0]);
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = chinaGeoCoordMap[dataItem[0].name];
+ var toCoord = [116.4551, 40.2539]; // 目标点 经纬度（北京市）
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
var series = [];
+ [['北京市', chinaDatas]].forEach(function (item, i) { // 写好北京市，目标点
// 其他代码省略，无需修改
}
- mapChart(); // 这里不要再调用函数了
饼图使用接口数据
饼图使用的数据格式如下
data: [
{ name: '河北省', value: 12 },
{ name: '广东省', value: 12 },
{ name: '上海市', value: 12 },
{ name: '江西省', value: 12 },
// ......
]
饼图使用的数据，也需要通过 获取学生 接口得到，并需要自行处理。
// 获取学员信息 ==> 1、提取期望薪资和实际薪资，做折线图; 2、提取地区，做饼图; 3、提取地区和经纬度，做地图
axios.get('/student/list').then(({ data: res }) => {
let { code, data } = res;
if (code === 0) {
// console.log(data);
// 折线图所需数据，检查折线图需要的数据格式
// (x轴需要一个数组，放姓名)
// (两条线分别需要一个数组，放期望薪资和实际薪资)
let lineData = {
xAxis: [],
salary: [],
truesalary: []
};
// 地图，第一组数据
let chinaGeoCoordMap = { '北京市': [116.4551, 40.2539] };
// 地图，第二组数据
let chinaDatas = []
+ // 饼图数据
+ let pieData = [];
// 遍历data，将所需的数据取出，放到前面定义好的数组中
data.forEach(item => {
lineData.xAxis.push(item.name);
lineData.salary.push(item.salary);
lineData.truesalary.push(item.truesalary);
chinaGeoCoordMap[item.county] = [item.jing, item.wei];
chinaDatas.push([{name: item.county, value: 0}]);
+ let i;
+ if ((i = pieData.findIndex(v => v.name === item.province)) >= 0) {
+ pieData[i].value++;
+ } else {
+ pieData.push({ name: item.province, value: 1 });
+ }
});
// 遍历结束，得到我们所需的数据
// 数据处理好，调用图表函数
lineChart(lineData);
mapChart(chinaGeoCoordMap, chinaDatas);
+ pieChart(pieData);
}
})
饼图函数，接收数据并使用：
+function pieChart(pieData) {
let myChart = echarts.init($('.pie')[0]);
let option = {
series: [
{
name: '各地人员分布',
type: 'pie', // pie 表示饼图
radius: ['10%', '65%'], // 内外圈的半径
center: ['50%', '50%'], // 中心点
roseType: 'area', // area表示面积模式，radius表示半径模式
itemStyle: { // 每一项的设置
borderRadius: 4, // 扇形边缘圆角设置
},
+ data: pieData
}
]
};
}
最后是原图
