ECharts 簡單的使用過程，完美的圖形展現

時間 2019-11-10

標籤 echarts 簡單使用過程完美圖形展現简体版

原文原文鏈接

最近開發項目時要作圖形報表，網上找了些東西，仍是以爲ECharts靠譜，具有諸多優勢，功能強大，圖表完美，兼容性也比較好，基於html5動畫渲染。javascript

官網的demo中是寫得比較全了，但不少用不到的東西直接影響了代碼質量，下面我就餅圖爲例給描述一下echarts的基本使用過程，部分代碼是我從demo中裁剪以後的代碼html

echarts餅狀圖實現步驟：html5

1，在簡單的html中引入js文件，該js文件能夠去官網下載java

2，爲圖形準備容器

這也就是在html中添加一個div給定id，圖表就會顯示在該div中。

3，模塊導入js，這點比較關鍵，它直接決定了出什麼圖形

4，添加顯示數據

<head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="js/esl.js"></script>
</head>
<body>
<div id="picturePlace"></div>
<script type="text/javascript">
// 路徑配置
require.config({
paths:{
'echarts' : 'js/echarts',
'echarts/chart/pie' : 'js/echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>));
option = {
title : {
text: '某站點用戶訪問來源',
subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'訪問來源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
// 爲echarts對象加載數據
myChart.setOption(option);
}
);
</script>
</body>