知识学习及相关问题解决

echarts

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

在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 : [""],
}
],

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

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