使用代碼前,請先引用百度echarts插件。和最新的jquery版本。

//跳轉代碼 myChart.on('click', function(params) { console.log(params.name); window.open(params.data.url); // window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.value)); }); var colorList = [[ '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0', '#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700', '#6b8e23', '#4ea397', '#3cb371', '#b8860b', '#7bd9a5' ], [ '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0', '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700', '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0' ], [ '#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2', '#024b51', '#0780cf', '#765005', '#e75840', '#26ccd8', '#3685fe', '#9977ef', '#f5616f', '#f7b13f', '#f9e264', '#50c48f' ]][2]; option = { // 圖表標題 title: { show:true,//顯示策略,默認值true,可選為:true(顯示) | false(隱藏) text: '"新時代"主題圖譜',//主標題文本,'\n'指定換行 x: 'center', // 水平安放位置,默認為左對齊,可選為: // 'center' ¦ 'left' ¦ 'right' // ¦ {number}(x坐標,單位px) y: 'bottom', // 垂直安放位置,默認為全圖頂端,可選為: // 'top' ¦ 'bottom' ¦ 'center' // ¦ {number}(y坐標,單位px) //textAlign: null // 水平對齊方式,默認根據x設置自動調整 backgroundColor: 'rgba(0,0,0,0)', borderColor: '#ccc', // 標題邊框顏色 borderWidth: 0, // 標題邊框線寬,單位px,默認為0(無邊框) padding: 5, // 標題內邊距,單位px,默認各方向內邊距為5, // 接受數組分別設定上右下左邊距,同css itemGap: 10, // 主副標題縱向間隔,單位px,默認為10, textStyle: { fontSize: 18, fontWeight: 'bolder', color: '#333' // 主標題文字顏色 }, subtextStyle: { color: '#aaa' // 副標題文字顏色 } }, backgroundColor: '#fff', tooltip: {}, animationDurationUpdate: function(idx) { // 越往后的數據延遲越大 return idx * 100; }, animationEasingUpdate: 'bounceIn', color: ['#fff', '#fff', '#fff'], series: [{ type: 'graph', layout: 'force', force: { repulsion: 500, edgeLength: 10 }, roam: true, label: { normal: { show: true } }, data: [{ "name": "新冠肺炎愈后一般6個月內不會再得", "value": 2373, "symbolSize": 48, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[0], "color": colorList[0] } } }, { "name": "女籃兩連勝后大喊武漢加油", "value": 5449, "symbolSize": 73, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[1], "color": colorList[1] } } }, { "name": "火神山醫院開微博", "value": 2289, "symbolSize": 67, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[2], "color": colorList[2] } } }, { "name": "醫療隊女隊員集體理平頭和光頭", "value": 2518, "symbolSize": 50, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[3], "color": colorList[3] } } }, { "name": "緬懷疫情中逝去的人們", "value": 4730, "symbolSize": 88, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[4], "color": colorList[4] } } }, { "name": "妨害疫情防控的違法行為", "value": 1952, "symbolSize": 55, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[5], "color": colorList[5] } } }, { "name": "66歲重症患者8天快速康復", "value": 926, "symbolSize": 70, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[6], "color": colorList[6] } } }, { "name": "別讓快遞小哥一直等在寒風中", "value": 4536, "symbolSize": 67, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[7], "color": colorList[7] } } }, { "name": "湖北以外地區新增病例數連降5天", "value": 750, "symbolSize": 47, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[8], "color": colorList[8] } } }, { "name": "女兒寫給戰疫一線爸爸的信", "value": 493, "symbolSize": 82, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[9], "color": colorList[9] } } }, { "name": "青海連續3天無新增病例", "value": 385, "symbolSize": 59, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[10], "color": colorList[10] } } }, { "name": "遼寧再派1000名醫護人員馳援武漢", "value": 4960, "symbolSize": 90, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[11], "color": colorList[11] } } }, { "name": "抗擊新型肺炎第一線", "value": 8694000, "symbolSize": 134, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[12], "color": colorList[12] } } }, { "name": "12項疫情防控惠民政策", "value": 5668, "symbolSize": 75, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[13], "color": colorList[13] } } }, { "name": "戰疫一線的別樣團圓", "value": 339, "symbolSize": 68, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[14], "color": colorList[14] } } }, { "name": "31省區市心理援助熱線", "value": 671, "symbolSize": 62, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[15], "color": colorList[15] } } }, { "name": "元宵節亮燈為武漢加油", "value": 27000, "symbolSize": 114, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[16], "color": colorList[16] } } }, { "name": "抗擊新型肺炎我們在行動", "value": 10777000, "symbolSize": 130, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[17], "color": colorList[17] } } }, { "name": "疫情中的逆行者", "value": 92000, "symbolSize": 123, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[18], "color": colorList[18] } } }, { "name": "一張圖看懂新冠肺炎", "value": 20000, "symbolSize": 141, "draggable": true, "itemStyle": { "normal": { "shadowBlur": 100, "shadowColor": colorList[19], "color": colorList[19] } }, "url": "https://gallery.echartsjs.com/preview.html?c=xPLngHx_Z&v=1" }] }] }
