Echarts3 使用教程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.js"></script>
<!-- 引入 china.js（地图需单独下载）-->
<script src="js/china.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//配置地图
myChart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
// 指定图表的配置项和数据
var data = [
{name: '海门', value: 40},
{name: '鄂尔多斯', value: 12},
{name: '招远', value: 62},
{name: '舟山', value: 82},
{name: '齐齐哈尔', value: 14},
{name: '盐城', value: 125},
{name: '赤峰', value: 126},
{name: '青岛', value: 91},
{name: '乳山', value: 118},
{name: '金昌', value: 119},
{name: '泉州', value: 121},
{name: '莱西', value: 21},
{name: '日照', value: 21},
{name: '胶南', value: 55},
{name: '南通', value: 60},
{name: '拉萨', value: 84},
{name: '云浮', value: 44},
{name: '梅州', value: 125},
{name: '文登', value: 95},
{name: '上海', value: 125},
{name: '攀枝花', value: 95},
{name: '威海', value: 65},
{name: '承德', value: 75},
{name: '厦门', value: 46},
{name: '汕尾', value: 66},
{name: '克拉玛依', value: 72},
{name: '大庆', value: 279}
];
//城市设置[经度，纬度]
var geoCoordMap = {
'海门':[121.15,31.89],
'鄂尔多斯':[109.781327,39.608266],
'招远':[120.38,37.35],
'舟山':[122.207216,29.985295],
'齐齐哈尔':[123.97,47.33],
'盐城':[120.13,33.38],
'赤峰':[118.87,42.28],
'青岛':[120.33,36.07],
'乳山':[121.52,36.89],
'金昌':[102.188043,38.520089],
'泉州':[118.58,24.93],
'莱西':[120.53,36.86],
'日照':[119.46,35.42],
'胶南':[119.97,35.88],
'南通':[121.05,32.08],
'拉萨':[91.11,29.97],
'云浮':[112.02,22.93],
'梅州':[116.1,24.55],
'文登':[122.05,37.2],
'上海':[121.48,31.22],
'攀枝花':[101.718637,26.582347],
'威海':[122.1,37.5],
'承德':[117.93,40.97],
'厦门':[118.1,24.46],
'汕尾':[115.375279,22.786211],
'克拉玛依':[84.77,45.59],
'大庆':[125.03,46.58]
};
//浮层内容的设置（）
var $imgs = [
{area: '海门', txt:'哈哈哈'},
{area: '鄂尔多斯', txt:'哈哈哈'},
{area: '招远', txt:'哈哈哈'},
{area: '舟山', txt:'哈哈哈'},
{area: '齐齐哈尔', txt:'哈哈哈'},
{area: '盐城', txt:'哈哈哈'},
{area: '赤峰', txt:'哈哈哈'},
{area: '青岛', txt:'哈哈哈'},
{area: '乳山', txt:'哈哈哈'},
{area: '金昌', txt:'哈哈哈'},
{area: '泉州', txt:'哈哈哈'},
{area: ' 莱西', txt:'哈哈哈'},
{area: '日照', txt:'哈哈哈'},
{area: '胶南', txt:'哈哈哈'},
{area: '南通', txt:'哈哈哈'},
{area: '拉萨', txt:'哈哈哈'},
{area: '云浮', txt:'哈哈哈'},
{area: '梅州', txt:'哈哈哈'},
{area: '文登', txt:'哈哈哈'},
{area: '上海', txt:'哈哈哈'},
{area: '攀枝花', txt:'哈哈哈'},
{area: '威海', txt:'哈哈哈'},
{area: '承德', txt:'哈哈哈'},
{area: '厦门', txt:'哈哈哈'},
{area: '汕尾', txt:'哈哈哈'},
{area: '克拉玛依', txt:'哈哈哈'},
{area: '大庆', txt:'哈哈哈'}
];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
backgroundColor: '#404a59',
title: {
text: '碳交易量',//标题
subtext: '各省碳交易量（吨）',
sublink: '#',//subtext跳转地址
left: 'center',
textStyle: {
color: '#fff'
}
},
//浮层设置
tooltip : {
trigger: 'item',
formatter: function (params,ticket,callback){
var $pna = params.name;
var res = "";
for(var i = 0;i<$imgs.length;i++){
if($imgs[i].area == $pna){
res = '<p>'+ $imgs[i].txt +'</p>';//设置自定义数据的模板，这里的模板是文字
//console.log(res);
break;
}
}
setTimeout(function (){
// 仅为了模拟异步回调
callback(ticket, res);//回调函数，这里可以做异步请求加载的一些代码
}, 15)
return "loading";
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x:'right',
data:['销量前三'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series : [
{
name: '销量前三',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 3)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
效果图：
学习是一个不断抄袭和重复的过程.
