前言
適合0前端基礎的小白,什麼配置啊,不會啊,我就想畫個圖先,沒問題,按照步驟做,先來實現第一個圖,之後官方教程會教會你更多的。
下載echarts
小白建議,直接下完整版,先搞清楚怎麼畫出一張圖再說點擊這裏下載Echarts ,進入鏈接,選擇完整版下載,之後會得到一個echarts.min.js的一個js腳本,別管他,先放着。
新建一個html文件
我這裏取名爲echartstest.html,然後將下面的內容貼上(我這裏直接拽官方文檔來了,例子一樣。)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<!-- 這裏是加載剛下好的echarts.min.js,注意路徑 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小(寬高)的Dom -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
// 基於準備好的dom,初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var option={
backgroundColor: '#2c343c',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:400, name:'搜索引擎'},
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:274, name:'聯盟廣告'},
{value:235, name:'視頻廣告'}
],
roseType: 'angle',
itemStyle: {
emphasis: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
}
}
]
}
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
這裏在重申一下路徑問題,如下圖所示
編輯完後保存,之後雙擊echartstest.html文件,就會打開一個網頁,你看一個圖就做好了!
是不是很簡單呢,本來就是嘛,你看,你不會前端,不會js,不會jquery,照樣可以畫很好看的圖(但是想要深入理解,還是繞不過js等前端語言的)
在地圖上畫圖
經常看到有很多在地圖上作圖的,就像這樣,小白容易遇到的就是,我tm都copy代碼了,爲啥顯示不出來,原因就是需要下載一個地圖“底板”
沒關係,百度已經封裝好了成js,下載下來就好echarts地圖下載這裏說明一下,有兩個版本,一個是json一個是js的,不同的版本包導入的方式不一樣,下面都會有說明,爲了方便小白,請下載js的版本進行使用。
步驟和以前的一樣,只是在加載echarts.min.js的同時,再加載一次下載的js,如果下載的是世界地圖,那麼加載world.js即可文件層次像這樣
然後我們只需要把echartstest.html修改代碼就可以了。option部分請參考官網,注意這裏引用world.js,而官網裏面提供的只是option部分的代碼而已,這會讓零基礎小白一臉懵逼,要給程序就給全嘛,真是的。其實,其餘的都不需要改變,初始化echarts實例(
var myChart = echarts.init(document.getElementById('main'))
),和最後的使用剛指定的配置項和數據顯示圖表(myChart.setOptions(option)
這句話)
Pay Attention
- 官方實例永遠是最好的入門,最好敲一遍,理解其中的意義
- echarts是純js寫的,所以最好學習js
- 熟悉之後最好使用源代碼版本,會有錯誤提示
- echarts-python有包:echarts-python的github下載
Update
這裏更新下,如何使用echarts CDN來進行圖表構建,簡單說,就是在聯網的情況下,只要複製以下代碼到一個html文件中,雙擊就可以運行圖表,用在不可加載包的地方很合適
<span style="font-size:14px;"><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<div id="main" style="height:400px"></div>
<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',
'echarts/chart/line' // 這裏加載什麼類型圖時候就寫什麼,具體參考echatrs API
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['HERE','AVERAGE']
},
xAxis: [
{
type: 'category',
data: ["avg_time_ok","avg_dis_ok","avg_time_dis_ok","avg_zero_call","avg_time_dis_call_ok","avg_badcase"],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'HERE RATE',
min: 0,
max: 1,
},
{
type: 'value',
name: 'AVERAGE RATE',
min: 0,
max: 1,
}
],
series: [
{
name:'HERE',
type:'bar',
data:[{avg_time_ok},{avg_dis_ok}, {avg_time_dis_ok}, {avg_zero_call}, {avg_time_dis_call_ok}, {avg_badcase}],
label: {
normal: {
show: true,
//position: 'top'
}
},
},
{
name:'AVERAGE',
type:'line',
yAxisIndex: 1,
data:[0.7852, 0.5496, 0.4562, 0.2448, 0.1467, 0.1024]
}
]
};
myChart.setOption(option);
}
);
</script>
</body></span>
效果如圖所示
致謝
總結
其實我也什麼都不會,上面都是我胡編的,你們過來打我呀