关于echarts使用的常见问题总结

关于echarts使用的问题总结 1.legend图例不显示的问题: 在legend中的data为一个数组项,数组项通常为一个字符串,每一项需要对应一个系列的 name,如果数组项的值与name不相符则图例不会显示; 2.图表位置无法紧贴画布边缘的问题: 在grid绘图网格里,containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决;

grid:{
containLabel:false
}

3.反向坐标轴: 在echarts3中xAis和

yAis:{
  inverse:true  
}

新添加了inverse属性,在inverse为true的情况下执行反向坐标轴;

4.动态替换地图图表的方法: 在echarts3中由于地图精度的提高,不在内置地图数据可以在地图下载页面http://echarts.baidu.com/download-map.html 下载对应文件,按需求引用; 地图的geojson文件只包含了两层数据(国>省,省>市,市>区),如需全国所有省市地区的json文件请联系我; eCharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册,我一般使用后者; 方法如下:

function mapCharts(name,id){
$.get('json路径/'+name+'.json', function (geoJson) {
echarts.registerMap(name, geoJson);
var chart = echarts.init(document.getElementById(id));
chart.setOption({
series: [{
type: 'map',
map: name
}]
});
});
};

5.柱状图的宽度问题: 如设计图给出柱状图指定宽度,直接指定series.barWidth柱状图的宽度(默认barWidth为自适应),自适应功能会失效,在小尺寸状态下柱状图宽度不会发生改变;

如不指定宽度,使用默认自适应会导致多条数据与单条数据宽度显示不一致,所以在设计图明确宽度的情况下,使用series.barMaxWidth(最大宽度)属性,来解决这一问题;

自适应多条数据的效果

自适应单条数据的效果

使用了最大高度的效果

6.部分情况下初始化图表失败的问题 在使用类似Bootstrap轮播图等使用display:none属性隐藏其他图片的插件时,这种情况下会导致echarts初始化时获取不到画布宽高,导致绘制图表失败; 如果不考虑ie9以下可考虑swiper3等使用overfllow:hidden属性隐藏多余图片的插件,如需兼容ie9以下可考虑swiper2(高度无法自适应),或者自己手写轮播图;

7.echarts图表响应式的问题 echarts提供了图表的resize方法,使用时可在setoption后添加如下代码:

$(window).on('resize',function(){
myChart.resize();
});

8.图表判断返回颜色 echarts的color属性提供了function方法

color: function(params) {
//颜色数组
var colorList = [
‘#C1232B‘,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘,
‘#FE8463‘,‘#9BCA63‘,‘#FAD860‘,‘#F3A43B‘,‘#60C0DD‘,
‘#D7504B‘,‘#C6E579‘,‘#F4E001‘,‘#F0805A‘,‘#26C0C0‘
];
//判断的代码

//根据条件返回相应颜色
return colorList[params.dataIndex]
}

9.使用formatter方法格式化文本(用于在label标签,tolltip等显示信息需要自定义时) legend图例下的使用 使用字符串模板,模板变量为图例名称 {name}

formatter: 'Legend {name}'
使用回调函数
formatter: function (name) {
return 'Legend ' + name;
};

label下的使用 主要是对params(一个对象包含data数据)参数的返回

formatter: function (params) {
return params.xxx;
};

10.tolltip里添加小标识(圆点之类的)的方法 在formatter里返回时拼接html元素;

formatter: function(params) {
if(params.data.value) {
if(params.data.value.length > 0) {
var str = '';
for(var i = 0; i < params.data.value.length; i++) {
if(str !== '') {
str += '</br>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color[i] + '"></span>';
}
str += params.data.value[i] + '人';
}
return params.name + '</br>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color[0] + '"></span>' + str;
}
}
return params.data.name + ':' + (params.data.value ? params.data.value : '--');
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数说工作室

【SAS Says】基础篇:7. SAS宏初步

宏用来处理重复工作最好,比如你需要跑10个回归,用proc reg...,这10个回归其他都一样,就是因变量y每次需要换。那么将回归程序写成一个宏,每次用的时候...

3396
来自专栏令仔很忙

UML之包图

   当对一个比较复杂的软件系统进行建模时,会有大量的类、接口、组件、节点和图需要处理;如果放在同一个地方的话,信息量非常的大,显得很乱,不方便查询,所以就对这...

571
来自专栏xingoo, 一个梦想做发明家的程序员

如何在Elasticsearch中安装中文分词器(IK+pinyin)

如果直接使用Elasticsearch的朋友在处理中文内容的搜索时,肯定会遇到很尴尬的问题——中文词语被分成了一个一个的汉字,当用Kibana作图的时候,按照...

2667
来自专栏数据科学学习手札

(数据科学学习手札41)folium基础内容介绍

  folium是js上著名的地理信息可视化库leaflet.js为Python提供的接口,通过它,我们可以通过在Python端编写代码操纵数据,来调用leaf...

2087
来自专栏游戏开发那些事

【Unity游戏开发】UGUI不规则区域点击的实现

  马三从上一家公司离职了,最近一直在出去面试,忙得很,所以这一篇博客拖到现在才写出来。马三在上家公司工作的时候,曾处理了一个UGUI不规则区域点击的问题,制作...

893
来自专栏算法+

分享用于学习C++图像处理的代码示例

为了便于学习图像处理并研究图像算法, 俺写了一个适合初学者学习的小小框架。 麻雀虽小五脏俱全。 采用Decoder:stb_image https://gith...

47011
来自专栏hightopo

原 荐 快速开发 HTML5 WebGL 的

1663
来自专栏小狼的世界

使用Python读取Mp3的标签信息

MP3是音频文件最流行的格式,它的全称是 MPEG layer III。但是这种格式不支持对于音频内容的描述信息,包括歌曲名称、演唱者、专辑等等。

943
来自专栏数据小魔方

ggplot2学习笔记之——ggplot2主题调整系统

ggplot2绘图系统拥有庞大、健全的图形美化系统,这一套图形美化依赖于图例调整系统、标度调整系统、标签调整系统、主题调整系统以及分面系统。 本节仅从主题调整系...

2755
来自专栏落影的专栏

AVFoundation详细解析(一)视频合并与混音

回顾 在上一篇GPUImage详细解析(八)视频合并混音介绍了如何使用GPUImage进行视频的合并,以及混音。这次使用AVFoundation框架来实现这个功...

3076

扫描关注云+社区