echarts是一個非常好用的數據可視化工具,它可以通過調用json數據來生成各種各樣的圖表,其中包括平行坐標系。
// json數據格式 { "dimensions": [ "品牌", "價格", "銷量", "評分" ], "data": [ [ "Apple", 8999, 10000, 4.7 ], [ "Huawei", 4999, 8000, 4.5 ], [ "Xiaomi", 2999, 12000, 4.3 ], [ "Samsung", 6999, 6000, 4.2 ] ] } // echarts初始化代碼 var myChart = echarts.init(document.getElementById('main')); // 配置項 option = { parallelAxis: [ {dim: 0, name: '品牌', type: 'category', data: []}, {dim: 1, name: '價格'}, {dim: 2, name: '銷量'}, {dim: 3, name: '評分'} ], parallel: { left: '5%', right: '10%', bottom: '15%', top: '20%', parallelAxisDefault: { type: 'value', nameLocation: 'end' } }, series: [{ name: '', type: 'parallel', data: [] }] }; // 異步加載數據 $.get('data.json').done(function (data) { myChart.setOption({ parallelAxis: [ {dim: 0, name: '品牌', type: 'category', data: data.dimensions}, {dim: 1, name: '價格'}, {dim: 2, name: '銷量'}, {dim: 3, name: '評分'} ], series: [{ data: data.data }] }); });
以上是調用json數據生成echarts平行坐標系的示例代碼。通過加載json數據,我們可以動態生成平行坐標系的軸和數據,并在頁面上展示出來。同時,echarts提供了豐富的配置項,可以根據個人需求進行調整,生成適合自己的圖表。