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>
效果图：
Echarts3 使用教程的更多相关文章
- Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境
一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Virtual Box配置CentOS7网络（图文教程）
之前很多次安装CentOS7虚拟机,每次配置网络在网上找教程,今天总结一下,全图文配置,方便以后查看. Virtual Box可选的网络接入方式包括: NAT 网络地址转换模式(NAT,Network ...
随机推荐
- 洛谷 P1449 后缀表达式 Label:表达式计算系列
题目描述 所谓后缀表达式是指这样的一个表达式:式中不再引用括号,运算符号放在两个运算对象之后,所有计算按运算符号出现的顺序,严格地由左而右新进行(不用考虑运算符的优先级). 如:3*(5–2)+7对应 ...
- 【BZOJ】1406: [AHOI2007]密码箱
http://www.lydsy.com/JudgeOnline/problem.php?id=1406 题意:求$0<=x<n, 1<=n<=2,000,000,000, 且 ...
- 【BZOJ1270】1270: [BeijingWc2008]雷涛的小猫 DP
Description Input Output Sample Input Sample Output 8 HINT Source 唉这么蠢的Dp没一下子看出来,Dp真是太弱了啦. #includ ...
- 基于SVG的JS地图插件
一:D3(Data-Driven Documents) 官网地址:http://d3js.org/ 功能非常强大(不支持IE8) D3 是最流行的可视化库之一,它被很多其他的表格插件所使用.它允许绑定 ...
- PHP 7 测试用例(转)
性能改善:PHP 7高达两倍快的PHP 5.6 显著减少内存使用 抽象语法树 一致的64位支持 改进的异常层次结构 许多转化为异常致命错误 安全随机数发生器 删除旧的和不支持的SAPIs和扩展 空合并 ...
- C# 窗体位置 Show和ShowDialog（转）
CenterParent 窗体在其父窗体中居中. CenterScreen 窗体在当前显示窗口中居中,其尺寸在窗体大小中指定. Manual 窗体的位置由 Location 属性确定. Windows ...
- CSS3两个动画顺序衔接播放
问题描述: 第一个动画先播放,播放完成后,第二个动画紧接着播放. 解决办法: 1. 将第二个的延迟时间(animation-delay) 设置成第一个的持续时间( animation-duration ...
- JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- Javascript 中的一些关于时间的操作【转】
1.时间对象和一些简单操作函数 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); ...
- 类似input框内最右边添加图标，有清空功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...