《極品飛車22》將有動漫元素 採用照片現實畫風
阿新 • • 發佈：2022-04-15
資料視覺化
主要目的：藉助於圖形化的手段，清晰有效的傳達與溝通訊息。
資料視覺化可以把資料從冰冷的數字轉換成圖形，揭示蘊含在資料中的規律和道理。
應用場景：通用報表、移動端圖表、大屏視覺化、圖編輯&圖分析、地理視覺化。
ECharts 基本使用
1、下載並引入 echarts.js 檔案。
2、準備一個具備大小的 DOM 容器。
3、初始化 echarts 例項物件。
4、指定配置項和資料( option )。
5、將配置項設定給 echarts 例項物件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 400px; height: 400px; } </style></head> <body> <!-- 準備容器 --> <div></div> </body> <!-- 引入下載的echarts --> <script src="./js/echarts.min.js"></script> <script> // 初始化echarts例項物件 let chart = echarts.init(document.querySelector('div')) // 指定配置項和資料 let option = { title: { text:'ECharts 入門示例' }, tooltip: {}, legend: { data: ['銷量'] }, xAxis: { data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] }, yAxis: {}, series: [ { name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 將配置項設定給echarts例項物件 chart.setOption(option) </script> </html>
ECharts 相關配置
1、title：標題元件。
2、tooltip：提示框元件。
3、legend：圖例元件。
4、toolbox：工具欄。
5、grid：直角座標系內繪圖網格。
6、xAxis：直角座標系 grid 中的 x 軸。
7、yAxis：直角座標系 grid 中的 y 軸。
8、series：系列列表。每個系列通過 type 決定自己的圖示型別。
9、調色盤顏色列表。