注：如果需要百度地图，需要百度账号生成apikey调用百度地图链接
下面列出的是利用echart开发数据大屏和管理驾驶舱所遇到的和值得记录下来的点。包含飞行运动轨迹，GPS百度地图和柱状图边距，文本倾斜显示，饼状图，异型图，世界地图，中国地图下钻地图，折线图，雷达图，云标签图，自动轮播效果等等
0.Echart 数据
X轴标题倾斜
axisLabel:{
Rotate:60 //倾斜角度
}
1、柱状体刚开始的距离
xAxis: [{
// boundaryGap: false,
2、横向柱状图和纵向柱状图的区别，在于 纵向树状图
yAxis：【type: ‘value’,】
xAxis：【type: ‘category’,】
3、给X轴Y轴，加单位
echarts柱状图的X轴Y轴加单位的写法
yAxis : [
{
type : ‘value’,
axisLabel:{formatter:'{value} %’}
}
],
如果想控制百分比最大到100% 可添加
yAxis : [
{
type : ‘value’,
max:100,//Y轴最大值 不写的话自动调节
axisLabel:{formatter:'{value} %’}
}
],
> max:100,//Y轴最大值 不写的话自动
4、修改legend字体颜色
修改legend字体颜色：
legend: {
y:’55%’,
textStyle:{
fontSize: 18,//字体大小
color: ‘#ffffff’//字体颜色
},
data: []
}
修改x轴字体颜色：
xAxis : [
{
type : ‘category’,
data : [],
axisLabel: {
show: true,
textStyle: {
color: ‘#ffffff’
}
}
}
]
修改y轴字体颜色：
yAxis : [
{
type : ‘value’,
name : ”,
axisLabel : {
textStyle: {
color: ‘#ffffff’
}
}
}
]
5、echart设置柱子之间的宽度，和柱子本身的宽度
series :
{
name:”,
type:’bar’,
barWidth:20,
barGap:’80%’,/*多个并排柱子设置柱子之间的间距*/
barCategoryGap:’50%’,/*多个并排柱子设置柱子之间的间距*/
data:[],
itemStyle: {
normal: {
barBorderRadius: false,
color: ‘#1E9FFF’,
}
}
}
6、鼠标点击出现圆点放大
7、柱体上有数据
var labelOption = {
normal: {
show: true,
position: ‘top’,
align: ‘center’,
formatter: ‘{c}’,
fontSize: ‘100%’,
rich: {
// name: {
// textBorderColor: ‘#fff’
// }
}
}
};
orientation: portrait;/
强制竖屏
如何多个数据进行，ffarmat排序进行
//数据进行push出来整个
success: function (result) {
$.each(result, function (index, item) {
qddat1.push(item.channelName);
qddat2.push(item.premiumBudget);
// 拼接出新的数据，进行移除隐藏问题
qddat3.push({
“name”:item.channelName,
“value”:item.premiumY,
“premiumYRate”:item.premiumYRate,
“premiumBudgetComplete”:item.premiumBudgetComplete
});
});
var qddat4 = [];
var qddat5 = [];
var qddat6 = [], qdata7 = [], qdata8 = [];
for (var i = qddat1.length – 1; i >= 0; i–) {
qddat4.push(qddat1[i]);
qddat5.push(qddat2[i]);
qddat6.push(qddat3[i]);
/* qdata7.push(qtbzf[i]);
qdata8.push(qysdc[i]);*/
}
chart2(qddat4, qddat5, qddat6, qdata7, qdata8);
},
formatter: function (params) {
var htmlStr = “”;
for (var i = 0; i < params.length; i++) {
if (params[i].seriesName == ‘实际’ ) {
htmlStr += “同比增幅” + “:” + params[i].data.premiumYRate + “%” + “</br>”;
htmlStr += “预算达成” + “:” + params[i].data.premiumBudgetComplete + “%” + “</br>”;
}
}
console.log(htmlStr);
return htmlStr;
}
8、设置网格背景 x轴和y轴内
splitLine: {
show: true,
lineStyle: {
color: ‘#1e2c41’, // 网格颜色
width: 1, //网格线宽
type: ‘solid’, //网格borderstyle
shadowColor: ‘rgba(255, 255, 255, 0.5)’,
shadowBlur: 10,
shadowOffsetX:2,
shadowOffsetY:1
},
},
9.echart 设置yAxis.min y轴的数据
min: function(value) {
return value.min – 100;
},
max: function(value) {
return parseInt(value.max +100);
}
10、去除指示线
echarts中如何去除（修改）指示线
tooltip:{
axisPointer :{
type: (‘line’ | ‘cross’ | ‘shadow’ | ‘none'(无)) ,
lineStyle ->color: (填颜色值) ,
type: (‘solid’ | ‘dotted’ | ‘dashed’， 树图还可以选：’curve’ | ‘broken’) ,
width: (指示线宽) ,
shadowColor : (指示线阴影颜色) ,
shadowBlur: (大约0的数) ,
shadowOffsetX : (横向偏移正右负左) ,
shadowOffsetY : (纵向偏移正上负下)
}
}
11、x轴y轴颜色
xAxis: [{
type: ‘category’,
axisLine: { //x轴颜色
lineStyle: {
color: ‘#1e2c41’
}
},
splitLine: { //网格颜色
interval: 0,
show: true,
lineStyle: {
color: ‘#1e2c41’,
width: 1,
type: ‘solid’,
shadowColor: ‘rgba(255, 255, 255, 0.5)’,
},
},
boundaryGap: 10,
data: dataX
// data: [‘2015’, ‘2016’, ‘2017’, ‘2018’, ‘2019’]
}],
12、tip总是显示
13扩展效果
圈层颜色修改
color:’blue’,
series: [{
type: ‘effectScatter’,
coordinateSystem: ‘geo’,
zlevel: 2,
rippleEffect: { //涟漪特效
color:’white’,
period: 4, //动画时间，值越小速度越快
brushType: ‘stroke’, //波纹绘制方式 stroke, fill
scale: 20, //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: ‘right’, //显示位置
offset: [5, 0], //偏移设置
formatter: function(params) { //圆环显示文字
return params.data.name;
},
fontSize: 13,
},
emphasis: {
show: false
}
},
// symbol: ‘circle’,
showSymbol: false,
hoverAnimation: true,
itemStyle: {
normal: {
color: ‘#ec8000’, //设置图例颜色cricle边框
borderWidth: 2,
show: false,
}
},
// symbol: ‘circle’, //折点设定为实心点
symbolSize: function(val) {
return 8; //圆环大小
},
data: res11
},
14、echart legend 用自定义图片
当折线图时，legend默认时rect形式，如果需要改图例形状，可以自己设置legend的icon属性
legend: {
icon:’stack’
},
15、自定义每个图例样式：为data的每个对象修改icon属性
legend:{
show:true,
orient:’horizontal’,
borderColor:’#df3434′,
borderWidth:2,
data:[
{
name:’蒸发量’,
textStyle:{
fontSize:12,
fontWeight:’bolder’,
color:’#cccccc’
},
icon:’stack’
},
{
name:’降水量’,
textStyle:{
fontSize:12,
fontWeight:’bolder’,
color:’#df3434′
},
icon:’pie’
}
]
}
2、修改图例的图标为自定义图片
首先我找了如下两张图片放在根目录下的images文件夹下
legend:{
show:true,
orient:’horizontal’,
borderColor:’#df3434′,
borderWidth:2,
data:[
{
name:’蒸发量’,
textStyle:{
fontSize:12,
fontWeight:’bolder’,
color:’#cccccc’
},
icon:’image://./images/icon1.png’//格式为’image://+icon文件地址’，其中image::后的//不能省略
},
{
name:’降水量’,
textStyle:{
fontSize:12,
fontWeight:’bolder’,
icon:’image://./images/icon2.png’//格式为’image://+icon文件地址’，其中image::后的//不能省略
},
icon:’pie’
}
]
}
legend:{
itemWidth: 10 , //设置图片宽度为10
itemHeight: 10 //设置图片高度为10
}
15、html页面地图图层，display：none; display:block
type: ‘scatter’,
coordinateSystem: ‘geo’, 出现数据被隐藏的情况。
可以把地图的areaColor设置为有色进行检查
itemStyle: {
normal: {
areaColor: ‘none’,
borderWidth: ‘0px’,
borderColor: ‘none’
},
emphasis: {
areaColor: ‘none’
}
}
数组状的字符串，转成对象数组
eval(“(“+data[i].carLine+”)”);
Ajax出现进入到error，解决方案是空白和json对象的属性值key值是没有双引号
16、饼状图 指引线
series : [
{
type: ‘pie’,
radius : ‘65%’,
center: [‘50%’, ‘50%’],
selectedMode: ‘single’,
data:[
{value:535, name: ‘荆州’},
{value:510, name: ‘兖州’},
{value:634, name: ‘益州’},
{value:735, name: ‘西凉’}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
}
},
label: {
normal: {
show:true,//标签隐藏
// position: ‘center’
},
emphasis: {
show: true,
textStyle: {
fontSize: ’30’,
fontWeight: ‘bold’
}
}
},
labelLine:{//指示线
show:true
}
}
]
17、116.404, 39.915 百度地图设置中心点不起作用 echart
缺少 Cannot read property ‘0’ of undefined
at e.getLineCoords (echarts-3.8.5.min.js:22)
地图的中心点在左上角
只要先去show
然后再生成
Math.max.apply
取出数组中最大数据
Math.max.apply(null, [‘1′,’2′,’3.1′,’3.2’])
< 3.2
17、百度地图和echart结合，出现个个性地图设置
地图版本要用v3.0 样式
var bmap = myChart.getModel().getComponent(‘bmap’).getBMap();
bmap.setMapStyleV2({
styleId: ‘7479f0ec695598ad21b6ddfb3367d34f’
});
map.setViewport(pointsView)
var points = [point1, point2,point3];
var view = map.getViewport(eval(points));
var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint,mapZoom);
//异型图的加载，和边距。边距barCategoryGap和barWidth不能同时设置，且x轴的和数据个数要一致
option = {
xAxis: {
data: [‘a’, ‘b’, ‘c’, ‘d’,’3′,’3′,’3′,’9′,’9′],
axisTick: {show: false},
axisLabel: {
formatter: ‘barGap: \’-100%\”
}
},
yAxis: {
splitLine: {show: false}
},
animationDurationUpdate: 1200,
series: [{
type: ‘bar’,
itemStyle: {
normal: {
color: ‘#ddd’
}
},
silent: true,
// barWidth: 40,
barGap: ‘-100%’, // Make series be overlap
data: [60, 60, 60, 60, 60, 60, 60, 60],
barCategoryGap:’20%’
}, {
type: ‘bar’,
// barWidth: 40,
z: 10,
data: [45, 60, 13, 25, 60, 60, 60, 60],
barCategoryGap:’20%’
}]
};
var barGaps = [‘30%’, ‘-100%’];
var loopIndex = 0;
// setInterval(function () {
// var barGap = barGaps[loopIndex];
// myChart.setOption({
// xAxis: {
// axisLabel: {
// formatter: ‘barGap: \” + barGap + ‘\”
// }
// },
// series: [{
// barGap: barGap
// }]
// });
// loopIndex = (loopIndex + 1) % barGaps.length;
// }, 2000);
18、多个设置轮播图 后台控制tooltip的时候会出现，多个tooltip直接删除div即可（利用打印来调试程序）
19.echart运动线轨迹飞行图 3.2.2版本以上
function convertDataLines(data) {
var res = [];
var toCoord = [‘111.461338’, ‘40.752298’];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
res.push(
{
coords: [
dataItem.value, // 起点
toCoord // 终点
]
}
);
}
return res;
};