echarts遇到的问题解决方案

https://echarts.baidu.com/
直接去官网找寻合适的图表,但是还是有一些地方需要一些修改满足自己的需求,有时候也会遇到一些问题,这是我使用时遇到的问题的解决方案

echarts图表自适应容器

在图标对像设置完配置项后 监听 window resize事件 然后调用echarts自带的resize()函数即可

mychartObj.setOption(option);
window.addEventListener("resize",function(){
            mychartObj.resize();
      });   

echarts点击事件

其实跟我们平常写的点击时间一样 echarts的点击事件

echartsObj.on("click",function(para){
    //事件执行代码
})

图表位置无法紧贴画布边缘的问题:

在grid绘图网格里,containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决;

grid:{
containLabel:false
}

柱状图和折线图转换

series  {
	//可以既有柱状图又有折线图
	type:'bar', 就是柱状图
	type:'line', 就是折线图
}

修改x周和y轴的颜色

			axisLine:{
                lineStyle:{
                    color:'#4ad2ff',
                    width:1
                }
            },

bar图x轴显示数值,y轴显示文本

正常的x轴显示文本,y轴显示数值,xAxis中的type为category,存放文本的data数组放在yAxis中,
而y轴显示文本,x轴显示数值,只需要将xAxis中的type改为value,yAxis中的type改为category,data数组放在yAxis中。
        xAxis : [  
            {  
                type : 'value',  
            }  
        ],  
        yAxis : [  
            {  
                type : 'category',
		data : ["科员","副科级","中华人民共和国正科级","副处级","处级"],
            }  
        ],  
这种情况下如果文本太长显示不全,可将y轴向右移动,使文本可显示的区域变大,调整grid的x属性(x,y为echarts图左上角那个点,x2,y2为右下角那个点)
	grid:{
		x:150,
	},

title 也就是提示什么颜色什么东西的

	legend: {
        data:['总舆论','负面舆论'],
        textStyle:{//图例文字的样式
            color:'#ccc',
        }
    },

改变柱状图的颜色 此处可以用遍历为不同的颜色

		 itemStyle:{
                normal:{
                    color:'#1e6cff'
                }
            },

去掉饼图外面的圆环

pie图外面有个圆环,有时感觉不好看想去掉,将calculable配置项删除或赋值为false均可。

在这里插入图片描述

x轴文本太长显示不全

修改xAxis,axisLabel下的rotate值,旋转文字的显示方向,若还是显示不下,调整grid的y2配置项,使echarts右下角绘制的原点向上移。

在这里插入图片描述
在这里插入图片描述

tooltip显示的特别大

类似下图这种情况,这种情况是将这个echarts图所在的div的宽高样式写在了css文件或页面head部分的style样式中了,解决方法是将div的样式直接写成内联样式(将其它地方这个div对应的样式里面的宽高去掉),如 <div id="echarts1" style="width:50%;height:300px;"></div>

在这里插入图片描述

图表判断返回颜色

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]
}

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 : '--');
}

地图(可选择)散点图

在这里插入图片描述

echarts高看一点的图表和现成的页面,需要直接拿去

第一个页面
https://download.csdn.net/download/weixin_43283487/10907708
在这里插入图片描述
第二个
https://download.csdn.net/download/weixin_43283487/10907716

在这里插入图片描述
第三个https://download.csdn.net/download/weixin_43283487/10907718
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

orange大数据技术探索者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值