各属性的平行坐标轴ECharts Gallery

20:11:45图表已生成
代码
// Schema:
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
var dataBJ = [
    [1,55,9,56,0.46,18,6,"品牌B"],
    [2,25,11,21,0.65,34,9,"品牌A"],
    [3,56,7,63,0.3,14,5,"品牌B"],
    [4,33,7,29,0.33,16,6,"品牌A"],
    [5,42,24,44,0.76,40,16,"品牌A"],
    [6,82,58,90,1.77,68,33,"品牌B"],
    [7,74,49,77,1.46,48,27,"品牌B"],
    [8,78,55,80,1.29,59,29,"品牌B"],
    [9,267,216,280,4.8,108,64,"品牌E"],
    [10,185,127,216,2.52,61,27,"品牌D"],
    [11,39,19,38,0.57,31,15,"品牌A"],
    [12,41,11,40,0.43,21,7,"品牌A"],
    [13,64,38,74,1.04,46,22,"品牌B"],
    [14,108,79,120,1.7,75,41,"品牌C"],
    [15,108,63,116,1.48,44,26,"品牌C"],
    [16,33,6,29,0.34,13,5,"品牌A"],
    [17,94,66,110,1.54,62,31,"品牌B"],
    [18,186,142,192,3.88,93,79,"品牌D"],
    [19,57,31,54,0.96,32,14,"品牌B"],
    [20,22,8,17,0.48,23,10,"品牌A"],
    [21,39,15,36,0.61,29,13,"品牌A"],
    [22,94,69,114,2.08,73,39,"品牌B"],
    [23,99,73,110,2.43,76,48,"品牌B"],
    [24,31,12,30,0.5,32,16,"品牌A"],
    [25,42,27,43,1,53,22,"品牌A"],
    [26,154,117,157,3.05,92,58,"品牌D"],
    [27,234,185,230,4.09,123,69,"品牌E"],
    [28,160,120,186,2.77,91,50,"品牌D"],
    [29,134,96,165,2.76,83,41,"品牌C"],
    [30,52,24,60,1.03,50,21,"品牌B"],
    [31,46,5,49,0.28,10,6,"品牌A"]
];

var dataGZ = [
    [1,26,37,27,1.163,27,13,"品牌A"],
    [2,85,62,71,1.195,60,8,"品牌B"],
    [3,78,38,74,1.363,37,7,"品牌B"],
    [4,21,21,36,0.634,40,9,"品牌A"],
    [5,41,42,46,0.915,81,13,"品牌A"],
    [6,56,52,69,1.067,92,16,"品牌B"],
    [7,64,30,28,0.924,51,2,"品牌B"],
    [8,55,48,74,1.236,75,26,"品牌B"],
    [9,76,85,113,1.237,114,27,"品牌B"],
    [10,91,81,104,1.041,56,40,"品牌B"],
    [11,84,39,60,0.964,25,11,"品牌B"],
    [12,64,51,101,0.862,58,23,"品牌B"],
    [13,70,69,120,1.198,65,36,"品牌B"],
    [14,77,105,178,2.549,64,16,"品牌B"],
    [15,109,68,87,0.996,74,29,"品牌C"],
    [16,73,68,97,0.905,51,34,"品牌B"],
    [17,54,27,47,0.592,53,12,"品牌B"],
    [18,51,61,97,0.811,65,19,"品牌B"],
    [19,91,71,121,1.374,43,18,"品牌B"],
    [20,73,102,182,2.787,44,19,"品牌B"],
    [21,73,50,76,0.717,31,20,"品牌B"],
    [22,84,94,140,2.238,68,18,"品牌B"],
    [23,93,77,104,1.165,53,7,"品牌B"],
    [24,99,130,227,3.97,55,15,"品牌B"],
    [25,146,84,139,1.094,40,17,"品牌C"],
    [26,113,108,137,1.481,48,15,"品牌C"],
    [27,81,48,62,1.619,26,3,"品牌B"],
    [28,56,48,68,1.336,37,9,"品牌B"],
    [29,82,92,174,3.29,0,13,"品牌B"],
    [30,106,116,188,3.628,101,16,"品牌C"],
    [31,118,50,0,1.383,76,11,"品牌C"]
];

