A Coder or a Designer?--Project from Sihan YuanECharts Gallery

20:11:45图表已生成
代码
 var dataCS = [
    [30, 13, 3, 10, 8, 72, 'Hannah Abbott '],
    [19, 14, 3, 6, 8, 60, 'Katie Bell '],
    [7, 14, 3, 9, 10, 51, 'Phineas Nigellus Black'],
    [31, 7, 6, 9, 6, 70, 'Susan Bones'],
    [35, 12, 4, 8, 10, 77, 'Vincent Crabbe'],
    [27, 13, 6, 9, 4, 69, 'Marcus Flint'],
    [26, 23, 4, 8, 8, 83, 'Filius Flitwick'],
    [11, 14, 3, 6, 7, 47, 'Rubeus Hagrid'],
    [32, 15, 6, 9, 9, 79, 'Graham Montague'],
    [24, 13, 3, 7, 8, 71, 'Theodore Nott'],
    [17, 14, 3, 7, 7, 58,'Garrick Ollivander'],
    [9, 8, 1, 4, 5, 31, 'Antioch Peverell'],
    [23, 15, 7, 10, 10, 71, 'Sturgis Podmore'],
    [10, 10, 2, 3, 4, 38, 'Poppy Pomfrey'],
    [13, 18, 1, 5, 8, 49, 'Quirinus Quirrell'],
    [16, 16, 5, 8, 6, 62, 'Tom Marvolo Riddle'],
    [15, 12, 3, 7, 8, 56, 'Albert Runcorn'],
    [19, 12, 4, 5, 7, 58, 'Kingsley Shacklebolt'],
    [28, 17, 9, 10, 2, 79, 'Aurora Sinistra'],
    [18, 13, 1, 10, 8, 61, 'Rita Skeeter'],
    [12, 15, 3, 8, 7, 54, 'Severus Snape'],
    [15, 15, 2, 8, 9, 58, 'Pomona Sprout'],
    [11, 15, 2, 3, 7, 46, 'Emmeline Vance'],
    [15, 5, 3, 3, 3, 39,'Newt Scamander'],
    [5, 13, 2, 3, 5, 33, 'Amelia Bones'],
    [17, 21, 2, 7, 10, 62, 'Thorfinn Rowle'],
    [21, 21, 2, 8, 9, 69, 'Rufus Scrimgeour'],
    [10, 13, 2, 7, 8, 50, 'Irma Pince']
];
        
    var dataHCI = [
    [4, 26, 2, 3, 9, 51, 'Ludo Bagman'],
    [26, 15, 7, 9, 5, 76, 'Frank Bryce'],
    [16, 24, 3, 10, 8, 71, 'Alecto Carrow'],
    [25, 26, 7, 9, 9, 90, 'Gellert Grindelwald'],
    [16, 23, 5, 5, 7, 68, 'Rolanda Hooch'],
    [9, 18, 2, 4, 6, 48, 'Helga Hufflepuff'],
    [5, 20, 3, 6, 7, 47, 'Viktor Krum'],
    [17, 22, 3, 6, 7, 62, 'Bellatrix Lestrange'],
    [24, 16, 5, 8, 9, 68, 'Neville Longbottom'],
    [21, 17, 7, 8, 4, 62, 'Remus Lupin'],
    [6, 29, 2, 9, 10, 59, 'Lily Potter'],
    [10, 21, 5, 8, 9, 61, 'Helena Ravenclaw'],
    [14, 28, 2, 8, 8, 70, 'Salazar Slytherin'],
    [11, 15, 2, 6, 6, 47, 'Ron Weasley'],
    [10, 20, 5, 7, 9, 54, 'Colin Creevey'],
    [12, 20, 7, 9, 6, 62, 'Peter Pettigrew'],
    [12, 20, 3, 10, 9, 62, 'Draco Malfoy'],   
    [9, 26, 3, 8, 8, 62, 'Penelope Clearwater'],
    [19, 14, 4, 7, 8, 58, 'Michael Corner'],
    [4, 19, 3, 4, 4, 40, 'Amos Diggory '],
    [28, 18, 6, 8, 7, 76, 'Igor Karkaroff '],
    [23, 21, 7, 8, 10, 80, 'Silvanus Kettleburn '],
    [25, 16, 7, 9, 9, 74, 'Sirius Black']
];
        
    var dataMT = [
    [16, 21, 2, 8, 9, 60, 'Cuthbert Binns'],
    [25, 18, 4, 8, 8, 71, 'Terry Boot'],
    [22, 19, 5, 8, 7, 71, 'Lavender Brown'],
    [14, 20, 1, 4, 9, 58, 'Millicent Bulstrode'],
    [14, 21, 2, 8, 8, 59, 'Amycus Carrow'],
    [17, 20, 4, 8, 9, 67, 'Reginald Cattermole'],
    [27, 23, 5, 9, 9, 79, 'Mary Cattermole '],
    [18, 15, 3, 8, 8, 59, 'Cho Chang '],
    [16, 22, 3, 9, 8, 69, 'Fleur Delacour '],
    [8, 20, 2, 8, 10, 56, 'Seamus Finnigan'],
    [20, 11, 1, 7, 8, 60, 'Cornelius Fudge'],
    [11, 23, 2, 6, 10, 60, 'Godric Gryffindor'],
    [14, 18, 3, 7, 8, 59, 'Hermione Granger'],
    [26, 19, 6, 9, 8, 78, 'Xenophilius Lovegood'],
    [16, 13, 4, 7, 6, 56, 'Ernie Macmillan'],
    [10, 18, 2, 6, 8, 50, 'Minerva McGonagall'],
    [13, 24, 3, 8, 10, 66, 'Cormac McLaggen'],
    [16, 19, 1, 7, 10, 61, 'Harry Potter'],
    [10, 21, 1, 8, 5, 53, 'James Potter '],
    [6, 20, 1, 4, 7, 43, 'Rowena Ravenclaw'],
    [22, 24, 3, 9, 8, 77, 'Demelza Robins'],
    [21, 23, 2, 7, 8, 69, ' Augustus Rookwood'],
    [5, 22, 1, 5, 10, 50, 'Stanley Shunpike'],
    [13, 18, 2, 7, 6, 52, 'Horace Slughorn'],
    [23, 21, 3, 9, 9, 73, 'Hepzibah Smith'],
    [15, 12, 3, 6, 5, 47, 'Nymphadora Tonks'],
    [6, 13, 2, 3, 8, 40, 'Oliver Wood']
];
        
    var dataOther = [
    [11, 21, 2, 5, 8, 56, 'Bathilda Bagshot'],
    [16, 16, 5, 7, 6, 63, 'Dean Thomas'],
    [7, 16, 2, 9, 9, 54, 'Pansy Parkinson'],
    [6, 22, 3, 3, 9, 49, 'Charity Burbage'],
    [10, 12, 2, 5, 5, 38, 'Charity Burbage']
];    
        
    
    var schema = [
    {name: 'coder', index: 0, text: 'Coder'},
    {name: 'designer', index: 1, text: 'Desginer'},
    {name: 'visualization', index: 2, text: 'Visualization'},
    {name: 'computer usage', index: 3, text: 'Computer usage'},
    {name: 'collaboration', index: 4, text: 'Collaboration'},
    {name: 'overallratings', index: 5, text: 'Overallratings'},
    {name: 'name', index: 6, text: 'Name'}
        
    
];    
        
    var itemStyle = {
    normal: {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
};    

option = {
    backgroundColor: '#404a59',
         title : {
              text: 'A Coder or a Designer?',
              x:'center',
             textStyle: {
            color: '#fff'
        }
                    },
        color: ['#dd4444', '#426ab3', '#fec42c', '#80F1BE'],  //不同图例的颜色
            
         legend: {
            y: 'top',
            data: ['Computer Science','Human Computer Interaction','Media Technology', 'Other related majors'],
              textStyle: {
              color: '#fff',
              fontSize: 16
                         }
                  },  
   
              grid: {
        x: '10%',
        x2: 150,
        y: '18%',
        y2: '10%'
    },
            
          tooltip: {
           backgroundColor: '#100',
           borderColor: '#777',
           borderWidth: 1,
           formatter: function (obj) {
            var value = obj.value;
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + obj.seriesName + '：'
                + '</div>'
                + schema[0].text + '：' + value[0] + '<br>'
                + 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>';
           }
        
         },
            
        xAxis: {
        type: 'value',
        name: 'Coder-programming skills',
        nameGap: 12,
        nameTextStyle: {
            color: '#fff',
            fontSize: 11
        },
        max: 31,
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#eee'
            }
        }
    },
    
        yAxis: {
        type: 'value',
        name: 'Designer-art,talk,evaluation',
        nameLocation: 'end',
        nameGap: 10,
        nameTextStyle: {
            color: '#fff',
            fontSize: 12
        },
        axisLine: {
            lineStyle: {
                color: '#eee'
            }
        },        
                     
        splitLine: {
            show: false
        }
    },    
                               
        series: [
        {
            name: 'CS',
            type: 'scatter',
            itemStyle: itemStyle,
            data: dataCS
        },
        {
            name: 'HCI',
            type: 'scatter',
            itemStyle: itemStyle,
            data: dataHCI
        },
        {
            name: 'MT',
            type: 'scatter',
            itemStyle: itemStyle,
            data: dataMT
        },
        {
            name: 'Other',
            type: 'scatter',
            itemStyle: itemStyle,
            data: dataOther
        }
    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
