echarts之柱狀圖(bar)、餅狀圖(pie)
阿新 • • 發佈：2018-12-31
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echartsLineTest</title> <script src="../../libs/jquery/jquery.js"></script> <script src="../../widgets/dnQuery/lib/echarts/dist/echarts-all.js"></script> </head> <body> <div id="staChart" style="width:550px;height:320px;"></div> <script> var chart; $(function() { setChart() }) function setChart() { chart = echarts.init(document.getElementById("staChart")); chart.setOption(getChartOption("bar")); } function getChartOption(type) { var yField = "地塊面積/公頃";//y座標欄位名稱 var xField = "地塊名稱";//y座標欄位名稱 var title = "2016年土地利用現狀統計";//標題 var subTitle = "地塊面積統計";//副標題 //自定義切換按鈕 var myToolTitle = ""; var myToolImage = ""; if (type === 'bar') { myToolTitle = "餅圖切換"; myToolImage = 'image://../images/iconPie.png'; } else if (type === 'pie') { myToolTitle = "直方圖切換"; myToolImage = 'image://../images/iconBar.png'; } //option var option = {}; if (type == 'bar') { var dataZoomEndPercent = 1200/3; var xdata = ["耕地","林地"]; var staSeries = { name: "地塊面積", type: 'bar', //line itemStyle: { normal: { label: { show: true, position: 'top' } } }, data: [100,200], barWidth: 25 }; option = { color: ['#3398DB'], title: { x: 'center', text: title, subtext: subTitle }, tooltip: { trigger: 'axis', axisPointer: { // 座標軸指示器，座標軸觸發有效 type: 'shadow' // 預設為直線，可選為：'line' | 'shadow' } }, toolbox: { show: true, feature: { //mark: { show: true }, //dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['bar'] }, // magicType: { show: true, type: ['line', 'bar'] }, //restore: { show: true }, myTool: { show: true, title: myToolTitle, icon: myToolImage, onclick: function (option1) { chart = echarts.init(document.getElementById("staChart")); chart.setOption(getChartOption('pie')); } }, saveAsImage: { show: true } } }, calculate: true, grid: { left: '0px', right: '0px', bottom: '10px', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: true, name:xField, data: xdata, axisLabel: { interval: 0, rotate: 20 } //axisTick: { // alignWithLabel: true //} } ], yAxis: [ { type: 'value', name: yField, axisLabel: { formatter: '{value}' } } ], dataZoom : { show : false, realtime : true, start : 0, end : dataZoomEndPercent, zoomLock: true }, series: [ staSeries ] }; } else if (type == "pie") { option = { title: { text: title, subtext: subTitle, x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { show: true, orient: 'vertical', selectedMode:false,//取消圖例上的點選事件 x: '10px', data: ['直接訪問', '郵件營銷', '聯盟廣告', '視訊廣告', '搜尋引擎'] }, series: [ { name: yField, type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ { value: 335, name: '直接訪問' }, { value: 310, name: '郵件營銷' }, { value: 234, name: '聯盟廣告' }, { value: 135, name: '視訊廣告' }, { value: 1548, name: '搜尋引擎' } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ], toolbox: { show: true, feature: { myTool: { show: true, title: myToolTitle, icon: myToolImage, onclick: function (option1) { chart = echarts.init(document.getElementById("staChart")); chart.setOption(getChartOption('bar')); } }, saveAsImage: { show: true } } } }; } return option; } </script> </body> </html>
echsrts引用的相關js檔案：連結：https://pan.baidu.com/s/1GP34oLNd-EEjqWXHZ9sYeA 密碼：se9t