數據可視化（Echart）
柱狀圖、折線圖、餅圖等六種基本圖表的特點及適用場合
-
效果圖
-
源碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <div id="main2" style="width: 600px;height:400px;left: 700px;top: 0px;position: absolute;"></div> <div id="main3" style="width: 600px;height:400px;left: 0px;top: 400px;position: absolute;"></div> <div id="main4" style="width: 600px;height:400px;left: 700px;top: 400px;position: absolute;"></div> <script type="text/javascript"> //模擬后台傳來的json var jsondata = '{"sales":[{"name":"襯衫","num":"70"},{"name":"羊毛衫","num":"27"},{"name":"褲子","num":"36"},{"name":"高跟鞋","num":"18"},{"name":"襪子","num":"85"},{"name":"棉襖","num":"105"}]}'; var jsonobj = JSON.parse(jsondata); //獲取json中的數值 var dataName = []; var dataNum = []; var temp = jsonobj; //匿名函數解析json串中的數值，關鍵點 (function() { for(var i = 0; i < temp.sales.length; i++) { dataName.push(temp.sales[i].name); dataNum.push(temp.sales[i].num); } })(); // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); var myChart2 = echarts.init(document.getElementById('main2')); //折線圖 var option = { title: { text: '衣物銷量統計' }, tooltip: {}, legend: { data: ['銷量'] }, xAxis: { //x軸字體顏色 /*axisLine: { lineStyle: { color: '#C50023' } },*/ data: dataName, }, yAxis: [{ //定義y軸最大與最小值 min: 0, max: 120, type: 'value', name: '日銷量（萬）', splitNumber: 5 }], series: [{ //折線上數字 /* label: { normal: { show: true, position: 'top', formatter:100 } },*/ // 折線顏色 /*itemStyle: { normal: { //線上。的顏色 color: '#33CCFF', lineStyle: { //線的顏色 color: '#33CCFF' } } },*/ //頂上小圖標名稱 name: '銷量', type: 'line', data: dataNum, //平均值 markLine: { data: [{ type: 'average', name: '平均值' }] }, }] }; myChart.setOption(option); //柱狀圖 // 指定圖表的配置項和數據 var option2 = { title: { text: '衣物銷量統計' }, tooltip: {}, legend: { data: ['銷量'] }, xAxis: { data: dataName, }, yAxis: { type: 'value', name: '日銷量（萬）', splitNumber: 5 }, series: [{ name: '銷量', type: 'bar', //柱狀寬度 barWidth: 20, data: dataNum, }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart2.setOption(option2); //餅狀圖 echarts.init(document.getElementById('main3')).setOption({ title: { text: '衣物銷量統計', subtext: '日銷量（萬）', x: 'center', //背景色 //backgroundColor:'rgba(12,121,123,0.1)' }, series: [{ name: '詳情', type: 'pie', //餅狀圖的大小 //radius : '55%', center: ['50%', '60%'], data: (function() { //餅狀圖需要函數解析數字內的值 var res = []; var len = dataName.length; while(len--) { res.push({ name: dataName[len], value: dataNum[len] }); } return res; })() }] }) echarts.init(document.getElementById('main4')).setOption({ title: { text: '衣物銷量統計' }, tooltip: {}, legend: { data: ['銷量'] }, xAxis: { data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"] }, yAxis: { type: 'value', name: '日銷量（萬）', min: 0, max: 4, axisLabel: { formatter: function(value) { var texts = []; if(value == 0) { texts.push('woo'); } else if(value <= 1) { texts.push('好'); } else if(value <= 2) { texts.push('很好'); } else if(value <= 3) { texts.push('非常好'); } else { texts.push('完美'); } return texts; } } }, series: [{ name: '銷量', type: 'bar', //柱狀寬度 //barWidth: 20, data: [1, 4, 2, 3, 2, 0] }] }) </script> </body> </html>