澳门新浦京电子游戏ECharts:基于HTML5 Canvas的JavaScript图表库

ECharts开源来自百度商业前端数据可视化团队,基于html5
Canvas,是五个纯Javascript图表库,提供直观,生动,可互相,可本性化定制的数据可视化图表。改正的拖拽重计算、数据视图、值域漫游等特色大大狠抓了顾客体验,付与了客商对数据开展开采、整合的才干。

 

ECharts,缩写来自Enterprise
Charts,商业级数据图表,三个纯Javascript的图表库,能够流利的周转在PC和平运动动器具上,宽容当前多方浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层注重轻量级的Canvas类库ZRender,提供直观,生动,可相互,可中度天性化定制的多少可视化图表。立异的拖拽重总结、数据视图、值域漫游等性情大大提升了客户体验,付与了顾客对数码实行打通、整合的力量。

支撑折线图(区域图)、柱状图(条状图)、散点图(气泡图)、布林线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向结构图、地图、仪表盘、漏斗图、事件河流图等12类图表,同期提供标题,详细情况气泡、图例、值域、数据区域、时间轴、工具箱等7个可相互组件,协助多图表、组件的联合浮动和混合着搭配展现。

通用基本创立可参看澳门新浦京电子游戏 ,echarts文档

 

此间只讲一下map(地图)的局地用法总计:

 
 1、多如牛毛地图后(中国地图依旧其余),大家能够开掘地图的暗许背景颜色是肉桂色的,假诺要求自定义那么要安装:itemStyle=>normal=>color:
‘自定义的水彩值’,

 
 2、倘使利用的是神州地图,必要设置各类省份的颜料,在文书档案中是不提供接口的,相当于未有章程自定义,那时候大家得以调用“值域控件”来促成,依照各种省份的差别的值,来定义颜色;设置如下:

 

1)设置省份值;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
series : [
       {
           name: '随机数据',
           type: 'map',
           mapType: 'china',
           selectedMode : 'single',
           itemStyle:{
               normal:{
label:{show:true},
borderWidth:1,//省份的边框宽度
                   borderColor:'#f60',//省份的边框颜色
           color:'#ece2df'//地图背景颜色
//areaStyle:{color:'#f60'}//设置地图颜色
},
               emphasis:{label:{show:true}}
           },
           data:[
               {name: '北京', selected:false,value:1},
               {name: '天津', selected:false,value:2},
               {name: '上海', selected:false,value:3},
               {name: '重庆', selected:false,value:4},
               {name: '河北', selected:false,value:5},
               {name: '河南', selected:false,value:6},
               {name: '云南', selected:false,value:7},
               {name: '辽宁', selected:false,value:8},
               {name: '黑龙江', selected:false,value:9},
               {name: '湖南', selected:false,value:10},
               {name: '安徽', selected:false,value:11},
               {name: '山东', selected:false,value:12},
               {name: '新疆', selected:false,value:13},
               {name: '江苏', selected:false,value:14},
               {name: '浙江', selected:false,value:15},
               {name: '江西', selected:false,value:16},
               {name: '湖北', selected:false,value:17},
               {name: '广西', selected:false,value:18},
               {name: '甘肃', selected:false,value:19},
               {name: '山西', selected:false,value:20},
               {name: '内蒙古', selected:false,value:21},
               {name: '陕西', selected:false,value:22},
               {name: '吉林', selected:false,value:23},
               {name: '福建', selected:false,value:24},
               {name: '贵州', selected:false,value:25},
               {name: '广东', selected:false,value:26},
               {name: '青海', selected:false,value:27},
               {name: '西藏', selected:false,value:28},
               {name: '四川', selected:false,value:29},
               {name: '宁夏', selected:false,value:30},
               {name: '海南', selected:false,value:31},
               {name: '台湾', selected:false,value:32},
               {name: '香港', selected:false,value:33},
               {name: '澳门', selected:false,value:34}
           ]//各省地图颜色数据依赖value
       }
   ]

  2)、设置外市份的颜色,这里博览会示出一个图例;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
