Echarts图表样式调整|| 自动滚动效果||防遮挡
因页面有些地方使用的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;//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1)//如果类目项的文字大于3,
{
for (var i = 0; i < rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//开始截取的位置
var end = start + maxLength;//结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; //凭借最终的字符串
}
return ret;
}
else {
return value;
}
}
},
data : KSMC//['1', '2', '3', '4', '5', '6', '7']
}
],
dataZoom: [//滑动条
{
xAxisIndex: 0,//这里是从X轴的0刻度开始
show:false,//是否显示滑动条，不影响使用
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 9 // 一次性展示10个。
}
],
yAxis : [
{
type : 'value',
//minInterval:1,//最小数为1，避免刻度出现小数情况
axisTick: {// 去除坐标轴上的刻度线
//alignWithLabel: true
show: false
},
splitLine: {// 控制网格线是否显示
//show: false, // 网格线是否显示
lineStyle: {// 改变样式
width:'0.2',
color: '#507b7d' // 修改网格线颜色
}
},
axisLine: {// y轴的颜色和宽度
show: false,
lineStyle: {
color: colors, // y坐标轴的轴线颜色
}
},
axisLabel: {// y轴的字体样式
show: true, //这行代码控制着坐标轴y轴的文字是否显示
textStyle: {
//color: '#fff', //y轴上的字体颜色
fontSize:'0.5vw' // y轴字体大小
}
}
}
],
series : [
{
type:'bar',
barWidth:'28%',
data:CS//[10, 52, 200, 334, 390, 330, 220]
}
]
};自动滚动效果是依赖于Echarts自带滑动条实现的：
除了在option里加dataZoom属性
还需要在绑定的地方这样写
var myChart_sevenWG = echarts.init(document.getElementById("echarts_sevenWG"));
myChart_sevenWG.hideLoading();//滑动条需要的，具体干啥的不知道
myChart_sevenWG.setOption(option_sevenWG);
// 定时器
setInterval(function() {
// 每次向后滚动一个，最后一个从头开始。
if(option_sevenWG.dataZoom[0].endValue == KSMC.length - 1)
{
option_sevenWG.dataZoom[0].endValue = 9;
option_sevenWG.dataZoom[0].startValue = 0;
}
else{
option_sevenWG.dataZoom[0].endValue = option_sevenWG.dataZoom[0].endValue + 1;
option_sevenWG.dataZoom[0].startValue = option_sevenWG.dataZoom[0].startValue + 1;
}
myChart_sevenWG.setOption(option_sevenWG);
}, 2000);看源码可知，这个方法有一个弊端，因为是捕获当目前展示的最后一个数字所在位置为数组长度减一（最后一个）时，将展示数字的值换掉，从头展示，我们目前设置的是展示10个，但如果展示的数组个数小于设置的个数时，就永远都捕获不到了
饼图源码，里面注解文字很多的是防文字遮挡的：
（插播：颜色的获取通过一个很好用的取色器：用了好久了，很棒）
var option_wglx = {
//color:['#E39B86','#C7645F','#995f5b','#EA7E53','#DECE72','#91CA8C','#7AA576','#6CAAAD','#7188AA','#beb7bb'],//较暗10色,可在此处自己定义颜色
//color:['#37A2DA','#67D2EC','#8EE5E8','#9FE6B8','#FEDD6A','#FD9F8D','#FA7D9B','#E062AE','#E690D1','#E7BCF3'],//.reverse(),//亮10色,可在此处自己定义颜色
color:['#9ACD32','#FFFF00','#FF8C00','#FF0000','#97FFFF','#0000CD','#68228B','#FFFFFF','#FFAEB9','#005737'],//自己定义颜色
/*tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},*/
series : [
{
name: '违规类型',
type: 'pie',
clickable:false, //是否开启点击
minAngle: 6, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
avoidLabelOverlap: true, //是否启用防止标签重叠策略
hoverAnimation:false, //是否开启 hover 在扇区上的放大动画效果。
silent: true, //图形是否不响应和触发鼠标事件
radius : '45%',
label: {
normal: {
formatter: ' {b}：{c} {d}% ',
color: '#4BBAD1',
rich: {
b: {
color: '#4BBAD1',
fontSize: 1
},
per: {
color: '#4BBAD1',
padding: [2, 4],
borderRadius: 2
}
},
formatter(v) {//字符过长换行
let text = v.percent+'% ' +v.name
if(text.length <= 6)
{
return text;
}else if(text.length > 6 && text.length <= 12){
return text = `${text.slice(0,6)}\n${text.slice(6)}`
}else if(text.length > 12 && text.length <= 18){
return text = `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12)}`
}else if(text.length > 18 && text.length <= 24){
return text = `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12,18)}\n${text.slice(18)}`
}else if(text.length > 24){
return text = `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12,18)}\n${text.slice(18,24)}\n${text.slice(24)}`
}
},
textStyle : {//设置字体大小
fontSize : '0.4vw'
}
//结束
}
},
center: ['50%', '53%'],
data: WG_WGLX,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
/*[
{value:335, name:'内科'},
{value:310, name:'外科'},
{value:234, name:'妇产科'},
{value:135, name:'皮肤科'},
{value:248, name:'骨科'},
{value:335, name:'儿科一病区'},
{value:310, name:'儿科二病区'},
{value:234, name:'精神科一病区'},
{value:135, name:'五官科'},
{value:248, name:'其他'}
]*/就是这样了，后续如果写了，图标滚动展示/切换效果会再写的