Parallel Nutrients--平行坐标图.html

最新推荐文章于 2024-04-23 22:01:34 发布

墨咖

最新推荐文章于 2024-04-23 22:01:34 发布

阅读量405

点赞数

分类专栏：编程工具使用文章标签： Parallel Nutrients 平行坐标图 Echarts

工具使用同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

编程

2 篇文章 0 订阅

订阅专栏

一个HTML页面展示平行坐标图，测试用

如果不想测试可以直接下载压缩包，解压就可以用

html页面代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="dist/echarts.js"></script>
		<script src="dist/jquery-3.4.1.js"></script>
		<script src="dist/extension/dataTool.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 1024px;height:768px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;
var indices = {
    name: 0,
    group: 1,
    id: 16
};
var schema = [
    {name: 'name', index: 0},
    {name: 'group', index: 1},
    {name: 'protein', index: 2},
    {name: 'calcium', index: 3},
    {name: 'sodium', index: 4},
    {name: 'fiber', index: 5},
    {name: 'vitaminc', index: 6},
    {name: 'potassium', index: 7},
    {name: 'carbohydrate', index: 8},
    {name: 'sugars', index: 9},
    {name: 'fat', index: 10},
    {name: 'water', index: 11},
    {name: 'calories', index: 12},
    {name: 'saturated', index: 13},
    {name: 'monounsat', index: 14},
    {name: 'polyunsat', index: 15},
    {name: 'id', index: 16}
];

//把json格式的data粘贴在这里就可以了（原谅我不会从这里加载本地json文件）
var data = [这里粘贴json文件];

var groupCategories = [];
var groupColors = [];


normalizeData(data);

myChart.setOption(option = getOption(data));




function normalizeData(originData) {
    var groupMap = {};
    originData.forEach(function (row) {
        var groupName = row[indices.group];
        if (!groupMap.hasOwnProperty(groupName)) {
            groupMap[groupName] = 1;
        }
    });

    originData.forEach(function (row) {
        row.forEach(function (item, index) {
            if (index !== indices.name
                && index !== indices.group
                && index !== indices.id
            ) {
                // Convert null to zero, as all of them under unit "g".
                row[index] = parseFloat(item) || 0;
            }
        });
    });

    for (var groupName in groupMap) {
        if (groupMap.hasOwnProperty(groupName)) {
            groupCategories.push(groupName);
        }
    }
    var hStep = Math.round(300 / (groupCategories.length - 1));
    for (var i = 0; i < groupCategories.length; i++) {
        groupColors.push(echarts.color.modifyHSL('#5A94DF', hStep * i));
    }
}

function getOption(data) {

    var lineStyle = {
        normal: {
            width: 0.5,
            opacity: 0.05
        }
    };

    return {
        backgroundColor: '#333',
        tooltip: {
            padding: 10,
            backgroundColor: '#222',
            borderColor: '#777',
            borderWidth: 1,
            formatter: function (obj) {
                var value = obj[0].value;
                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                    + schema[1].name + '：' + value[1] + '<br>'
                    + schema[2].name + '：' + value[2] + '<br>'
                    + schema[3].name + '：' + value[3] + '<br>'
                    + schema[4].name + '：' + value[4] + '<br>'
                    + schema[5].name + '：' + value[5] + '<br>'
                    + schema[6].name + '：' + value[6] + '<br>';
            }
        },
        title: [
            {
                text: 'Groups',
                top: 0,
                left: 0,
                textStyle: {
                    color: '#fff'
                }
            }
        ],
        visualMap: {
            show: true,
            type: 'piecewise',
            categories: groupCategories,
            dimension: indices.group,
            inRange: {
                color: groupColors //['#d94e5d','#eac736','#50a3ba']
            },
            outOfRange: {
                color: ['#ccc'] //['#d94e5d','#eac736','#50a3ba']
            },
            top: 20,
            textStyle: {
                color: '#fff'
            },
            realtime: false
        },
        parallelAxis: [
            {dim: 16, name: schema[16].name, scale: true, nameLocation: 'end'},
            {dim: 2, name: schema[2].name, nameLocation: 'end'},
            {dim: 4, name: schema[4].name, nameLocation: 'end'},
            {dim: 3, name: schema[3].name, nameLocation: 'end'},
            {dim: 5, name: schema[5].name, nameLocation: 'end'},
            {dim: 6, name: schema[6].name, nameLocation: 'end'},
            {dim: 7, name: schema[7].name, nameLocation: 'end'},
            {dim: 8, name: schema[8].name, nameLocation: 'end'},
            {dim: 9, name: schema[9].name, nameLocation: 'end'},
            {dim: 10, name: schema[10].name, nameLocation: 'end'},
            {dim: 11, name: schema[11].name, nameLocation: 'end'},
            {dim: 12, name: schema[12].name, nameLocation: 'end'},
            {dim: 13, name: schema[13].name, nameLocation: 'end'},
            {dim: 14, name: schema[14].name, nameLocation: 'end'},
            {dim: 15, name: schema[15].name, nameLocation: 'end'}
        ],
        parallel: {
            left: 280,
            top: 20,
            // top: 150,
            // height: 300,
            width: 400,
            layout: 'vertical',
            parallelAxisDefault: {
                type: 'value',
                name: 'nutrients',
                nameLocation: 'end',
                nameGap: 20,
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 14
                },
                axisLine: {
                    lineStyle: {
                        color: '#aaa'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#777'
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                },
                realtime: false
            }
        },
        animation: false,
        series: [
            {
                name: 'nutrients',
                type: 'parallel',
                lineStyle: lineStyle,
                inactiveOpacity: 0,
                activeOpacity: 0.01,
                progressive: 500,
                smooth: true,
                data: data
            }
        ]
    };
}


			myChart.setOption(option);
		</script>
	</body>

</html>

参考连接：

1、官方链接：https://echarts.baidu.com/examples/editor.html?c=parallel-nutrients

2、其他博客：https://blog.csdn.net/qq_20042935/article/details/89845205