ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器，底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
繪制數據圖表
1、柱狀圖
柱狀圖效果瀏覽
代碼實現
<!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> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>
2、折線圖
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>數據統計圖：折線圖</title> <!-- 引入 ECharts 文件 這里選擇min.js壓縮版的echarts --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: '未來一周氣溫變化' }, tooltip:{ trigger: 'axis' }, xAxis:{ type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis:{ type: 'value', axisLabel: { //坐標軸刻度標簽的相關設置。 formatter: '{value} °C' // 使用字符串模板，模板變量為刻度默認標簽 {value} } }, series:[ { name:'最高氣溫', type:'line', data:[11, 11, 15, 13, 12, 13, 10], }, { name:'最低氣溫', type:'line', data:[1, -2, 2, 5, 3, 2, 0], } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>
3、餅圖
代碼如下：
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: '小傑公司年齡階段的員工占比',
x:'center'//水平居中
},
tooltip: {//提示框組件
trigger:'item',//'item'數據項圖形觸發,主要在散點圖,餅圖等無類目軸的圖表中使用
formatter:"{a}<br/>{b}:{c} ({d}%)"
},
series:[
{
name:'年齡占比',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:[
{value:80,name:'20-25歲'},
{value:30,name:'26-30歲'},
{value:20,name:'31-35歲'},
{value:8,name:'36-40歲'},
{value:5,name:'41歲以上'}
],
itemStyle:{
emphasis:{
shadowBlur:10,
shadowOffsetX:0,
shadowColor:'rgba(0,0,0,0.5)'
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
結語
以上繪制的圖表是數據圖中用的頻率較高的三種。不僅如此，ECharts 還可用於地理數據可視化的地圖，用於關系數據可視化的關系圖，多維數據可視化的平行坐標，還有用於 BI 的漏斗圖，並且支持圖與圖之間的混搭。更多有關 ECharts 的使用方法，可參考 ECharts 的官方文檔：
https://echarts.baidu.com/index.html