實操專區-第15周-課堂練習專區-漏斗圖
下載安裝ECharts，完成如下樣式圖形。
代碼和截圖上傳
基本要求：下圖3選1，完成代碼和截圖
完成 3.1.3.16 漏斗圖中的任務點
基本要求：2個選一個完成，多做1個加2分。
請用班級+學號+姓名命名。
參考代碼：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset = "utf-8"> | |
| <!-- 引入 ECharts 文件 --> | |
| <script src = "js/echarts.js"></script> | |
| </head> | |
| <body> | |
| <!---為ECharts準備一個具備大小（寬高）的DOM---> | |
| <div id = "main" style = "width: 800px; height: 600px"></div> | |
| <script type = "text/javascript"> | |
| //基于準備好的DOM，初始化ECharts圖表 | |
| var myChart = echarts.init(document.getElementById("main")); | |
| //指定圖表的配置項和數據 | |
| var option = { //指定圖表的配置項和數據 | |
| //使用預定義的顏色 | |
| color: ["red", 'green', 'blue', '#8CC7B5', '#32CD32', '#7CFC00', '#19CAAD', 'grey'], | |
| title: { | |
| text: '多漏斗圖和多金字塔', left: 280, top: 'top' | |
| }, | |
| tooltip: { trigger: 'item', formatter: "{a} <br/>{b}:{c}%" }, | |
| toolbox: { | |
| left: 750, top: 12, | |
| orient: 'vertical', top: 'center', | |
| feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } | |
| }, | |
| legend: { | |
| orient: 'vertical', left: 'left', | |
| left: 22, top: 12, | |
| data: ['展現', '點擊', '訪問', '咨詢', '訂單'] | |
| }, | |
| calculable: true, | |
| series: [ | |
| { | |
| name: '漏斗圖', type: 'funnel', width: '40%', height: '45%', left: '5%', top: '50%', | |
| data: [ | |
| { value: 60, name: '訪問' }, { value: 30, name: '咨詢' }, { value: 10, name: '訂單' }, | |
| { value: 80, name: '點擊' }, { value: 100, name: '展現' } | |
| ] | |
| }, | |
| { | |
| name: '金字塔', type: 'funnel', width: '40%', height: '45%', left: '5%', top: '5%', | |
| sort: 'ascending', | |
| data: [ | |
| { value: 45, name: '訪問' }, { value: 15, name: '咨詢' }, { value: 5, name: '訂單' }, | |
| { value: 65, name: '點擊' }, { value: 100, name: '展現' }] | |
| }, | |
| { | |
| name: '漏斗圖', type: 'funnel', width: '40%', height: '45%', left: '55%', top: '5%', | |
| label: { normal: { position: 'left' } }, | |
| data: [ | |
| { value: 60, name: '訪問' }, { value: 30, name: '咨詢' }, | |
| { value: 10, name: '訂單' }, { value: 80, name: '點擊' }, | |
| { value: 100, name: '展現' }] | |
| }, | |
| { | |
| name: '金字塔', type: 'funnel', width: '40%', height: '45%', | |
| left: '55%', top: '50%', sort: 'ascending', | |
| label: { normal: { position: 'left' } }, | |
| data: [ | |
| { value: 45, name: '訪問' }, { value: 15, name: '咨詢' }, | |
| { value: 5, name: '訂單' }, { value: 65, name: '點擊' }, | |
| { value: 100, name: '展現' }] | |
| } | |
| ] | |
| }; | |
| //使用剛指定的配置項和數據顯示圖表 | |
| myChart.setOption(option); | |
| </script> | |
| </body> | |
| </html> |
)
)
