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 ...
随机推荐
- ACM: HDU 1874 畅通工程续-Dijkstra算法
HDU 1874 畅通工程续 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Desc ...
- [题解]扫雷Mine
// 此博文为迁移而来,写于2015年2月6日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vrft.html 1088 ...
- 【HDU】3506 Monkey Party
http://acm.hdu.edu.cn/showproblem.php?pid=3506 题意:环形石子合并取最小值= =(n<=1000) #include <cstdio> ...
- HDU 4722 Good Numbers(DP)
题目链接 脑子有点乱,有的地方写错了,尚大婶鄙视了... 来个模版的. #include <iostream> #include <cstdio> #include <c ...
- git 常用
1. 打印 git 的 log 日志:git log --after="2016-05-05" --no-merges 2. 可以通过在本地建立分支,来添加自己的注释.上传公司的代 ...
- MapReduce输入格式
文件是 MapReduce 任务数据的初始存储地.正常情况下,输入文件一般是存储在 HDFS 里面.这些文件的格式可以是任意的:我们可以使用基于行的日志文件, 也可以使用二进制格式,多行输入记录或者其 ...
- 用js读写cookie的简单办法
/* 功能:保存cookies函数 参数:name,cookie名字:value,值 */ function SetCookie(name,value){ var Days = 30*12; //co ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- 启动tomcat，报java.lang.NoClassDefFoundError
用的Build Path加进来的jar包,没有读取到,应该讲jar包放在lib目录下
- Java 获取当前系统时间方法比较
转载: http://blog.csdn.net/zzjjiandan/article/details/8372617 一. 获取当前系统时间和日期并格式化输出: import java.util.D ...