前言
適合0前端基礎(chǔ)的小白，什么配置啊隙姿，不會(huì)啊梅垄，我就想畫個(gè)圖先，沒(méi)問(wèn)題输玷，按照步驟做队丝，先來(lái)實(shí)現(xiàn)第一個(gè)圖，之后官方教程會(huì)教會(huì)你更多的欲鹏。
下載echarts
小白建議机久，直接下完整版，先搞清楚怎么畫出一張圖再說(shuō)點(diǎn)擊這里下載Echarts 赔嚎，進(jìn)入鏈接膘盖，選擇完整版下載胧弛，之后會(huì)得到一個(gè)echarts.min.js的一個(gè)js腳本，別管他侠畔，先放著结缚。
新建一個(gè)html文件
我這里取名為echartstest.html,然后將下面的內(nèi)容貼上(我這里直接拽官方文檔來(lái)了，例子一樣软棺。)
<!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準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom喘落，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
backgroundColor: '#2c343c',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
series : [
{
name: '訪問(wèn)來(lái)源',
type: 'pie',
radius: '55%',
data:[
{value:400, name:'搜索引擎'},
{value:335, name:'直接訪問(wèn)'},
{value:310, name:'郵件營(yíng)銷'},
{value:274, name:'聯(lián)盟廣告'},
{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>
這里在重申一下路徑問(wèn)題茵宪，如下圖所示
編輯完后保存，之后雙擊echartstest.html文件揖盘，就會(huì)打開一個(gè)網(wǎng)頁(yè)眉厨，你看一個(gè)圖就做好了锌奴！
是不是很簡(jiǎn)單呢兽狭，本來(lái)就是嘛，你看鹿蜀，你不會(huì)前端箕慧，不會(huì)js，不會(huì)jquery茴恰，照樣可以畫很好看的圖(但是想要深入理解颠焦，還是繞不過(guò)js等前端語(yǔ)言的)
在地圖上畫圖
經(jīng)常看到有很多在地圖上作圖的往枣，就像這樣伐庭，小白容易遇到的就是，我tm都copy代碼了分冈，為啥顯示不出來(lái)圾另，原因就是需要下載一個(gè)地圖“底板”
沒(méi)關(guān)系，百度已經(jīng)封裝好了成js雕沉，下載下來(lái)就好echarts地圖下載這里說(shuō)明一下集乔，有兩個(gè)版本，一個(gè)是json一個(gè)是js的坡椒，不同的版本包導(dǎo)入的方式不一樣扰路，下面都會(huì)有說(shuō)明，為了方便小白倔叼，請(qǐng)下載js的版本進(jìn)行使用汗唱。
步驟和以前的一樣，只是在加載echarts.min.js的同時(shí)丈攒，再加載一次下載的js渡嚣，如果下載的是世界地圖，那么加載world.js即可文件層次像這樣
然后我們只需要把echartstest.html修改代碼就可以了。option部分請(qǐng)參考官網(wǎng)识椰，注意這里引用world.js绝葡，而官網(wǎng)里面提供的只是option部分的代碼而已，這會(huì)讓零基礎(chǔ)小白一臉懵逼腹鹉，要給程序就給全嘛藏畅，真是的。其實(shí)功咒，其余的都不需要改變愉阎，初始化echarts實(shí)例(
var myChart = echarts.init(document.getElementById('main')))，和最后的使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表(myChart.setOptions(option)這句話)
Pay Attention
- 官方實(shí)例永遠(yuǎn)是最好的入門力奋，最好敲一遍榜旦，理解其中的意義
- echarts是純js寫的，所以最好學(xué)習(xí)js
- 熟悉之后最好使用源代碼版本景殷，會(huì)有錯(cuò)誤提示
- echarts-python有包：echarts-python的github下載
Update
這里更新下,如何使用echarts CDN來(lái)進(jìn)行圖表構(gòu)建溅呢，簡(jiǎn)單說(shuō)，就是在聯(lián)網(wǎng)的情況下猿挚，只要復(fù)制以下代碼到一個(gè)html文件中咐旧，雙擊就可以運(yùn)行圖表，用在不可加載包的地方很合適
<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' // 這里加載什么類型圖時(shí)候就寫什么绩蜻，具體參考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>
效果如圖所示
致謝
@echarts-5分鐘上手寫ECharts的第一個(gè)圖表
總結(jié)
其實(shí)我也什么都不會(huì)铣墨，上面都是我胡編的，你們過(guò)來(lái)打我呀