dataRange: {
       x: '-1000px',//图例横轴位置
       y: '-1000px',//图例纵轴位置
       splitList: [
           {start:1, end:1, label: '北京', color: '#cfc5de'},
{start:2, end:2, label: '天津', color: '#f1ebd1'},
{start:3, end:3, label: '上海', color: '#feffdb'},
{start:4, end:4, label: '重庆', color: '#e0cee4'},
{start:5, end:5, label: '河北', color: '#fde8cd'},
{start:6, end:6, label: '河南', color: '#e4f1d7'},
{start:7, end:7, label: '云南', color: '#fffed7'},
{start:8, end:8, label: '辽宁', color: '#e4f1d7'},
{start:9, end:9, label: '黑龙江', color: '#e4f1d7'},
{start:10, end:10, label: '湖南', color: '#fffed7'},
{start:11, end:11, label: '安徽', color: '#fffed8'},
{start:12, end:12, label: '山东', color: '#dccee7'},
{start:13, end:13, label: '新疆', color: '#fffed7'},
{start:14, end:14, label: '江苏', color: '#fce8cd'},
{start:15, end:15, label: '浙江', color: '#ddceeb'},
{start:16, end:16, label: '江西', color: '#e4f1d3'},
{start:17, end:17, label: '湖北', color: '#fde8cd'},
{start:18, end:18, label: '广西', color: '#fde8cd'},
{start:19, end:19, label: '甘肃', color: '#fde8cd'},
{start:20, end:20, label: '山西', color: '#fffdd6'},
{start:21, end:21, label: '内蒙古', color: '#ddcfe6'},
{start:22, end:22, label: '陕西', color: '#fad8e9'},
{start:23, end:23, label: '吉林', color: '#fce8cd'},
{start:24, end:24, label: '福建', color: '#fad8e8'},
{start:25, end:25, label: '贵州', color: '#fad8e8'},
{start:26, end:26, label: '广东', color: '#ddcfe8'},
{start:27, end:27, label: '青海', color: '#fad8e9'},
{start:28, end:28, label: '西藏', color: '#ddcfe6'},
{start:29, end:29, label: '四川', color: '#e4f1d5'},
{start:30, end:30, label: '宁夏', color: '#fefcd5'},
{start:31, end:31, label: '海南', color: '#fad8e9'},
{start:32, end:32, label: '台湾', color: '#fce8cd'},
{start:33, end:33, label: '香港', color: '#dc9bbb'},
{start:34, end:34, label: '澳门', color: '#e0f7cc'},
 
       ]
   },//各省地图颜色;start:值域开始值;end:值域结束值;label:图例名称;color:自定义颜色值;

ProcessOn是贰个有益于易用、免费高速的在线作图工具,运用它能够无需付费制作多种图,譬喻:Flowchart流程图,BPMN图,Org协会布局图,EVC集团市值链图,EPC事件经过链图,而且图形协助正在不断丰裕。

ECharts (Enterprise Charts 商业成品图表库State of Qatar

提供商业产物常用图表,底层基于ZRender(七个簇新的轻量级canvas类库),创立了坐标系,图例,提示,工具箱等根底零构件,并在这上营造出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、上影线图、地图、力导向构造图以致和弦图,相同的时候帮助任性维度的聚成堆和多图表混合表现。

澳门新浦京电子游戏 1

ECharts,缩写来自Enterprise
Charts,商业级数据图表,多个纯Javascript的图表库,能够大功告成的运作在PC和活动道具上,宽容当前多方浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层信任轻量级的Canvas类库ZRender,提供直观,生动,可互相,可中度本性化定制的数量可视化图表。立异的拖拽重计算、数据视图、值域漫游等特征大大加强了用户体验,授予了顾客对数码举行发掘、整合的手艺。

特色

推荐介绍阅读那份在线文书档案 《 Why ECharts
? 》,从当中可以越来越直观的经验到ECharts的表征以致赶快浏览到全部图表类型。
*文书档案中显现的分副本性在IE8-中并未有收获扶助,所以提议选用IE9+、chrome、safari、firefox或opear等浏览器阅读那份文档。

扶持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、上影线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同不平时间提供标题,详细的情况气泡、图例、值域、数据区域、时间轴、工具箱等7个可相互组件,帮忙多图表、组件的联合浮动和混合着去搭配表现。

混搭

澳门新浦京电子游戏 2

拖拽重总结

澳门新浦京电子游戏 3

多少视图

澳门新浦京电子游戏 4

动态类型切换

澳门新浦京电子游戏 5

图例开关

澳门新浦京电子游戏 6

数据区域选拔

澳门新浦京电子游戏 7

多国际图书馆协会联合会合浮动

澳门新浦京电子游戏 8

值域漫游

澳门新浦京电子游戏 9

炫光特效

澳门新浦京电子游戏 10

广大散点图

澳门新浦京电子游戏 11

子区域地图形式

澳门新浦京电子游戏 12

GeoJson地图扩张

澳门新浦京电子游戏 13

 

标线协理

澳门新浦京电子游戏 14

多维度聚积

澳门新浦京电子游戏 15

百搭时间轴

澳门新浦京电子游戏 16

性子化定制

澳门新浦京电子游戏 17 澳门新浦京电子游戏 18

发表评论

电子邮件地址不会被公开。 必填项已用*标注