echarts 柱状图笔记

让图标跟随窗口大小变化而变化：

myChart.setOption(option)

window.addEventListener("resize", function () {
          myChart.resize();
        });

legend:[

data:[‘2021年’，“2022年”]

如果柱状图有两个颜色的柱子，legend是提示信息，放在表格上面提示什么颜色对应着2021年

]

tooltip:鼠标放上去提供的提示信息。{trigger：“axis” 放在坐标轴上触发

axisPointer{

type:"shadow"//默认触发影子特效line就是线

}

}

color：柱子颜色

grid:决定整个柱状图大小，位置等

{

containLable:true//把刻度对应的文字标签包含进图标整体，然后再计算位置信息，false就是文字不随你设置的left等变化

}

Xaxis:x轴相关配置；

type:""//   value/category;x:value,y：category那就是反过来的柱状图，垂直于原本的柱状图value的值必须写在series，如果是一个柱状图有两种柱体，那就写两个在series比如：series:{

{name：“条”

barCategoryGap:柱子之间的距离

barwidth：柱子的宽度

type:'bar'

yAxisIndex:0//设置层级

itemStyle:{

normal:{

borderColor:边框颜色

barBorderRadius:20，圆角

color:funtion(params){

var myColor=["#fdjsadfa","#sfasl"]

var num=myColor.length;

return myColor[params.dataIndex %num]

或者

color:funtion(params){

var myColor=["#fdjsadfa","#sfasl"]

return myColor[params.dataIndex ]一一对应,比如有6根柱子params.dataIndex等于0,1,2,3,4,5，跟颜色数组索引对应

}//设置单个柱子颜色

}

}

data：【】

//显示柱子内的文字

label:{

show:true;

position:"inside"//写在柱子里

fomatter:"百分之{c}"//显示什么把data里的值填入{c},{a}系列名 ===》name：“条”，{b}数据名 ===》category的名，{c}数据值

}

}，

{name：

type:'bar'

data：【】}

}，

}

,category的值必须写在对应的轴

data[]//x轴数据，比如“旅游行业”等，这些x分别对应的y轴数据写在series的data[]

里

axislable{

修改刻度标签，也就是柱状图各个柱体底部文字

这里面可以设置color：，也就是设置文字颜色

fontsize：字体大小

},

axisTick:{

show:false//不显示刻度}

axisline{

lineStyle{

color：

width：//线的宽度

可以设置轴线样式

}

spitline{

分割线：一般只设置y轴的

color:

width:

}

show:false//不显示x轴的轴线

}

series：[

name:"sdasda' //鼠标放上去的提示信息有它

data:[]每一个x标签对应的数值

type:bar//柱状图

barWidth:35%//柱子宽度

itemStyle:{barBorderRadius:5//柱子圆角

}

]