echarts如何在x轴标签上增加echarts鼠标悬浮放大提示

echarts吧-百度贴吧
签到排名:今日本吧第个签到,
本吧因你更精彩,明天继续来努力!
本吧排名:
本吧签到人数:13
可签7级以上的吧50个
本月漏签0次!
成为超级会员,赠送8张补签卡
连续签到:天&&累计签到:天
超级会员单次开通12个月以上,赠送连续签到卡3张
我的y轴数据如下 yAxis: { type: 'value' }, series: [ { type: 'line', data: [22.1, 22.2, 22.1, 22.3, 22.5] } ] 效果
请问下怎么获取散点图数据,并给散点图添加点击事件啊
如何实现柱状图和饼状图切换
如题! 目前官网的工具栏按钮在鼠标移入时才显示按钮名称,现在如果想始终显示,该如何设置? 此前网
求大神帮助,怎样在图表中使用html标签,比如&sub&&/sub&
大佬们,Echarts饼图中如果将类似于“22.5%” 格式转换成“22,5%”?
请问如何复制echarts,通过let div2=div1.cloneNode(true);能显示div,里面的echarts不显示
请教大神,echart中的树形图,怎么根据两个节点的关系情况,连线可以设置成不同的颜色?如下图黄色框
求大神帮忙,地图鼠标移到一个省上面,就将这个省放大上浮
解决各种问题、欢迎大家提问。
欢迎加入Echarts学术交流群,群聊号码:
因为用visualMap 视觉映射组件将各个点的颜色根据数值的大小而改变,不是直接设置的,所以我不知道这些
找了很久头晕目眩
代码和官方给的一模一样为什么到浏览器里什么也没有
请问一下echarts 的一些市、县、区都比较老,好多新区都没有,谁有更新的市、县、区数据?
欢迎加入Echarts学术交流群,群聊号码:
欢迎加入Echarts学术交流群,群聊号码:
ajax异步添加数据时,echarts-all.js:569 series[0] chart type has not been defined.错误
欢迎加入Echarts学术交流群,群聊号码:
我现在在做这样一个关系图,但是我要动态获取数据,我的想法是把数据先写入les miserables.gexf中,再取出
请问哪位大佬会echarts画这种分段的图啊,非常谢谢
欢迎加入Echarts学术交流群,群聊号码:
请问怎么在地球两点之间画线
欢迎加入Echarts学术交流群,群聊号码:
新手尝试写个热力图,但是运行后网页只显示个框架,报错说s不是一个配置器,不知道怎么回事,求大神
哪位大佬有echarts的china.js文件跪求一份!邮箱:
如上图,我用的json地图文件和地图js结合的地图,在ie,火狐浏览器下都可以显示,就是在谷歌里不显示,
想实现图里坐标轴中断的效果,echarts有支持么?不支持的话,是不是可以自己写代码解决
欢迎加入Echarts学术交流群,群聊号码:
有问题进群问去吧。贴吧不看了。 Echarts官方qq群: Echarts官方qq群: Echarts官方qq群:
一个8 一个3 可以分开显示吗
有没有大佬碰见过的?有解决的办法嘛。在线等。急急急急....
我点饼状图的admin 上面表格里是admin的数据 我再点zlj的时候 不进断点,数据还是admin的 怎么回事啊
在使用echarts的字符云过程中发现,每次刷新这个图,显示出来的标签有时候竟然少了几个,以下面代码为 例,直接贴到echarts官网实例编辑框中,点刷新
欢迎加入Echarts学术交流群,群聊号码:
求助。echarts饼图是否自定义每个扇区的半径?
按照百度echarts的水球图的官网demo做的,引入的echarts-liquidFill.js,但是一直在报错: Failed to execute 'arc'
想实现点击省份出来相应的市,然后点击市出来相应的县. 相当于一个三级联动. 我网上查了一个需要用nodej
搞了好多天,这个东西怎么去掉?或者不让他点击。
用settimeout动态刷新图表,内存不断增加,时间久了会内存溢出,浏览器崩溃,包括官网上的这个例子http://
详细代码和实例 http://gallery.echartsjs.com/editor.html?c=xBywXzE55f&v=2 请各位高手帮看一下怎么处理,感激不尽
发贴红色标题
签到六倍经验
兑换本吧会员
赠送补签卡1张,获得
助攻总额: 43W
发表后自动分享本贴
使用签名档&在 SegmentFault,学习技能、解决问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
1.Option配置如下{
color: ['#ff4400', '#ffde2a'],
tooltip : {
trigger: 'item',
formatter: "{d}%",
show:false,
enterable:true
orient : 'vertical',
x : 'center',
y:"center",
data:[percent*100+"%"],
textStyle:{color:"#ff4400",fontSize:20},
selectedMode:false,
itemWidth:0
calculable : false,
series : [
name:'比例',
type:'pie',
center : ['50%', '50%'],
radius : ['50px', '55px'],
itemStyle : {
normal : {
show : false
labelLine : {
show : false
emphasis : {
show : false,
position : 'center',
textStyle : {
fontSize : '18',
fontWeight : 'bold'
{value:percent, name:percent*100+"%"},
{value:(1-percent), name:''}
2.生成的图标鼠标悬浮上去会变大
求大神指教如何才能使鼠标悬浮上去的时候不做任何操作,也就是不产生变大的效果
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
series : [
name:'比例',
type:'pie',
hoverAnimation:false,
center : ['50%', '50%'],
radius : ['50px', '55px'],
itemStyle : {
normal : {
show : false
labelLine : {
show : false
emphasis : {
show : false,
position : 'center',
textStyle : {
fontSize : '18',
fontWeight : 'bold'
{value:percent, name:percent*100+"%"},
{value:(1-percent), name:''}
hoverAnimation:false
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
悬浮的时候会高亮,求大神帮忙看下
同步到新浪微博
分享到微博?
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:
在 SegmentFault,学习技能、解决问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。Echarts-axislabel文字过长导致显示不全或重叠
时间: 11:02:01
&&&& 阅读:100341
&&&& 评论:
&&&& 收藏:0
标签:先看两张图
按目前情况,官方并为对axislabel的高度或者宽度做调整。所以解决方案只能从其他方案下手
解决方案有几种
第一种为上图解决方案
设置grid属性定义图的大小来释放空间,使得axislabel有足够的空间
/** 参数传值全部为数组
* @param names x轴值
* @param xycounts
* @param zscounts
* @param xypjjlrs
* @param zspjjlrs
function drawZZTZXTBJ(names,xycounts,zscounts,xypjjlrs,zspjjlrs){
//console.log(zspjjlrs);
var myChart = echarts.init(document.getElementById(‘main2‘));
myChart.setOption({
tooltip : {
trigger : ‘axis‘,
showDelay : 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
axisPointer : {
// 坐标轴指示器,坐标轴触发有效
type : ‘shadow‘
// 默认为直线,可选为:‘line‘ | ‘shadow‘
data:[‘做市‘,‘协议‘,‘做市平均净利润(万元)‘,‘协议平均净利润(万元)‘]
type : ‘category‘,
axisLabel:{
interval:0,
rotate:45,
textStyle:{
color:"#222"
data : names
grid: { // 控制图的大小,调整下面这些值就可以,
y2: 150,//&y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
type : ‘value‘,
name : ‘企业数量‘,
axisLabel : {
formatter: ‘{value}‘
type : ‘value‘,
name : ‘净利润(万元)‘,
axisLabel : {
formatter: format_w
series : [
name:‘做市‘,
type:‘bar‘,
stack: ‘总量‘,
/*itemStyle : {
show: true,
position: ‘insideTop‘,
textStyle:{
color:‘#000‘
data:zscounts
name:‘协议‘,
type:‘bar‘,
stack: ‘总量‘,
barWidth : 10,
/*itemStyle : {
show: true,
position: ‘insideTop‘,
textStyle:{
color:‘#000‘
data:xycounts
name:‘做市平均净利润(万元)‘,
type:‘line‘,
yAxisIndex: 1,
data:zspjjlrs
name:‘协议平均净利润(万元)‘,
type:‘line‘,
yAxisIndex: 1,
data:xypjjlrs
//console.log(data);
var names=[];
var xycounts=[];
var zscounts=[];
var xypjjlrs=[];
var zspjjlrs=[];
for(var i=(data.list.length-1);i&=0;i--){
names.push(data.list[i].name);
xycounts.push(data.list[i].xycount == null ?0:data.list[i].xycount);
zscounts.push(data.list[i].zscount == null ?0:data.list[i].zscount);
xypjjlrs.push(data.list[i].xypjjlr == null ?0.00:(data.list[i].xypjjlr/10000).toFixed(2));
zspjjlrs.push(data.list[i].zspjjlr == null ?0.00:(data.list[i].zspjjlr/10000).toFixed(2));
drawZZTZXTBJ(names,xycounts,zscounts,xypjjlrs,zspjjlrs);
第二种方式
当文字不是特别长的情况下可设置文字自动换行,调用函数解决
在axisLabel下添加属性:
formatter:function(val){
return val.split("").join("\n");
第三种方案
与第二种方案差不多,只是合理利用空间,增加字符展示长度(网上copy)
* &li&Echarts 中axisLabel中值太长自动换行处理;经测试:360、IE7-IE11、google、火狐
* 均能正常换行显示&/li&
* &li&处理echarts 柱状图 x 轴数据显示根据柱子间隔距离自动换行显示&/li&
* @param title
将要换行处理x轴值
* @param data
* @param fontSize
x轴数据字体大小,根据图片字体大小设置而定,此处内部默认为12
* @param barContainerWidth
柱状图初始化所在的外层容器的宽度
* @param xWidth
柱状图x轴左边的空白间隙 x 的值,详见echarts文档中grid属性,默认80
* @param x2Width
柱状图x轴邮编的空白间隙 x2 的值,详见echarts文档中grid属性,默认80
* @param insertContent
每次截取后要拼接插入的内容, 不传则默认为换行符:\n
* @returns titleStr
截取拼接指定内容后的完整字符串
* @author lixin
function getEchartBarXAxisTitle(title, datas, fontSize, barContainerWidth, xWidth, x2Width, insertContent){
if(!title || title.length == 0) {
alert("截取拼接的参数值不能为空!");return false;
if(!datas || datas.length == 0) {
alert("用于计算柱状图柱子个数的参数datas不合法!"); return false;
if(isNaN(barContainerWidth)) {
alert("柱状图初始化所在的容器的宽度不是一个数字");return false;
if(!fontSize){
fontSize = 12;
if(isNaN(xWidth)) {
xWidth = 80;//默认与echarts的默认值一致
if(isNaN(x2Width)) {
xWidth = 80;//默认与echarts的默认值一致
if(!insertContent) {
insertContent = "\n";
var xAxisWidth =
parseInt(barContainerWidth) - (parseInt(xWidth) + parseInt(x2Width));//柱状图x轴宽度=统计页面宽度-柱状图x轴的空白间隙(x + x2)
var barCount = datas.
//x轴单元格的个数(即为获取x轴的数据的条数)
var preBarWidth = Math.floor(xAxisWidth / barCount);
//统计x轴每个单元格的间隔
var preBarFontCount = Math.floor(preBarWidth / fontSize) ;
//柱状图每个柱所在x轴间隔能容纳的字数 = 每个柱子 x 轴间隔宽度 / 每个字的宽度(12px)
if(preBarFontCount & 3) {
//为了x轴标题显示美观,每个标题显示留两个字的间隙,如:原本一个格能一样显示5个字,处理后一行就只显示3个字
preBarFontCount -= 2;
} else if(preBarFontCount &= 3 && preBarFontCount &= 2) {//若每个间隔距离刚好能放两个或者字符时,则让其只放一个字符
preBarFontCount -= 1;
var newTitle = "";
//拼接每次截取的内容,直到最后为完整的值
var titleSuf = "";
//用于存放每次截取后剩下的部分
var rowCount = Math.ceil(title.length / preBarFontCount);
//标题显示需要换行的次数
if(rowCount & 1) {
//标题字数大于柱状图每个柱子x轴间隔所能容纳的字数,则将标题换行
for(var j = 1; j &= rowC j++) {
if(j == 1) {
newTitle += title.substring(0, preBarFontCount) + insertC
titleSuf = title.substring(preBarFontCount);
//存放将截取后剩下的部分,便于下次循环从这剩下的部分中又从头截取固定长度
var startIndex = 0;
var endIndex = preBarFontC
if(titleSuf.length & preBarFontCount) {
//检查截取后剩下的部分的长度是否大于柱状图单个柱子间隔所容纳的字数
newTitle += titleSuf.substring(startIndex, endIndex) + insertC
titleSuf = titleSuf.substring(endIndex);
//更新截取后剩下的部分,便于下次继续从这剩下的部分中截取固定长度
} else if(titleSuf.length & 0){
newTitle += titleSuf.substring(startIndex);
newTitle =
return newT
* 滚动瀑布加载函数
* @param opts{selector: "#id"(需要滚动瀑布加载的元素选择器), fn: getUserInfo(瀑布加载时的回调函数方法名), fnParams: param(参数)}
function scrollLoad(opts){
var options = {
selector: null,
fnParams: null
options =$.extend(true, options, opts);
var selector = options.
var callbackFn = options.
var fnParams = options.fnP
if(selector == null || selector == "" || selector == "undefined") {
console.info("瀑布加载元素选择器不能为空!");return false;
if(callbackFn == null || callbackFn == "" || callbackFn == "undefined") {
console.info("瀑布加载回调函数不能为空!");return false;
var loadCompleted = true;
//当前元素是否已经加载完成,true:未完成,false:完成
$(top.window).scroll(function(){
var winheight = $(top.window).height();
var scheight = $(top.window).scrollTop();
if ($(selector).offset().top &= (winheight + scheight) && loadCompleted) {
console.info($(selector).offset().top+"===winH="+(winheight + scheight)+"====t="+new Date().getTime());
loadCompleted = false;
if(typeof(callbackFn) == "function") {
console.info("load " + callbackFn.name + "!!!");//~
if(fnParams) {
callbackFn(fnParams);
callbackFn();
} else if(callbackFn instanceof Array) {
//若回调函数指定了多个方法
for(var i = 0; i& callbackFn. i++) {
console.info("load " + callbackFn[i].name + "!!!");//~
if(fnParams) {
callbackFn[i](fnParams);
callbackFn[i]();
&标签:原文地址:http://www.cnblogs.com/hwaggLee/p/4762467.html
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码!没有更多推荐了,
加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!没有更多推荐了,
加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!

我要回帖

更多关于 echarts鼠标悬浮放大 的文章

 

随机推荐