ECharts地图详解
1.引⼊echarts库⽂件
<script charset="utf-8" type="text/javascript" language="javascript" src="echarts-2.2.7/doc/example/www/js/echarts.js"></script> 2.在页⾯中新建div⽤于地图展⽰
<div id="main" ></div>
3.在页⾯中引⼊js⽂件
<script charset="utf-8" type="text/javascript" language="javascript" src="xxx.js"></script>
4.在js脚本中编写代码
$(function() {
// 路径配置
paths : {
// echarts: 'echarts.baidu/build/dist'
echarts : './plugins/echarts-2.2.7/doc/example/www/js'
}
});
// 使⽤
require(
[
'echarts',
'echarts/chart/map' // 使⽤柱状图就加载bar模块，按需加载
], function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.ElementById('main'));
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
option = {
title : {
// 是否显⽰
show: true,
// 主标题⽂本，'\n'指定换⾏
text: 'iphone销量',
// 主标题⽂本超链接
link: 'www.baidu',
/
/ 指定窗⼝打开主标题超链接，⽀持'self' | 'blank'，不指定等同为'blank'（新窗⼝）
target: 'self',
// 副标题⽂本，'\n'指定换⾏
subtext: '纯属虚构',
// 副标题⽂本超链接
sublink: 'www.baidu',
// 指定窗⼝打开副标题超链接，⽀持'self' | 'blank'，不指定等同为'blank'（新窗⼝）
subtarget: 'self',
// ⽔平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
// ⽔平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'center',
/
/ 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top',
font weight bolder
// ⽔平对齐⽅式，默认根据x设置⾃动调整，可选为： left' | 'right' | 'center
textAlign: 'center',
// 标题背景颜⾊，默认透明
backgroundColor: 'rgba(0,0,0,0.1)',
// 标题边框颜⾊
borderColor: '#66FF00',
// 标题边框线宽，单位px，默认为0（⽆边框）
borderWidth: 1,
// 标题内边距，单位px，默认各⽅向内边距为5，接受数组分别设定上右下左边距，同css，见下图
padding: [20,40,20,40],
// 主副标题纵向间隔，单位px，默认为10
itemGap: 20,
// 主标题⽂本样式
textStyle: {
// 颜⾊
color: '#0066FF',
// ⽔平对齐⽅式，可选为：'left' | 'right' | 'center'
align: 'left',
// 垂直对齐⽅式，可选为：'top' | 'bottom' | 'middle'
baseline: 'bottom',
/
/ 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ，单位px
fontSize: 20,
// 样式，可选为：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
},
// 副标题⽂本样式
subtextStyle: {
/
/ 颜⾊
color: '#FF7F50',
// ⽔平对齐⽅式，可选为：'left' | 'right' | 'center'
align: 'left',
// 垂直对齐⽅式，可选为：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ，单位px
fontSize: 15,
// 样式，可选为：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
}
},
// ⼯具提⽰
tooltip : {
// 显⽰策略，可选为：true（显⽰） | false（隐藏）
show: true,
// tooltip主体内容显⽰策略，只需tooltip触发事件或显⽰axisPointer⽽不需要显⽰内容时可配置该项为false
/
/ tooltip主体内容显⽰策略，只需tooltip触发事件或显⽰axisPointer⽽不需要显⽰内容时可配置该项为false
showContent: true,
// 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
trigger: 'item',
// 位置指定，传⼊{Array}，如[x, y]， 固定位置[x, y]；传⼊{Function}，如function([x, y]) {return [newX,newY]}，默认显⽰坐标为输⼊参数，⽤户指定的新坐标为输出返回。
// position: getTooltipPosition(0,0),
// 内容格式器：{string}（Template） | {Function}，⽀持异步回调
/*formatter: function(data){
console.log(data);
return data[1]+"："+data[5].count;
}*/
// 拖拽重计算独有，数据孤岛内容格式器：{string}（Template） | {Function}，见表格下⽅
// islandFormatter:
// 显⽰延迟，添加显⽰延迟可以避免频繁切换，特别是在详情内容需要异步获取的场景，单位ms
showDelay: 0,
// 隐藏延迟，单位ms
hideDelay: 0,
// 动画变换时长，单位s，如果你希望tooltip的跟随实时响应，showDelay设置为0是关键，同时transitionDuration设0也会有交互体验上的差别。
transitionDuration: 0,
// ⿏标是否可进⼊详情⽓泡中，默认为false，如需详情内交互，如添加链接，按钮，可设置为true。
//enterable: false,
// 提⽰背景颜⾊，默认为透明度为0.7的⿊⾊
backgroundColor: 'rgba(0,0,0,0.5)',
// 提⽰边框颜⾊
borderColor: '#FF7F50',
// 提⽰边框圆⾓，单位px，默认为4
borderRadius: 10,
// 提⽰边框线宽，单位px，默认为0（⽆边框）
borderWidth: 2,
// 提⽰内边距，单位px，默认各⽅向内边距为5，接受数组分别设定上右下左边距，同css
padding: [15,15,15,15],
// 坐标轴指⽰器
/
*axisPointer:{
// 默认type为line，可选为：'line' | 'cross' | 'shadow' | 'none'(⽆)，指定type后对应style⽣效
type: 'line',
// lineStyle设置直线指⽰器
lineStyle: {
// 颜⾊
color:'#48b',
// 线条样式，可选为：'solid' | 'dotted' | 'dashed'， 树图还可以选：'curve' | 'broken'
type:'solid',
// 线宽
width:10,
/
/ 折线主线(IE8+)有效，阴影⾊彩，⽀持rgba
shadowColor:'rgba(0,0,0,0)',
// 折线主线(IE8+)有效，阴影模糊度，⼤于0有效
shadowBlur:5,
// 折线主线(IE8+)有效，阴影横向偏移，正值往右，负值往左
shadowOffsetX:3,
// 折线主线(IE8+)有效，阴影纵向偏移，正值往下，负值往上
shadowOffsetY:3
},
// crossStyle设置⼗字准星指⽰器
crossStyle:{
crossStyle:{
// 颜⾊
color:'#48b',
// 线条样式，可选为：'solid' | 'dotted' | 'dashed'， 树图还可以选：'curve' | 'broken'
type:'solid',
// 线宽
width:10,
// 折线主线(IE8+)有效，阴影⾊彩，⽀持rgba
shadowColor:'rgba(0,0,0,0)',
// 折线主线(IE8+)有效，阴影模糊度，⼤于0有效
shadowBlur:5,
/
/ 折线主线(IE8+)有效，阴影横向偏移，正值往右，负值往左
shadowOffsetX:3,
// 折线主线(IE8+)有效，阴影纵向偏移，正值往下，负值往上
shadowOffsetY:3
},
// shadowStyle设置阴影指⽰器，areaStyle.size默认为'auto'⾃动计算，可指定具体宽度
shadowStyle:{
// 颜⾊
color: 'rgba(150,150,150,0.3)',
width: 'auto',
// 填充样式，⽬前仅⽀持'default'(实填充)
type: 'default'
}
},*/
// ⽂本样式，默认为⽩⾊字体
textStyle:{
// 颜⾊
color: '#FF7F50',
// ⽔平对齐⽅式，可选为：'left' | 'right' | 'center'
align: 'left',
// 垂直对齐⽅式，可选为：'top' | 'bottom' | 'middle'
baseline: 'bottom',
/
/ 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ，单位px
fontSize: 20,
// 样式，可选为：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
}
},
legend: {
/
/ 显⽰策略，可选为：true（显⽰） | false（隐藏）
show: true,
// 布局⽅式，默认为⽔平布局，可选为：'horizontal' | 'vertical'
orient: 'vertical',
// ⽔平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'left',
// 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）                y: 'top',
// 图例背景颜⾊，默认透明
backgroundColor: 'rgba(0,0,0,0.1)',
// 图例边框颜⾊
borderColor: '#0066FF',
borderColor: '#0066FF',
// 图例边框线宽，单位px，默认为0（⽆边框）
borderWidth: 1,
// 图例内边距，单位px，默认各⽅向内边距为5，接受数组分别设定上右下左边距，同css
padding: [15,15,15,15],
// 各个item之间的间隔，单位px，默认为10，横向布局时为⽔平间隔，纵向布局时为纵向间隔
itemGap: 20,
// 图例图形宽度
itemWidth: 30,
// 图例图形⾼度
itemHeight: 20,
/
/ 默认只设定了图例⽂字颜⾊，更个性化的是，要指定⽂字颜⾊跟随图例，可设color为'auto'
textStyle:{
// 颜⾊
color: '#FF7F50',
// ⽔平对齐⽅式，可选为：'left' | 'right' | 'center'
align: 'left',
// 垂直对齐⽅式，可选为：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ，单位px
fontSize: 20,
// 样式，可选为：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
},
// ⽂本格式器：{string}（Template） | {Function}，模板变量为'{name}'，函数回调参数为name
/*formatter: function(data){
console.log(data);
return data[1]+"："+data[5].count;
},*/
/
/ 选择模式，默认开启图例开关，可选single，multiple
selectedMode: true,
// 配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载⼊
/*selected: {
'降⽔量' : false
},*/
// 图例内容数组
data:[{name:'iphone3'/*,textStyle:{Object},icon:{string}*/},
{name:'iphone4'/*,textStyle:{Object},icon:{string}*/},
{name:'iphone5'/*,textStyle:{Object},icon:{string}*/}]
},
/
/ 值域选择，每个图表最多仅有⼀个值域控件
dataRange: {
// 显⽰策略，可选为：true（显⽰） | false（隐藏）
show: true,
// 布局⽅式，默认为垂直布局，可选为：'horizontal' | 'vertical'
orient: 'horizontal',
// ⽔平安放位置，默认为全图左对齐，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）                x: 'left',
// 垂直安放位置，默认为全图底部，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）                y: 'bottom',
// 值域控件背景颜⾊，默认透明
backgroundColor: 'rgba(0,0,0,0.1)',

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。