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 ...
随机推荐
- [Java] java.util.Arrays 中使用的 sort 采用的算法 (转)
http://book.douban.com/annotation/15154366/Q: java.util.Arrays 中使用的 sort 采用的是什么算法? A: java中Arrays. ...
- 我的Linux对拍脚本
本文用于Linux下bash的对拍脚本: brute为本目录的暴力程序.. pro为优化过的程序 mak造数据的.. #!/bin/bash while(true)do ./mak printf &q ...
- BZOJ3992: [SDOI2015]序列统计
Description 小C有一个集合S,里面的元素都是小于M的非负整数.他用程序编写了一个数列生成器,可以生成一个长度为N的数列,数列中的每个数都属于集合S. 小C用这个生成器生成了许多这样的数列. ...
- 不错的 iOS 开发辅助工具
一,常用 1> iPhone 日志插件iConsole.
- 如何在WORD2010中取消自动编号?
如何在WORD2010中取消自动编号? 使用WORD2010有一个很大的问题就是WORD2010的自动编号问题,WORD2010的自动编号是符合外国人的写作习惯的,对中国人来说不适用. WORD201 ...
- 通过MongoDB的samus驱动实现基本数据操作
一.MongoDB的驱动 MongoDB支持多种语言的驱动: 在此我们只介绍 C# 的驱动.仅C#驱动都有很多种,每种驱动的形式大致相同,但是细节各有千秋,因此代码不能通用.比较常用的是官方驱动和sa ...
- JavaScript的几种继承方式
看<JavaScript高级程序设计>做的一些笔记 ECMAScript只支持实现继承,不支持接口继承(因为函数没有签名) 原型链(实现继承的主要方法): function SuperTy ...
- MyBatis增删改查
MyBatis的简介: MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名 ...
- [CareerCup] 18.8 Search String 搜索字符串
18.8 Given a string s and an array of smaller strings T, design a method to search s for each small ...
- html中隐藏域hidden的作用介绍及使用示例
基本语法: <input type="hidden" name="field＿name" value="value"> 作用: ...