因頁面有些地方使用的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:'其他'}
]*/
就是這樣了，後續如果寫了，圖標滾動展示/切換效果會再寫的