前言
適合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'));
myChart.setOption({
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)'
}
}
}
}
]
})
</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>
效果如圖所示
致謝
總結
其實我也什么都不會，上面都是我胡編的，你們過來打我呀