var dataSH = [
    [1,91,45,125,0.82,34,23,"品牌B"],
    [2,65,27,78,0.86,45,29,"品牌B"],
    [3,83,60,84,1.09,73,27,"品牌B"],
    [4,109,81,121,1.28,68,51,"品牌C"],
    [5,106,77,114,1.07,55,51,"品牌C"],
    [6,109,81,121,1.28,68,51,"品牌C"],
    [7,106,77,114,1.07,55,51,"品牌C"],
    [8,89,65,78,0.86,51,26,"品牌B"],
    [9,53,33,47,0.64,50,17,"品牌B"],
    [10,80,55,80,1.01,75,24,"品牌B"],
    [11,117,81,124,1.03,45,24,"品牌C"],
    [12,99,71,142,1.1,62,42,"品牌B"],
    [13,95,69,130,1.28,74,50,"品牌B"],
    [14,116,87,131,1.47,84,40,"品牌C"],
    [15,108,80,121,1.3,85,37,"品牌C"],
    [16,134,83,167,1.16,57,43,"品牌C"],
    [17,79,43,107,1.05,59,37,"品牌B"],
    [18,71,46,89,0.86,64,25,"品牌B"],
    [19,97,71,113,1.17,88,31,"品牌B"],
    [20,84,57,91,0.85,55,31,"品牌B"],
    [21,87,63,101,0.9,56,41,"品牌B"],
    [22,104,77,119,1.09,73,48,"品牌C"],
    [23,87,62,100,1,72,28,"品牌B"],
    [24,168,128,172,1.49,97,56,"品牌D"],
    [25,65,45,51,0.74,39,17,"品牌B"],
    [26,39,24,38,0.61,47,17,"品牌A"],
    [27,39,24,39,0.59,50,19,"品牌A"],
    [28,93,68,96,1.05,79,29,"品牌B"],
    [29,188,143,197,1.66,99,51,"品牌D"],
    [30,174,131,174,1.55,108,50,"品牌D"],
    [31,187,143,201,1.39,89,53,"品牌D"]
];

var schema = [
    {name: 'date', index: 0, text: '商品'},
    {name: 'AQIindex', index: 1, text: '属性2'},
    {name: 'PM25', index: 2, text: '属性3'},
    {name: 'PM10', index: 3, text: '属性4'},
    {name: 'CO', index: 4, text: ' 属性5'},
    {name: 'NO2', index: 5, text: '属性6'},
    {name: 'SO2', index: 6, text: '属性7'},
    {name: '品牌', index: 7, text: '品牌'}
];

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

option = {
    // backgroundColor: '#333',
    legend: {
        top:0,
        left: 8,
        data: ['天猫', '京东', '小红书'],
        itemGap: 20,
        textStyle: {
            color: '#333',
            fontSize: 14
        }
    },
    grid:{
        top:48,
        left:24,
        bottom:24,
        right:24,
    },
    tooltip: {
        padding: 10,
        backgroundColor: '#333',
        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">'
                + obj[0].seriesName + ' ' + value[0] + '商品：'
                + value[7]
                + '</div>'
                + schema[1].text + '：' + value[1] + '<br>'
                + schema[2].text + '：' + value[2] + '<br>'
                + schema[3].text + '：' + value[3] + '<br>'
                + schema[4].text + '：' + value[4] + '<br>'
                + schema[5].text + '：' + value[5] + '<br>'
                + schema[6].text + '：' + value[6] + '<br>';
        }
    },
    // dataZoom: {
    //     show: true,
    //     orient: 'vertical',
    //     parallelAxisIndex: [0]
    // },
    parallelAxis: [
        {dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},
        {dim: 1, name: schema[1].text},
        {dim: 2, name: schema[2].text},
        {dim: 3, name: schema[3].text},
        {dim: 4, name: schema[4].text},
        {dim: 5, name: schema[5].text},
        {dim: 6, name: schema[6].text},
        {dim: 7, name: schema[7].text,
        type: 'category', data: ['品牌A', '品牌B', '品牌C', '品牌D', '品牌E', '品牌F']}
    ],
    // visualMap: {
    //     show: true,
    //     min: 0,
    //     max: 250,
    //     right: 20, 
    //     bottom: 30,
    //     dimension: 2,
    //     calculable: true, 
    //     inRange: {
    //         color: ['#d94e5d','#eac736','#50a3ba'].reverse()
    //     },
    //     text: ['PM 2.5', ''],
    //     textGap: 20,
    //     textStyle: {
    //         color: '#fff'
    //     }
    // },
    parallel: {
        left: 24,
        right: 64,
        bottom: 16,
        top:64,
        parallelAxisDefault: {
            type: 'value',
            name: 'AQI指数',
            nameLocation: 'end',
            nameGap: 20,
            nameTextStyle: {
                color: '#333',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: '#aaa'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#333'
                }
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#333'
                }
            }
        }
    },
    series: [
        {
            name: '天猫',
            type: 'parallel',
            lineStyle: lineStyle,
            data: dataBJ
        },
        {
            name: '京东',
            type: 'parallel',
            lineStyle: lineStyle,
            data: dataSH
        },
        {
            name: '小红书',
            type: 'parallel',
            lineStyle: lineStyle,
            data: dataGZ
        }
    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
