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 ...
随机推荐
- codeforces round #234B(DIV2) A Inna and Choose Options
#include <iostream> #include <string> #include <vector> using namespace std; ; ,,, ...
- 两种不同png图片的在项目中的运用
png图片主要分为两种 png-8和png-24. PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值.”8″代表2的8次方也就是256色,而24则代表2的24次方大概有1 ...
- java开发_模仿百度文库_OpenOffice2PDF_注意事项
在模仿百度文库的操作过程中,有很多朋友反映出来的一些问题,是我想起了写这篇blog. 主要是让大家在做的过程中注意一些东西,否则达不到想要的效果. 第一步:我们先从 java开发_模仿百度文库_Ope ...
- Linux的磁盘分区（1）
分区命名: 1.Linux下的分区命名不同于windows下的命名,对硬盘如IDE硬盘采用类似/dev/hdxy的方式来命名,其中hd表示分区所在的设备类型,如IDE硬盘,x表示硬盘盘号(a为基本主盘 ...
- （转）C#/.NET主线程与子线程之间的关系
一般 一个应用程序就对应一个进程,一个进程可有一个或多个线程,而一般有一个主线程. 有的博客上说“至少一个主线程”,这一说法持有怀疑 主线程与子线程之间的关系 ...
- FZU1894 单调队列
S - 1019 Time Limit:1500MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Sta ...
- 安卓APP测试之使用Burp Suite实现HTTPS抓包方法
APP的测试重点小部分在APP本身,大部分还是在网络通信上(单机版除外).所以在安卓APP测试过程中,网络抓包非常重要,一般来说,app开发会采用HTTP协议.Websocket.socket协议,一 ...
- HTTP协议 (七) Cookie
HTTP协议 (七) Cookie Cookie是HTTP协议中非常重要的东西, 之前拜读了Fish Li 写的[细说Cookie], 让我学到了很多东西.Fish的这篇文章写得太经典了. 所以我这篇 ...
- 【HDU 2853】 KM算法
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2853 题意:有n个公司,m个任务,每个公司做每个任务都有一个效率值,最开始每个公司都指派了一个任务,现 ...
- Handler的总结
Handler的总结 我们创建的Service.Activity,Broadcast均是一个主线程处理,即UI线程, 但是进行耗时操作时,比如I/O读写的大文件,数据库操作及网络下载需要很长的时间,为 ...