ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。
通用基本创建可参照echarts文档
这里只讲一下map(地图)的一些用法总结:
1、常见地图后(中国地图或者其他),我们可以发现地图的默认背景颜色是灰色的,如果需要自定义那么要设置:itemStyle=>normal=>color: \'自定义的颜色值\',
2、如果使用的是中国地图,需要设置每个省份的颜色,在文档中是不提供接口的,也就是没有办法自定义,这时我们可以调用“值域控件”来实现,根据每个省份的不同的值,来定义颜色;设置如下:
1)设置省份值;
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)、设置各省份的颜色,这里会显示出一个图例;
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:自定义颜色值;