Echarts;雷達圖；setInterval()；動態效果
阿新 • • 發佈：2022-03-26
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 檔案 --> <script src="js/echarts.js"></script> </head> <body> <!---為ECharts準備一個具備大小（寬高）的DOM---> <div id="main" style="width: 500px; height: 400px"></div> <script type="text/javascript"> //基於準備好的DOM，初始化ECharts圖表 // 資料專案配置，日期（String）,資料以二維陣列形式保留列數代表維度 // 日期行數要和資料行數保持一致 var i = 0; var name_list = ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020']; var data_list = [[77.7, 42.6, 28.7], [79.7, 43.6, 34.9], [79.7,43.6,34.9], [81.8, 44.1, 43.3], [86.6, 47.8, 46.7], [90.8, 50.3, 49.9], [92.6, 49.8, 51.0], [93.7, 51.5, 48.6], [94.3, 50.7, 46.1],[96.5,80.4,50.2], [98.7,87.5,52.1],[98.3,88.9,51.4], [98.3,88.4,49.7],[98.3,91.2,55.1], [98.0,95.1,55.3],[98.2,94.1,54.3], [98.7,93.7,53.9],[98.8,94.9,55], [99.1,95.2,55.3],[99.5,94.5,55.4], [99.5,95.7,56.6]]; var myChart = echarts.init(document.getElementById("main")); //指定圖表的配置項和資料 var option = { //指定圖表的配置項和資料 backgroundColor: 'rgba(204,204,204,0.7)', //配置背景色，預設無背景 title: { //配置標題元件 text: '各級學校畢業生升學率', target: 'blank', top: '10', left: '160', textStyle: { color: 'blue', fontSize: 18, } }, legend: { //配置圖例元件 show: true, //設定是否顯示圖例 icon: 'rect', //icon.'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none' bottom: '15', //設定圖例距離頂部邊距 // left: 230, //設定圖例距離左側邊距 itemWidth: 10, //設定圖例標記的圖形寬度 itemHeight: 10, //設定圖例標記的圖形高度 itemGap: 30, //設定圖例每項之間的間隔 orient: 'horizontal', //設定圖例列表的佈局朝向，'horizontal'|'vertical' textStyle: { fontSize: 15, color: '#fff' }, //設定圖例的公用文字樣式 data: [ //設定圖例的資料陣列，陣列項通常為字串，每項代表一個系列name //設定圖例項的文字樣式 { name: '2000', icon: 'rect', textStyle: { color: 'rgba(255,0,0,1)', fontWeight: 'bold' } } //'normal'|'bold'|'bolder'|'lighter' ], }, tooltip: { //配置詳情提示框元件 //設定雷達圖的tooltip不會超出div，也可設定position屬性 //設定定位不會隨著滑鼠移動而變化 confine: true, //設定是否將tooltip框限制在圖表的區域內 enterable: true, //設定滑鼠是否可以移動到tooltip區域內 }, visualMap: { top: '47%', right: 5, max: 100, color: ['red', 'blue'], calculable: true }, radar: [{ //配置雷達圖座標系元件，只適用於雷達圖 center: ['50%', '56%'], //設定中心座標，陣列的第1項是橫座標，第2項是縱座標 radius: 160, //設定圓的半徑，陣列的第一項是內半徑，第二項是外半徑 startAngle: 90, //設定座標系起始角度，也就是第一個指示器軸的角度 name: { //設定（圓外的標籤）雷達圖每個指示器名稱 formatter: '{value}', textStyle: { fontSize: 15, color: '#000' } }, nameGap: 2, //設定指示器名稱和指示器軸的距離，預設為15 splitNumber: 2, //設定指示器軸的分割段數，default //shape:'circle', //設定雷達圖繪製型別，支援'polygon','circle' //設定座標軸軸線設定 axisLine: { lineStyle: { color: '#fff', width: 1, type: 'solid', } }, //設定座標軸在grid區域中的分隔線 splitLine: { lineStyle: { color: '#fff', width: 1, } }, splitArea: { show: true, areaStyle: { color: ['#abc', '#bca', '#abc', '#bca'] } }, //設定分隔區域的樣式 indicator: [ //配置雷達圖指示器，指定雷達圖中的多個變數，跟data中value對應 { name: '小學升初中', max: 100, color: 'red'}, { name: '初中升高中', max: 100, color: 'green' }, { name: '高中升高等', max: 100 , color:'blue'}] }], series: [{ name: '雷達圖', //系列名稱，用於tooltip的顯示，圖例篩選 type: 'radar', //系列型別: 雷達圖 //拐點樣式，'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none' symbol: 'triangle', itemStyle: { //設定折線拐點標誌的樣式 normal: { lineStyle: { width: 1 }, opacity: 0.2 }, //設定普通狀態時的樣式 emphasis: { lineStyle: { width: 5 }, opacity: 1 } //設定高亮時的樣式 }, data: [ //設定雷達圖的資料是多變數(維度) { //設定第1個數據項 name: '2001', //資料項名稱 value: [77.7, 42.6, 28.7], //value是具體資料 symbol: 'triangle', symbolSize: 5, //設定單個數據標記的大小 //設定拐點標誌樣式 itemStyle: { normal: { borderColor: 'blue', borderWidth: 3 } }, //設定單項線條樣式 // lineStyle: { normal: { color: 'red', width: 1, opacity: 0.9 } }, //areaStyle: {normal:{color:'red'}} //設定單項區域填充樣式 } ] },] }; //使用剛指定的配置項和資料顯示圖表 setInterval(function () { let name_0 = option.legend.data[0].name; let value_0 = option.series[0].data[0].value; let data_name_0 = option.series[0].data[0].name; // let value_1 = option.series[1].data[0].value; // let value_2 = option.series[2].data[0].value; // let value_3 = option.series[3].data[0].value; //作用：控制迴圈 if(data_list.length == i){ i = 0; } value_0 = data_list[i]; name_0 = name_list[i]; data_name_0 = name_list[i]; option.series[0].data[0].value = value_0; option.legend.data[0].name = name_0; option.series[0].data[0].name = data_name_0; console.log(value_0); console.log(name_0); console.log(name_list[i]); // console.log(data_list.length) // for (i = 0; i < fLen; i++) { // text += "<li>" + fruits[i] + "</li>"; // } myChart.setOption(option, true); i = i + 1; }, 1500); //每間2秒重新渲染一次，以實現動態效果 </script> </body> </html>
需引入echarts.js檔案