echarts3 使用總結（繪制各種圖表,地圖）
更新時間：2017年01月05日 16:01:25 作者：little2
本篇文章主要介紹了echarts3 使用總結，詳細的介紹了各種柱狀圖、折線圖、餅圖、全國地圖等的實現(xiàn)代碼，有需要的可以了解一下。
由于項目需要自學了echarts，下面將學到的東西總結如下，如果有哪里寫的不好，請批評指正
一、前期準備
1、使用echarts之前先要引入echarts.js，js可以到官網(wǎng)下載
2、寫一個div容器用來裝echarts內(nèi)容，這個容器必須有高度，不然看不到內(nèi)容。
3、在script中獲取div容器的id，根據(jù)需要寫option中的參數(shù)（也許你現(xiàn)在還不知道option是干嘛用的，不要著急往下看），使用setoption生成圖表。
（代碼如下）注：后面將不再對引入js，獲取id，調用option生成圖表做贅述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<!-- 引入echarts.js -->
<script src="js/echarts.js "></script>
<script>
獲取容器的id并賦值給變量myChart
var myChart = echarts.init(document.getElementById('main'));
/*用來配置參數(shù)*/
option = {
}
/*調用option生成圖表*/
myChart.setOption(option)
</script>
</body>
</html>
二、各種圖表使用
1、柱狀圖代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 為ECharts準備一個具備大?。▽捀撸┑腄om -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="js/echarts.js "></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.title = '坐標軸刻度與標簽對齊';
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發(fā)有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接訪問',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.setOption(option)
</script>
</body>
</html>
運行結果
2、折線圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="pic4" style="width: 600px;height:400px;"></div>
<script src="js/echarts.js"></script>
<script>
var myChart13 = echarts.init(document.getElementById('pic4'));
var data = [];
option15 = {
title: {
text: '曲線',
},
tooltip: {
trigger: 'axis',
},
legend: {
data:['昨日(11月8日)','今日(11月9日)']
},
grid: {
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: false,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
color:["red","#CD3333"],
xAxis: {
type: 'category',
boundaryGap: false,
data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
},
yAxis: {
type: 'value',
name: '單位（kW）',
axisLabel: {
formatter: '{value}'
}
},
series: [
{
name:'昨日(11月8日)',
type:'line',
data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276],
},
{
type:'line',
name : '今日(11月9日)',
data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156],
}
]
};
myChart13.setOption(option15);
</script>
</body>
</html>
運行結果
3、餅圖
由于代碼重復就不浪費地方寫所有代碼，直接替換（一）中的option{}就可以
option = {
title : {
text: '某站點用戶訪問來源',
subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/> : {c} (ublnpf9mb%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯(lián)盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
運行結果
4、全國地圖
由于地圖比較復雜，所以把全部代碼展示出來
china.js可以到官網(wǎng)下載所有代碼，在echarts/map文件夾中可以找到china.js,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 為ECharts準備一個具備大?。▽捀撸┑腄om -->
<div id="main" style="width: 1000px;height:800px;"></div>
/*<script src="node_modules/echarts/theme/shine.js"></script>*/
<script src="js/echarts.js"></script>
<script src="node_modules/echarts/map/js/china.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'), 'shine');
function randomData() {
return Math.round(Math.random()*1000);
}
option = {
title: {
text: 'iphone銷量',
subtext: '純屬虛構',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data:['iphone3','iphone4','iphone5']
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默認為數(shù)值文本
calculable: true
},
toolbox: {
show: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
];
return colorList[params.dataIndex]
},
}
},
name: 'iphone3',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
{name: '北京',value: randomData() },
{name: '天津',value: randomData() },
{name: '上海',value: randomData() },
{name: '重慶',value: randomData() },
{name: '河北',value: randomData() },
{name: '河南',value: randomData() },
{name: '云南',value: randomData() },
{name: '遼寧',value: randomData() },
{name: '黑龍江',value: randomData() },
{name: '湖南',value: randomData() },
{name: '安徽',value: randomData() },
{name: '山東',value: randomData() },
{name: '新疆',value: randomData() },
{name: '江蘇',value: randomData() },
{name: '浙江',value: randomData() },
{name: '江西',value: randomData() },
{name: '湖北',value: randomData() },
{name: '廣西',value: randomData() },
{name: '甘肅',value: randomData() },
{name: '山西',value: randomData() },
{name: '內(nèi)蒙古',value: randomData() },
{name: '陜西',value: randomData() },
{name: '吉林',value: randomData() },
{name: '福建',value: randomData() },
{name: '貴州',value: randomData() },
{name: '廣東',value: randomData() },
{name: '青海',value: randomData() },
{name: '西藏',value: randomData() },
{name: '四川',value: randomData() },
{name: '寧夏',value: randomData() },
{name: '海南',value: randomData() },
{name: '臺灣',value: randomData() },
{name: '香港',value: randomData() },
{name: '澳門',value: randomData() }
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
運行結果
5、城市地圖（以北京為例）
beijing.js可以到官網(wǎng)下載所有代碼，在echarts/map/province文件夾中可以找到beijing.js,其他城市的使用同樣方法直接引入對應的js即可
代碼
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="main" style="100%; height: 100%;"></div>
</body>
<script src="js/echarts.js"></script>
<script src="js/map/js/province/beijing.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text : '北京地圖',
subtext : '-。-'
},
tooltip : {
trigger: 'item',
formatter: function(a){
return a[2];
}
},
legend: {
orient: 'vertical',
x:'right',
data:['數(shù)據(jù)名稱']
},
dataRange: {
min: 0,
max: 1000,
color:['orange','yellow'],
text:['高','低'], // 文本，默認為數(shù)值文本
calculable : true
},
series : [
{
name: '數(shù)據(jù)名稱',
type: 'map',
mapType: '北京',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '懷柔區(qū)',value: Math.round(Math.random()*1000)},
{name: '延慶縣',value: Math.round(Math.random()*1000)},
{name: '密云縣',value: Math.round(Math.random()*1000)},
{name: '昌平區(qū)',value: Math.round(Math.random()*1000)},
{name: '平谷區(qū)',value: Math.round(Math.random()*1000)},
{name: '順義區(qū)',value: Math.round(Math.random()*1000)},
{name: '門頭溝區(qū)',value: Math.round(Math.random()*1000)},
{name: '海淀區(qū)',value: Math.round(Math.random()*1000)},
{name: '朝陽區(qū)',value: Math.round(Math.random()*1000)},
{name: '石景山區(qū)',value: Math.round(Math.random()*1000)},
{name: '西城區(qū)',value: Math.round(Math.random()*1000)},
{name: '東城區(qū)',value: Math.round(Math.random()*1000)},
{name: '宣武區(qū)',value: Math.round(Math.random()*1000)},
{name: '豐臺區(qū)',value: Math.round(Math.random()*1000)},
{name: '房山區(qū)',value: Math.round(Math.random()*1000)},
{name: '通州區(qū)',value: Math.round(Math.random()*1000)},
{name: '大興區(qū)',value: Math.round(Math.random()*1000)},
]
}
]
};
myChart.setOption(option);
</script>
</html>
運行結果
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要分享了原生js實現(xiàn)商品放大鏡效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了javascript引擎長時間獨占線程造成卡頓的解決方案,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了微信小程序間使用navigator跳轉傳值問題,結合實例形式分析了微信小程序間使用navigator跳轉傳值過程中遇到的問題與解決方法,需要的朋友可以參考下2020-03-03
For循環(huán)中分號隔開的3部分的執(zhí)行順序探討
這篇文章主要探討了For循環(huán)中分號隔開的3部分的執(zhí)行順序,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了推薦4個原生javascript常用的函數(shù),需要的朋友可以參考下2015-01-01
這篇文章主要為大家介紹了JS前端攻堅Eventbus實現(xiàn)更新示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
當一個網(wǎng)站有很多js代碼要加載，js代碼放置的位置在一定程度上將會影像網(wǎng)頁的加載速度，為了讓我們的網(wǎng)頁加載速度更快，本文總結了一下幾個注意點，分享給大家2015-05-05
這篇文章主要為大家詳細介紹了javascript原型繼承，闡明什么是原型繼承,以及在JavaScript中究竟如何使用原型繼承,感興趣的小伙伴們可以參考一下2016-04-04
javascript移動端 電子書 翻頁效果實現(xiàn)代碼
這篇文章主要介紹了javascript移動端 電子書 翻頁效果實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
JavaScriptlocalStorage基本上是瀏覽器Window對象中的存儲，您可以在中存儲任何內(nèi)容localStorage，localStorage及其相關的sessionStorage是 Web Storage API的一部分，我們將在本文詳細了解這些,需要的朋友可以參考下2023-06-06