因页面有些地方使用的Echarts图表控件样式上和我们想要的功能上的问题,需要调整,如图:
故进行修改,修改后的图片:
主要修改了的样式,详情见代码标注
柱状图(文字换行倾斜)源码如下:
var option_sevenWG = {
color: colors,
/*tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},*/
grid: {//调整上下左右间距
left: '4%',
right: '4%',
top:'20%',
bottom: '15%',
containLabel: true
},
xAxis : [
{
type : 'category',
axisTick: {// 去除坐标轴上的刻度线
//alignWithLabel: true
show: false
},
axisLine: {// x轴的颜色和宽度
show: false,
lineStyle: {
color: colors, // x坐标轴的轴线颜色
//width:3 //这里是坐标轴的宽度,可以去掉
}
},
axisLabel: {// x轴的字体样式
show: true, //这行代码控制着坐标轴x轴的文字是否显示
textStyle: {
//color: '#fff', //x轴上的字体颜色
fontSize:'0.5vw' // x轴字体大小
},
interval:0,//文字显示不全并将文字倾斜
rotate:45, //倾斜的角度
formatter:function(value)
{
//debugger
var ret = "";//拼接加\n返回的类目项
var maxLength = 5;//每项显示文字个数
var valLength = value.length