「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」。
Echarts在线地址 ：
echarts.apache.org/examples/zh…
预览效果：
代码预览：
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=sankey-simple
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency'
},
data: [{
name: '男'
},
{
name: '华为'
},
{
name: '苹果'
},
{
name: '小米'
},
{
name: 'OPPO'
},
{
name: 'vivo'
},
{
name: '女'
}
],
links: [{
source: '女',
target: 'OPPO',
value: 3
},
{
source: '男',
target: '华为',
value: 5
},
{
source: '男',
target: '小米',
value: 3
},
{
source: '男',
target: '苹果',
value: 5
},
{
source: '女',
target: '小米',
value: 5
},
{
source: '男',
target: 'OPPO',
value: 2
},
{
source: '女',
target: '苹果',
value: 10
},
{
source: '女',
target: '华为',
value: 4
},
]
}
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
需要处理的数据：
links: [{
source: '女',
target: 'OPPO',
value: 3
},
{
source: '男',
target: '华为',
value: 5
},
{
source: '男',
target: '小米',
value: 3
},
{
source: '男',
target: '苹果',
value: 5
},
{
source: '女',
target: '小米',
value: 5
},
{
source: '男',
target: 'OPPO',
value: 2
},
{
source: '女',
target: '苹果',
value: 10
},
{
source: '女',
target: '华为',
value: 4
},
]
想要的效果：
data: [{
name: '男'
},
{
name: '华为'
},
{
name: '苹果'
},
{
name: '小米'
},
{
name: 'OPPO'
},
{
name: 'vivo'
},
{
name: '女'
}
],
处理方法：
const tempData = linksList.map(item => {
console.log(item);
const result = [
{
name:item["source"]
},
{
name:item["target"]
}
]
return result
})
console.log(tempData);// 二维数组：【【{name: "女"}, {name: "OPPO"}】,【{name: "女"}, {name: "OPPO"}】】
console.log(tempData.flat());//[{name: "女"}, {name: "OPPO"}]
//对象数组去重
const unique = (arr) => {
const res = new Map()
return arr.filter(arrItem => !res.has(arrItem.name) && res.set(arrItem.name,1))
}
const data = unique(tempData.flat(),'name')
console.log("finally",data);
