HTML5資料視覺化學習之路---eChart起步
這幾天在學習HTML5，準備從FLEX轉型了。看了一些基礎的學習教材，也寫了一些基礎例子，但是仍然沒決定從什麼地方入手。今天在網上無意間發現了一個很牛叉的圖表庫EChart，並且這個專案還是百度團隊開發的。優點在我看來除了官方說的那些特性之外最好的就是，中文穩定非常全(因為畢竟是我們中國人自己開發的)。
開始看了官方的Dome真的是非常豐富，基本上現在用到的資料視覺化的常用圖表都有了。於是開始找一個例子開始來進行我的第一個eChart專案吧。
我選擇的是地圖選擇器和標準地圖兩個元件，因為現在開發專案時用到的地圖很多，也用過一些其他的框架比如jvectormap，然後就是自己用SVG寫的。這次發現這個echart居然有這麼好的一個地圖元件。當然要從他開始了。
先從官方網站上下載好echart。然後從builde資料夾下面將echarts.js和chart資料夾考到我們建的工程中，然後開發環境就做好了。就是這麼簡單。
進入寫程式碼階段了。
第一步先在頁面定義一個 <div id="main" style="height: 500px;"></div> 這裡要注意 必須先定義好這個高度 如果不定義的話會報錯。
第二步在這個div的下面引入<script src="../js/echarts.js" type="text/javascript" charset="utf-8"></script> JS檔案。
第三步開始寫圖表的主程式碼了……直接上程式碼
<script type="text/javascript">
require.config({
paths:{
echarts:'../js'
}
})
require([
'echarts',
'echarts/chart/map'
],
function(ec){
mychart = ec.init(document.getElementById('main'));
mychart.setOption({
title:{
text:'iphone銷量',
subtext:'純屬虛構',
x:'center'
},
tooltip:{
trigger:'axis'
},
legend:{
orient:'vertical',
x:'left',
data:['iphone3','iphone4','iphone5']
},
dataRange:{
min:0,
max:2500,
x:'left',
y:'bottom',
text:['高','低'],
calculable:true
},
toolbox:{
show:true,
orient:'vertical',
x:'right',
y:'center',
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
restore:{show: true},
saveAsImage:{show:true}
}
},
roamController:{
show:true,
x:'right',
mapTypeControl:{
'china':true
}
},
series:[{
name:'iphone3',
type:'map',
mapType:'china',
roam:false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name:'北京',value:Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重慶',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '雲南',value: Math.round(Math.random()*1000)},
{name: '遼寧',value: Math.round(Math.random()*1000)},
{name: '黑龍江',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山東',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '江蘇',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '廣西',value: Math.round(Math.random()*1000)},
{name: '甘肅',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '內蒙古',value: Math.round(Math.random()*1000)},
{name: '陝西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '貴州',value: Math.round(Math.random()*1000)},
{name: '廣東',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '寧夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.random()*1000)},
{name: '臺灣',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳門',value: Math.round(Math.random()*1000)}
]
}, {
name: 'iphone4',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重慶',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '內蒙古',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '廣東',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '寧夏',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳門',value: Math.round(Math.random()*1000)}
]
},
{
name: 'iphone5',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '廣東',value: Math.round(Math.random()*1000)},
{name: '臺灣',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳門',value: Math.round(Math.random()*1000)}
]
}
]
})
})
</script>相關文章
- 資料視覺化學習資源視覺化
- go學習之路 --- 起步Go
- 資料視覺化Seaborn從零開始學習教程（三） 資料分佈視覺化篇視覺化
- Python資料分析與視覺化(經典學習資料)Python視覺化
- Nuxt3.0中使用EChart視覺化圖表?UX視覺化
- 從零開始學習時空資料視覺化（序）視覺化
- 「AI白身境」深度學習中的資料視覺化AI深度學習視覺化
- 資料看板視覺化視覺化
- 資料視覺化【十五】視覺化
- 大資料視覺化大資料視覺化
- 警惕“資料視覺化”視覺化
- Django 視覺化Web展示 學習Django視覺化Web
- 資料視覺化基本原理——視覺化模型視覺化模型
- 資料視覺化與資訊視覺化怎麼搞？視覺化
- 遇見大資料視覺化 ： 那些 WOW 的資料視覺化案例大資料視覺化
- 前端之圖形學-1 資料視覺化前端視覺化
- Python資料科學（八）- 資料探索與資料視覺化Python資料科學視覺化
- 什麼是資料視覺化，為什麼資料視覺化很重要？視覺化
- 資料視覺化--實驗五：高維非空間資料視覺化視覺化
- 視覺化之資料視覺化最強工具推薦視覺化
- 新冠肺炎資料視覺化視覺化
- 資料視覺化的秘密視覺化
- 視覺化中的資料視覺化
- 如何看待資料視覺化？視覺化
- Matlab資料視覺化Matlab視覺化
- 資料視覺化實踐視覺化
- 資料視覺化的作用視覺化
- 細談資料視覺化視覺化
- 史丹佛：資料視覺化與美學設計【視訊】視覺化
- 【Python學習教程】常用的Python資料視覺化庫彙總！Python視覺化
- 【Python學習教程】常用的8個Python資料視覺化庫！Python視覺化
- 程式碼視覺化的自動化之路視覺化
- 資料視覺化能否代替資料分析視覺化
- 資料視覺化的基本原理——視覺通道視覺化
- （在模仿中精進資料視覺化03）OD資料的特殊視覺化方式視覺化
- 什麼是資料視覺化？hightopo資料視覺化助力企業數字化視覺化
- 大資料分析學習之路大資料
- 「深度學習系列」CNN模型的視覺化深度學習CNN模型視覺化