Echarts例項1-折線、餅圖、柱狀圖混搭
阿新 • • 發佈：2018-12-31
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts單檔案引入 --> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路徑配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' ,// 使用柱狀圖就載入bar模組，按需載入 'echarts/chart/line', 'echarts/chart/pie' ], function(ec) { // 基於準備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('main')); // var option = { // tooltip: { // show: true // }, // legend: { // data:['銷量'] // }, // xAxis : [// { // type : 'category', // data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] // } // ], // yAxis : [ // { // type : 'value' // } // ], // series : [ // { // "name":"銷量", // "type":"bar", // "data":[5, 20, 40, 10, 10, 20] // } // ] // }; option = { tooltip : { trigger: 'axis' }, toolbox: { show : true, y: 'bottom', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, legend: { data:['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎','百度','谷歌','必應','其他'] }, xAxis : [ { type : 'category', splitLine : {show : false}, data : ['週一','週二','週三','週四','週五','週六','週日'] } ], yAxis : [ { type : 'value', position: 'left' } ], series : [ { name:'直接訪問', type:'bar', data:[320, 332, 301, 334, 390, 330, 320] }, { name:'郵件營銷', type:'bar', tooltip : {trigger: 'item'}, stack: '廣告', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'聯盟廣告', type:'bar', tooltip : {trigger: 'item'}, stack: '廣告', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'視訊廣告', type:'bar', tooltip : {trigger: 'item'}, stack: '廣告', data:[150, 232, 201, 154, 190, 330, 410] }, { name:'搜尋引擎', type:'line', data:[862, 1018, 964, 1026, 1679, 1600, 1570] }, { name:'搜尋引擎細分', type:'pie', tooltip : { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, center: [220,130], radius : [0, 50], itemStyle : { normal : { labelLine : { length : 20 } } }, data:[ {value:1048, name:'百度'}, {value:251, name:'谷歌'}, {value:147, name:'必應'}, {value:102, name:'其他'} ] } ] }; // 為echarts物件載入資料 myChart.setOption(option); } ); </script> </body>