Echarts是一款不错的百度开源图表控件,里面包含了很多常见的图,对地图的支持也不错。具体不多说,可以到官网看看文档。
下面举例说明下几个可能用到的东东。
1. 为数据定制不同的颜色。
说实话,里面提供了相当多的方式对颜色的控制,包括边框,标题,图例,图,提示,等等的颜色控制,内容还是相当丰富的。
不同的系列控制颜色很简单,就是在序列的数据里面就可以指定颜色。同一个序列的也可以控制。
a.通过itemStyle来控制颜色
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
]; //可以循环使用颜色
return colorList[params.dataIndex%colorList.length]
}
}
}
}
b.通过数据项来控制。
data:[{
value:2.0,
color:"red"
}, 4.9, 7.0, {
value:23.2,
color:"green"
}]
当然这样的确是可以控制,就是要写的颜色太多了,动态数据的时候工作量还是相当大的。
当然也可以把他们改成不同的序列,再来调整颜色。
2. 设置预测虚线
{
"name":'预测值',
"type":'line',
symbol:'none',
"data":[0],
"itemStyle": {
"normal": {
"lineStyle": {width:1,type:"dashed"}
}
}
}
3.自定义Tooltip
tooltip : {
trigger: 'axis',
formatter: function(v){
if(v.length==2) {return v[0].name+"月<br/>"+v[0].seriesName+":"+v[0].value+"公里<br/>"+v[1].seriesName+":"+v[1].value+"万元";}
else if(v.length==1){
return ''; //自定义实现
}
}
//formatter: '{b}月<br/>{a0}:{c0}人<br/>{a1}:{c1}<br/>'
}
4.显示某省市地图,这个mapType很重要,名称要和Echarts里面的对应,不然地图是显示不出来的
series : [
{
name: '人数',
type: 'map',
mapType: '湖北',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '武汉市',value: 0},
{name: '随州市',value: 0}
]
}
点击地图区域
var ecConfig = require('echarts/config');
myChart = ec.init(document.getElementById(chartId));
myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param){
var selected = param.selected;
for (var p in selected) {
if (selected[p]) {
//do something
}
}
});
myChart.setOption(opt);
5.坐标格式化,这个是项目中遇到的一个栗子。
看到这个纵坐标是不是觉得数字很奇怪呢?我也是想了半天,百思不得其解。后来改了一下纵坐标的axisLabel
yAxis : [{
type:'value',
name:'业绩',
scale:true,
axisLabel:{
formatter:function(val){ return val.toFixed(2); }
}
}],
相信你也看到问题了,Echarts通过splitNumber切分显示label,有些小数后面的位数很多,左边的整数位都挡住了,看不见。
所以格式化一下就ok了。
6.设置Echarts Theme
require.config({
paths: {
echarts: '/web/js/echarts/dist'
}
});
require(
[
'echarts',
'echarts/theme/blue',
'echarts/chart/line',
'echarts/chart/map'
],
function (ec,theme) {
var ecConfig = require('echarts/config');
var myChart = ec.init(document.getElementById(chartId),theme);
window.onresize = myChart.resize; //这样就可以随着窗口改变图大小,你值得拥有!!!
myChart.setOption(opt);
}
);
7.修改饼图线长
name:'用户来源',
selectedOffset:30,
type:'pie',
radius : '80%',
center: ['50%', '60%'],
itemStyle: {
normal: {
label: {
show: true
},
labelLine: {
show: true,
length: 6
}
}
},
data:[
{value:335, name:'搜索引擎'},
{value:234, name:'直接访问'}
]