app.title = '折柱混合';
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
bottom:-5,//位置
data:['提交總數','合格數','合格率']
},
xAxis: [
{
type: 'category',
data: ['整機產品','信息系統','合格數'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
"splitLine": { //網格線
"show": false
},
"axisTick":{ //y軸刻度線
"show":false
},
"axisLine":{ //y軸
"show":false
},
interval: 50
},
{
type: 'value',
interval: 20,
"splitLine": { //網格線
"show": false
},
"axisTick":{ //y軸刻度線
"show":false
},
"axisLine":{ //y軸
"show":false
},
axisLabel: {
formatter: '{value} %'
}
}
],
color: ['#1e90ff', '#ff7f50', '#b8b8b8'],
series: [
{
name:'提交總數',
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
position: 'top', //在上方顯示
textStyle: { //數值樣式
color: 'black',
fontSize: 14
}
}
}
},
type:'bar',
barGap:'0',
data:[753,657,654]
},
{
name:'合格數',
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
position: 'top', //在上方顯示
textStyle: { //數值樣式
color: 'black',
fontSize: 14
}
}
}
},
type:'bar',
data:[352,875,453]
},
{
name:'合格率',
itemStyle : { normal: {label : {show: true}}},
type:'line',
yAxisIndex: 1,
data:[50,55,54]
}
]
};
效果圖：
總結：
1. legend 的位置
2. y軸 和x 軸 去掉網格線 和 y軸刻度線 y軸
3.折現圖節點顯示數據
4.柱圖數據在柱子上面
5.自定義柱子和折現的顏色
app.title = '餅圖';
var option = {
title: {
text: '質量情況',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 10,
left: 'center',
data: ['技術', '管理', '已雙', '歸零']
},
series: [
{
name: '歸零百分比',
type: 'pie',
radius: '45%',//餅圖的半徑大小
center: ['50%', '50%'],//餅圖的位置
selectedMode: 'single',
label: { //餅圖圖形上的文本標簽
normal: {
show: true,
position: 'outer', //標簽的位置
textStyle: {
fontWeight: 300,
fontSize: 16 //文字的字體大小
},
formatter: '{d}%'
}
},
data: ['13','24','65','43'],
itemStyle: {
normal: {//設置餅圖各塊之間的間隙
borderWidth: 2,
borderColor: '#ffffff',
color: function (params) {
//自定義顏色
var colorList = [
'#00FFFF', '#00FF00', '#FFFF00', '#FF8C00',
];
return colorList[params.dataIndex]
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option, true);
$(window).resize(function () {
myChart.resize();
});
效果圖：
總結：
1. 餅圖各塊的間隙
2. 餅圖數據的顯示
3. 層疊柱圖
app.title = '堆疊柱狀圖';
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
legend: {
bottom:'0%',
itemGap: 100,//間距
data:['郵件營銷','聯盟廣告','視頻廣告']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'郵件營銷',
type:'bar',
stack: '廣告',
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
// // position: 'inner', //在上方顯示
// textStyle: { //數值樣式
// color: 'black',
// fontSize: 14
// }
}
}
},
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'聯盟廣告',
type:'bar',
stack: '廣告',
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
}
}
},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'視頻廣告',
type:'bar',
stack: '廣告',
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
}
}
},
data:[150, 232, 201, 154, 190, 330, 410]
}
]
};
效果圖：
總結：
1.層疊
2.數據顯示在柱子上
頁面參數配置
theme = {
// 全圖默認背景
// backgroundColor: ‘rgba(0,0,0,0)’,
// 默認色板
color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
'#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'],
// 圖表標題
title: {
x: 'left', // 水平安放位置，默認為左對齊，可選為：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐標，單位px）
y: 'top', // 垂直安放位置，默認為全圖頂端，可選為：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐標，單位px）
//textAlign: null // 水平對齊方式，默認根據x設置自動調整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 標題邊框顏色
borderWidth: 0, // 標題邊框線寬，單位px，默認為0（無邊框）
padding: 5, // 標題內邊距，單位px，默認各方向內邊距為5，
// 接受數組分別設定上右下左邊距，同css
itemGap: 10, // 主副標題縱向間隔，單位px，默認為10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主標題文字顏色
},
subtextStyle: {
color: '#aaa' // 副標題文字顏色
}
},
// 圖例
legend: {
orient: 'horizontal', // 布局方式，默認為水平布局，可選為：
// 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，默認為全圖居中，可選為：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐標，單位px）
y: 'top', // 垂直安放位置，默認為全圖頂端，可選為：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐標，單位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 圖例邊框顏色
borderWidth: 0, // 圖例邊框線寬，單位px，默認為0（無邊框）
padding: 5, // 圖例內邊距，單位px，默認各方向內邊距為5，
// 接受數組分別設定上右下左邊距，同css
itemGap: 10, // 各個item之間的間隔，單位px，默認為10，
// 橫向布局時為水平間隔，縱向布局時為縱向間隔
itemWidth: 20, // 圖例圖形寬度
itemHeight: 14, // 圖例圖形高度
textStyle: {
color: '#333' // 圖例文字顏色
}
},
// 值域
dataRange: {
orient: 'vertical', // 布局方式，默認為垂直布局，可選為：
// 'horizontal' ¦ 'vertical'
x: 'left', // 水平安放位置，默認為全圖左對齊，可選為：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐標，單位px）
y: 'bottom', // 垂直安放位置，默認為全圖底部，可選為：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐標，單位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 值域邊框顏色
borderWidth: 0, // 值域邊框線寬，單位px，默認為0（無邊框）
padding: 5, // 值域內邊距，單位px，默認各方向內邊距為5，
// 接受數組分別設定上右下左邊距，同css
itemGap: 10, // 各個item之間的間隔，單位px，默認為10，
// 橫向布局時為水平間隔，縱向布局時為縱向間隔
itemWidth: 20, // 值域圖形寬度，線性漸變水平布局寬度為該值 * 10
itemHeight: 14, // 值域圖形高度，線性漸變垂直布局高度為該值 * 10
splitNumber: 5, // 分割段數，默認為5，為0時為線性漸變
color: ['#1e90ff', '#f0ffff'],//顏色
//text:['高','低'], // 文本，默認為數值文本
textStyle: {
color: '#333' // 值域文字顏色
}
},
toolbox: {
orient: 'horizontal', // 布局方式，默認為水平布局，可選為：
// 'horizontal' ¦ 'vertical'
x: 'right', // 水平安放位置，默認為全圖右對齊，可選為：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐標，單位px）
y: 'top', // 垂直安放位置，默認為全圖頂端，可選為：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐標，單位px）
color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景顏色
borderColor: '#ccc', // 工具箱邊框顏色
borderWidth: 0, // 工具箱邊框線寬，單位px，默認為0（無邊框）
padding: 5, // 工具箱內邊距，單位px，默認各方向內邊距為5，
// 接受數組分別設定上右下左邊距，同css
itemGap: 10, // 各個item之間的間隔，單位px，默認為10，
// 橫向布局時為水平間隔，縱向布局時為縱向間隔
itemSize: 16, // 工具箱圖形寬度
featureImageIcon: {}, // 自定義圖片icon
featureTitle: {
mark: '輔助線開關',
markUndo: '刪除輔助線',
markClear: '清空輔助線',
dataZoom: '區域縮放',
dataZoomReset: '區域縮放后退',
dataView: '數據視圖',
lineChart: '折線圖切換',
barChart: '柱形圖切換',
restore: '還原',
saveAsImage: '保存為圖片'
}
},
// 提示框
tooltip: {
trigger: 'item', // 觸發類型，默認數據觸發，見下圖，可選為：'item' ¦ 'axis'
showDelay: 20, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
hideDelay: 100, // 隱藏延遲，單位ms
transitionDuration: 0.4, // 動畫變換時間，單位s
backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景顏色，默認為透明度為0.7的黑色
borderColor: '#333', // 提示邊框顏色
borderRadius: 4, // 提示邊框圓角，單位px，默認為4
borderWidth: 0, // 提示邊框線寬，單位px，默認為0（無邊框）
padding: 5, // 提示內邊距，單位px，默認各方向內邊距為5，
// 接受數組分別設定上右下左邊距，同css
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: 'line', // 默認為直線，可選為：'line' | 'shadow'
lineStyle: { // 直線指示器樣式設置
color: '#48b',
width: 2,
type: 'solid'
},
shadowStyle: { // 陰影指示器樣式設置
width: 'auto', // 陰影大小
color: 'rgba(150,150,150,0.3)' // 陰影顏色
}
},
textStyle: {
color: '#fff'
}
},
// 區域縮放控制器
dataZoom: {
orient: 'horizontal', // 布局方式，默認為水平布局，可選為：
// 'horizontal' ¦ 'vertical'
// x: {number}, // 水平安放位置，默認為根據grid參數適配，可選為：
// {number}（x坐標，單位px）
// y: {number}, // 垂直安放位置，默認為根據grid參數適配，可選為：
// {number}（y坐標，單位px）
// width: {number}, // 指定寬度，橫向布局時默認為根據grid參數適配
// height: {number}, // 指定高度，縱向布局時默認為根據grid參數適配
backgroundColor: 'rgba(0,0,0,0)', // 背景顏色
dataBackgroundColor: '#eee', // 數據背景顏色
fillerColor: 'rgba(144,197,237,0.2)', // 填充顏色
handleColor: 'rgba(70,130,180,0.8)' // 手柄顏色
},
// 網格
grid: {
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
},
// 類目軸
categoryAxis: {
position: 'bottom', // 位置
nameLocation: 'end', // 坐標軸名字位置，支持'start' | 'end'
boundaryGap: true, // 類目起始和結束兩端空白策略
axisLine: { // 坐標軸線
show: true, // 默認顯示，屬性show控制顯示與否
lineStyle: { // 屬性lineStyle控制線條樣式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐標軸小標記
show: true, // 屬性show控制顯示與否，默認不顯示
interval: 'auto',
// onGap: null,
inside: false, // 控制小標記是否在grid里
length: 5, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: '#333',
width: 1
}
},
axisLabel: { // 坐標軸文本標簽，詳見axis.axisLabel
show: true,
interval: 'auto',
rotate: 0,
margin: 8,
// formatter: null,
textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: '#333'
}
},
splitLine: { // 分隔線
show: true, // 默認顯示，屬性show控制顯示與否
// onGap: null,
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔區域
show: false, // 默認不顯示，屬性show控制顯示與否
// onGap: null,
areaStyle: { // 屬性areaStyle（詳見areaStyle）控制區域樣式
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
}
}
},
// 數值型坐標軸默認參數
valueAxis: {
position: 'left', // 位置
nameLocation: 'end', // 坐標軸名字位置，支持'start' | 'end'
nameTextStyle: {}, // 坐標軸文字樣式，默認取全局樣式
boundaryGap: [0, 0], // 數值起始和結束兩端空白策略
splitNumber: 5, // 分割段數，默認為5
axisLine: { // 坐標軸線
show: true, // 默認顯示，屬性show控制顯示與否
lineStyle: { // 屬性lineStyle控制線條樣式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐標軸小標記
show: false, // 屬性show控制顯示與否，默認不顯示
inside: false, // 控制小標記是否在grid里
length: 5, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: '#333',
width: 1
}
},
axisLabel: { // 坐標軸文本標簽，詳見axis.axisLabel
show: true,
rotate: 0,
margin: 8,
// formatter: null,
textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: '#333'
}
},
splitLine: { // 分隔線
show: true, // 默認顯示，屬性show控制顯示與否
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔區域
show: false, // 默認不顯示，屬性show控制顯示與否
areaStyle: { // 屬性areaStyle（詳見areaStyle）控制區域樣式
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
}
}
},
polar: {
center: ['50%', '50%'], // 默認全局居中
radius: '75%',
startAngle: 90,
splitNumber: 5,
name: {
show: true,
textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: '#333'
}
},
axisLine: { // 坐標軸線
show: true, // 默認顯示，屬性show控制顯示與否
lineStyle: { // 屬性lineStyle控制線條樣式
color: '#ccc',
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐標軸文本標簽，詳見axis.axisLabel
show: false,
textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: '#333'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
color: '#ccc'
}
}
},
// 柱形圖默認參數
bar: {
barMinHeight: 0, // 最小高度改為0
// barWidth: null, // 默認自適應
barGap: '30%', // 柱間距離，默認為柱形寬度的30%，可設固定值
barCategoryGap: '20%', // 類目間柱形距離，默認為類目間距的20%，可設固定值
itemStyle: {
normal: {
// color: '各異',
barBorderColor: '#fff', // 柱條邊線
barBorderRadius: 0, // 柱條邊線圓角，單位px，默認為0
barBorderWidth: 1, // 柱條邊線線寬，單位px，默認為1
label: {
show: false
// position: 默認自適應，水平布局為'top'，垂直布局為'right'，可選為
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
}
},
emphasis: {
// color: '各異',
barBorderColor: 'rgba(0,0,0,0)', // 柱條邊線
barBorderRadius: 0, // 柱條邊線圓角，單位px，默認為0
barBorderWidth: 1, // 柱條邊線線寬，單位px，默認為1
label: {
show: false
// position: 默認自適應，水平布局為'top'，垂直布局為'right'，可選為
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
}
}
}
},
// 折線圖默認參數
line: {
itemStyle: {
normal: {
// color: 各異,
label: {
show: false
// position: 默認自適應，水平布局為'top'，垂直布局為'right'，可選為
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
},
lineStyle: {
width: 2,
type: 'solid',
shadowColor: 'rgba(0,0,0,0)', //默認透明
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
emphasis: {
// color: 各異,
label: {
show: false
// position: 默認自適應，水平布局為'top'，垂直布局為'right'，可選為
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
}
}
},
//smooth : false,
//symbol: null, // 拐點圖形類型
symbolSize: 2, // 拐點圖形大小
//symbolRotate : null, // 拐點圖形旋轉控制
showAllSymbol: false // 標志圖形默認只有主軸顯示（隨主軸標簽間隔隱藏策略）
},
// K線圖默認參數
k: {
// barWidth : null // 默認自適應
// barMaxWidth : null // 默認自適應
itemStyle: {
normal: {
color: '#fff', // 陽線填充顏色
color0: '#00aa11', // 陰線填充顏色
lineStyle: {
width: 1,
color: '#ff3200', // 陽線邊框顏色
color0: '#00aa11' // 陰線邊框顏色
}
},
emphasis: {
// color: 各異,
// color0: 各異
}
}
},
// 散點圖默認參數
scatter: {
//symbol: null, // 圖形類型
symbolSize: 4, // 圖形大小，半寬（半徑）參數，當圖形為方向或菱形則總寬度為symbolSize * 2
//symbolRotate : null, // 圖形旋轉控制
large: false, // 大規模散點圖
largeThreshold: 2000,// 大規模閥值，large為true且數據量>largeThreshold才啟用大規模模式
itemStyle: {
normal: {
// color: 各異,
label: {
show: false
// position: 默認自適應，水平布局為'top'，垂直布局為'right'，可選為
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
}
},
emphasis: {
// color: '各異'
label: {
show: false
// position: 默認自適應，水平布局為'top'，垂直布局為'right'，可選為
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
}
}
}
},
// 雷達圖默認參數
radar: {
itemStyle: {
normal: {
// color: 各異,
label: {
show: false
},
lineStyle: {
width: 2,
type: 'solid'
}
},
emphasis: {
// color: 各異,
label: {
show: false
}
}
},
//symbol: null, // 拐點圖形類型
symbolSize: 2 // 可計算特性參數，空數據拖拽提示圖形大小
//symbolRotate : null, // 圖形旋轉控制
},
// 餅圖默認參數
pie: {
center: ['50%', '50%'], // 默認全局居中
radius: [0, '75%'],
clockWise: false, // 默認逆時針
startAngle: 90,
minAngle: 0, // 最小角度改為0
selectedOffset: 10, // 選中是扇區偏移量
itemStyle: {
normal: {
// color: 各異,
borderColor: '#fff',
borderWidth: 1,
label: {
show: true,
position: 'outer'
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
},
labelLine: {
show: true,
length: 20,
lineStyle: {
// color: 各異,
width: 1,
type: 'solid'
}
}
},
emphasis: {
// color: 各異,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
label: {
show: false
// position: 'outer'
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
},
labelLine: {
show: false,
length: 20,
lineStyle: {
// color: 各異,
width: 1,
type: 'solid'
}
}
}
}
},
map: {
mapType: 'china', // 各省的mapType暫時都用中文
mapLocation: {
x: 'center',
y: 'center'
// width // 自適應
// height // 自適應
},
showLegendSymbol: true, // 顯示圖例顏色標識（系列標識的小圓點），存在legend時生效
itemStyle: {
normal: {
// color: 各異,
borderColor: '#fff',
borderWidth: 1,
areaStyle: {
color: '#ccc'//rgba(135,206,250,0.8)
},
label: {
show: false,
textStyle: {
color: 'rgba(139,69,19,1)'
}
}
},
emphasis: { // 也是選中樣式
// color: 各異,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
areaStyle: {
color: 'rgba(255,215,0,0.8)'
},
label: {
show: false,
textStyle: {
color: 'rgba(139,69,19,1)'
}
}
}
}
},
force: {
// 數據map到圓的半徑的最小值和最大值
minRadius: 10,
maxRadius: 20,
density: 1.0,
attractiveness: 1.0,
// 初始化的隨機大小位置
initSize: 300,
// 向心力因子，越大向心力越大
centripetal: 1,
// 冷卻因子
coolDown: 0.99,
// 分類里如果有樣式會覆蓋節點默認樣式
itemStyle: {
normal: {
// color: 各異,
label: {
show: false
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
},
nodeStyle: {
brushType: 'both',
color: '#f08c2e',
strokeColor: '#5182ab'
},
linkStyle: {
strokeColor: '#5182ab'
}
},
emphasis: {
// color: 各異,
label: {
show: false
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
},
nodeStyle: {},
linkStyle: {}
}
}
},
chord: {
radius: ['65%', '75%'],
center: ['50%', '50%'],
padding: 2,
sort: 'none', // can be 'none', 'ascending', 'descending'
sortSub: 'none', // can be 'none', 'ascending', 'descending'
startAngle: 90,
clockWise: false,
showScale: false,
showScaleText: false,
itemStyle: {
normal: {
label: {
show: true
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
},
lineStyle: {
width: 0,
color: '#000'
},
chordStyle: {
lineStyle: {
width: 1,
color: '#666'
}
}
},
emphasis: {
lineStyle: {
width: 0,
color: '#000'
},
chordStyle: {
lineStyle: {
width: 2,
color: '#333'
}
}
}
}
},
island: {
r: 15,
calculateStep: 0.1 // 滾輪可計算步長 0.1 = 10%
},
markPoint: {
symbol: 'pin', // 標注類型
symbolSize: 10, // 標注大小，半寬（半徑）參數，當圖形為方向或菱形則總寬度為symbolSize * 2
//symbolRotate : null, // 標注旋轉控制
itemStyle: {
normal: {
// color: 各異，
// borderColor: 各異, // 標注邊線顏色，優先於color
borderWidth: 2, // 標注邊線線寬，單位px，默認為1
label: {
show: true,
position: 'inside' // 可選為'left'|'right'|'top'|'bottom'
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
}
},
emphasis: {
// color: 各異
label: {
show: true
// position: 'inside' // 'left'|'right'|'top'|'bottom'
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
}
}
}
},
markLine: {
// 標線起始和結束的symbol介紹類型，如果都一樣，可以直接傳string
symbol: ['circle', 'arrow'],
// 標線起始和結束的symbol大小，半寬（半徑）參數，當圖形為方向或菱形則總寬度為symbolSize * 2
symbolSize: [2, 4],
// 標線起始和結束的symbol旋轉控制
//symbolRotate : null,
itemStyle: {
normal: {
// color: 各異, // 標線主色，線色，symbol主色
// borderColor: 隨color, // 標線symbol邊框顏色，優先於color
borderWidth: 2, // 標線symbol邊框線寬，單位px，默認為2
label: {
show: false,
// 可選為 'start'|'end'|'left'|'right'|'top'|'bottom'
position: 'inside',
textStyle: { // 默認使用全局文本樣式，詳見TEXTSTYLE
color: '#333'
}
},
lineStyle: {
// color: 隨borderColor, // 主色，線色，優先級高於borderColor和color
// width: 隨borderWidth, // 優先於borderWidth
type: 'solid',
shadowColor: 'rgba(0,0,0,0)', //默認透明
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
emphasis: {
// color: 各異
label: {
show: false
// position: 'inside' // 'left'|'right'|'top'|'bottom'
// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE
},
lineStyle: {}
}
}
},
textStyle: {
decoration: 'none',
fontFamily: 'Arial, Verdana, sans-serif',
fontFamily2: '微軟雅黑', // IE8- 字體模糊並且不支持不同字體混排，額外指定一份
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal'
},
// 默認標志圖形類型列表
symbolList: [
'circle', 'rectangle', 'triangle', 'diamond',
'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
],
loadingText: 'Loading...',
// 可計算特性配置，孤島，提示顏色
calculable: false, // 默認關閉可計算特性
calculableColor: 'rgba(255,165,0,0.6)', // 拖拽提示邊框顏色
calculableHolderColor: '#ccc', // 可計算占位提示顏色
nameConnector: ' & ',
valueConnector: ' : ',
animation: true,
animationThreshold: 2500, // 動畫元素閥值，產生的圖形原素超過2500不出動畫
addDataAnimation: true, // 動態數據接口是否開啟動畫效果
animationDuration: 2000,
animationEasing: 'ExponentialOut' //BounceOut
};
完整的案列1：
頁面html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('餅圖穿透')"/>
<style type="text/css">
.page-header {
padding: 0;
margin: 0 0 10px;
color: #333;
}
.left-bottom {
margin-top: 50px;
}
.left-bottom > ul > li {
margin-top: 25px;
}
.right-top-tab > li {
width: 100px;
}
/*!*定義類名為.thead-blue的樣式*!*/
/*.table .thead-blue th {*/
/* color: #fff;*/
/* background-color: #3195f1;*/
/* border-color: #0d7adf;*/
/*}*/
</style>
</head>
<body class="gray-bg">
<div class="container-div ui-layout-center">
<div class="row">
<div class="col-sm-12">
<!--左-->
<div class="col-sm-3">
<!--上-->
<div class="col-sm-12">
<div class="col-sm-12">
<div class="page-header text-center">
<h4>標題</h4>
</div>
<div>
<div id="div_circular" style="height: 90%"></div><!--echarts圖-->
</div>
<div>
<table id="top_table" border="1" style="font-size: 10px;">
<thead>
<tr>
<th style="width: 100px;">類別</th>
<th style="width: 100px;">提交可靠性試驗的總次數</th>
<th style="width: 100px;">提交可靠性試驗的一次通過的次數</th>
<th style="width: 100px;">提交可靠性試驗一次性通過率</th>
</tr>
</thead>
<tbody>
<tr>
<td>整機產品</td>
<td>100</td>
<td>95</td>
<td>95%</td>
</tr>
<tr>
<td>信息系統</td>
<td>100</td>
<td>84</td>
<td>84%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--下-->
<div class="col-sm-12" style="border-top:1px solid #eee;">
<div class="left-bottom" align="center">
<ul class="nav nav-pills nav-stacked" style="width: 130px">
<li class="active"><a href="#div_timeTab" data-toggle="tab">時間</a></li>
<li><a href="#div_unitTab" data-toggle="tab">單位</a></li>
</ul>
</div>
</div>
</div>
<!--右-->
<div class="col-sm-9" style="border-left:1px solid #eee;">
<div class="col-sm-12">
<div class="tab-content">
<!--時間-->
<div id="div_timeTab" class="active tab-pane">
<div class="col-sm-12">
<div class="page-header text-center">
<h4>標題</h4>
</div>
</div>
<div class="col-sm-12">
<ul class="nav nav-pills pull-right text-center right-top-tab">
<li class="active"><a href="#div_monthTab" data-toggle="tab">月份</a></li>
<li><a href="#div_yearTab" data-toggle="tab">年份</a></li>
</ul>
<div id="mytab-content" class="tab-content">
<div id="div_monthTab" class="tab-pane fade in active">
<div class="col-sm-12" id="div_month1"></div>
<div class="col-sm-12">
<div class="col-sm-6" id="div_month2"></div>
<div class="col-sm-6" id="div_month3"></div>
</div>
</div>
<div id="div_yearTab" class="tab-pane fade">
<div class="col-sm-12" id="div_year" style="margin-top: 10px;"></div>
</div>
</div>
</div>
</div>
<!--單位-->
<div id="div_unitTab" class="tab-pane">
<div class="col-sm-12">
<div class="page-header text-center">
<h4 id="h4_title" style="font-weight:bold;">2019年11月各單位可靠性試驗一次通過率</h4>
</div>
</div>
<div class="col-sm-12" style="margin-bottom: 10px;margin-top: 20px;">
<label><h4>篩選：</h4></label>
<input type="text" id="input_tname">
<button class="btn btn-success" id="button_query" style="margin-left: 30px;">查詢</button>
</div>
<table id="div_table"></table>
<table class="table-count" style="margin-top: 3px;margin-bottom:8px;">
<tr>
<td style="font-size: 16px;">總計：<span id="span_count">1555</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/common/echarts/echarts.js}"></script>
<script th:src="@{/js/report/columnar.js}"></script>
</body>
</html>
echarts 對應js:
$(function () {
//動態賦值寬和高
$("#div_circular").css("height", $(window).height() * 0.30).css("width", $(window).width() * 0.20);
$("#div_month1").css("height", $(window).height() * 0.85 / 2).css("width", $(window).width() * 0.70);
$("#div_month2").css("height", $(window).height() * 0.85 / 2).css("width", $(window).width() * 0.60 / 2);
$("#div_month3").css("height", $(window).height() * 0.85 / 2).css("width", $(window).width() * 0.60 / 2);
$("#div_year").css("height", $(window).height() * 0.85).css("width", $(window).width() * 0.70);
$(window).resize(function () {
$("#div_month1").css("height", $(window).height() * 0.85 / 2).css("width", $(window).width() * 0.70);
$("#div_month2").css("height", $(window).height() * 0.85 / 2).css("width", $(window).width() * 0.60 / 2);
$("#div_month3").css("height", $(window).height() * 0.85 / 2).css("width", $(window).width() * 0.60 / 2);
$("#div_year").css("height", $(window).height() * 0.85).css("width", $(window).width() * 0.70);
$("#div_circular").css("height", $(window).height() * 0.30).css("width", $(window).width() * 0.20);
});
initTopEcharts();//初始化echarts
initMonth1Echarts();
initMonth2Echarts();
initMonth3Echarts();
initEcharts();//年份
initTable();//初始化表格
});
//echarts 左上圖表
function initTopEcharts() {
var myChart = echarts.init(document.getElementById('div_circular'));
$.ajax({
type: 'post',//請求方式
url: ctx + '/report/echarts/dataEchartsYear',//url
//data:{'norm':"凈利潤",'year':year(),'currentmonth':currentmonth(),'lastmonth':lastmonth()},
success: function (resp) {
if (resp.success) {
var tatilData = [];
var data = resp.data;
for (var i = 0; i < data.length; i++) {
tatilData.push(data[i].name)
}
var option = {
tooltip: {show: false},
title: {
text: '歸零情況',
left: 'center'
},
grid: {
top: '1',
left: '4',
right: '4',
bottom: '5',
containLabel: true
},
// legend: {
// orient: 'vertical',
// x: 'left',
// data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
// },
graphic: [{ // 環形圖中間添加文字
type: 'text', // 通過不同top值可以設置上下顯示
left: 'center',
top: '40%',
style: {
text: "主標題", //（自己設置顯示內容）,
textAlign: 'center',
fill: '#212529', // 文字的顏色
fontFamily: 'Microsoft YaHei',
fontSize: 12,
fontStyle: 'bold'
}
}, {
type: 'text',
left: 'center',
top: '52%',
style: {
text: "副標題",
textAlign: 'center',
fill: "c51200",
fontFamily: 'Microsoft YaHei',
fontSize: 10,
fontStyle: 'bold'
}
}],
series: [{
type: 'pie',
radius: ['25%', '35%'],
center: ['50%', '50%'],//餅圖的位置
legendHoverLink: false,
hoverAnimation: false,
avoidLabelOverlap: false,
label: {
normal: {
//show: false,
//position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯盟廣告'},
{value: 135, name: '視頻廣告'},
{value: 1548, name: '搜索引擎'}
]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option, true);
$(window).resize(function () {
myChart.resize();
});
} else {
alert(resp.message);
}
}
})
}
//echarts month1 上圖表
function initMonth1Echarts() {
var myChart = echarts.init(document.getElementById('div_month1'));
$.ajax({
type: 'post',//請求方式
url: ctx + '/report/echarts/dataEchartsYear',//url
//data:{'norm':"凈利潤",'year':year(),'currentmonth':currentmonth(),'lastmonth':lastmonth()},
success: function (resp) {
if (resp.success) {
var tatilData = [];
var data = resp.data;
for (var i = 0; i < data.length; i++) {
tatilData.push(data[i].name)
}
var option = {
title: {
text: '可靠性試驗',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {// 坐標軸指示器，坐標軸觸發有效
type: 'cross', // 默認為直線，可選為：'line' | 'shadow'
crossStyle: {
color: '#999'
}
}
},
legend: [
{
bottom: '2%',//位置
x: 'center',//居中
itemGap: 50,//間距
data: ['整機產品', '信息系統']
}
],
xAxis: [
{
type: 'category',
data: ['1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月', '1-10月', '1-11月', '1-12月'],
axisPointer: {
type: 'shadow'
},
axisLabel: {
interval: 0,
rotate: 0//旋轉度數
}
}
],
yAxis: {
type: 'value',
interval: 10,
"splitLine": { //網格線
"show": false
},
"axisTick": { //y軸刻度線
"show": false
},
"axisLine": { //y軸
"show": false
},
axisLabel: {
formatter: '{value} %'
}
},
color: ['#00FFFF', '#00FF00'],
series: [
{
name: '整機產品',
itemStyle: {normal: {label: {show: true}}},
type: 'line',
yAxisIndex: 0,
data: [50, 55, 54, 34, 67, 85, 32, 21, 32, 74, 73, 24]
},
{
name: '信息系統',
itemStyle: {normal: {label: {show: true}}},
type: 'line',
yAxisIndex: 0,
data: [30, 45, 64, 74, 27, 55, 22, 51, 36, 64, 83, 29]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option, true);
$(window).resize(function () {
myChart.resize();
});
} else {
alert(resp.message);
}
}
})
}
//echarts month2 圖表
function initMonth2Echarts() {
var myChart = echarts.init(document.getElementById('div_month2'));
$.ajax({
type: 'post',//請求方式
url: ctx + '/report/echarts/dataEchartsYear',//url
//data:{'norm':"凈利潤",'year':year(),'currentmonth':currentmonth(),'lastmonth':lastmonth()},
success: function (resp) {
if (resp.success) {
var tatilData = [];
var data = resp.data;
for (var i = 0; i < data.length; i++) {
tatilData.push(data[i].name)
}
var option = {
title: {
text: ' 手機信息系統',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
// toolbox: {
// feature: {
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar']},
// restore: {show: true},
// saveAsImage: {show: true}
// }
// },
legend: {
bottom: '2%',//位置
x: 'center',//居中
itemGap: 50,//間距
data: ['提交總數', '通過數', '通過率']
},
xAxis: [
{
type: 'category',
data: ['1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月', '1-10月', '1-11月', '1-12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
"splitLine": { //網格線
"show": false
},
"axisTick": { //y軸刻度線
"show": false
},
"axisLine": { //y軸
"show": false
},
interval: 100
},
{
type: 'value',
interval: 10,
"splitLine": { //網格線
"show": false
},
"axisTick": { //y軸刻度線
"show": false
},
"axisLine": { //y軸
"show": false
},
axisLabel: {
formatter: '{value} %'
}
}
],
color: ['#1e90ff', '#ff7f50', '#b8b8b8'],
series: [
{
name: '提交總數',
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
//position: 'top', //在上方顯示
textStyle: { //數值樣式
color: 'black',
fontSize: 12
}
}
}
},
type: 'bar',
barGap: '0',
data: [505, 55, 454, 34, 657, 857, 32, 621, 326, 745, 753, 254]
},
{
name: '通過數',
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
textStyle: { //數值樣式
color: 'black',
fontSize: 12
}
}
}
},
type: 'bar',
data: [130, 245, 634, 744, 275, 525, 242, 51, 236, 624, 823, 29]
},
{
name: '通過率',
itemStyle: {normal: {label: {show: true}}},
type: 'line',
yAxisIndex: 1,
data: [30, 45, 64, 74, 27, 55, 22, 51, 36, 64, 83, 29]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option, true);
$(window).resize(function () {
myChart.resize();
});
} else {
alert(resp.message);
}
}
})
}
// //echarts month13 圖表
function initMonth3Echarts() {
var myChart = echarts.init(document.getElementById('div_month3'));
$.ajax({
type: 'post',//請求方式
url: ctx + '/report/echarts/dataEchartsYear',//url
//data:{'norm':"凈利潤",'year':year(),'currentmonth':currentmonth(),'lastmonth':lastmonth()},
success: function (resp) {
if (resp.success) {
var tatilData = [];
var data = resp.data;
for (var i = 0; i < data.length; i++) {
tatilData.push(data[i].name)
}
var option = {
title: {
text: ' 計算機系統',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
// toolbox: {
// feature: {
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar']},
// restore: {show: true},
// saveAsImage: {show: true}
// }
// },
legend: {
bottom: '2%',//位置
x: 'center',//居中
itemGap: 50,//間距
data: ['提交總數', '通過數', '通過率']
},
xAxis: [
{
type: 'category',
data: ['1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月', '1-10月', '1-11月', '1-12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
"splitLine": { //網格線
"show": false
},
"axisTick": { //y軸刻度線
"show": false
},
"axisLine": { //y軸
"show": false
},
interval: 100
},
{
type: 'value',
interval: 10,
"splitLine": { //網格線
"show": false
},
"axisTick": { //y軸刻度線
"show": false
},
"axisLine": { //y軸
"show": false
},
axisLabel: {
formatter: '{value} %'
}
}
],
color: ['#f321fa', '#FF8C00', '#b8b8b8'],
series: [
{
name: '提交總數',
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
//position: 'top', //在上方顯示
textStyle: { //數值樣式
color: 'black',
fontSize: 12
}
}
}
},
type: 'bar',
barGap: '0',
data: [505, 55, 454, 34, 657, 857, 32, 621, 326, 745, 753, 254]
},
{
name: '通過數',
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
textStyle: { //數值樣式
color: 'black',
fontSize: 12
}
}
}
},
type: 'bar',
data: [130, 245, 634, 744, 275, 525, 242, 51, 236, 624, 823, 29]
},
{
name: '通過率',
itemStyle: {normal: {label: {show: true}}},
type: 'line',
yAxisIndex: 1,
data: [30, 45, 64, 74, 27, 55, 22, 51, 36, 64, 83, 29]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option, true);
$(window).resize(function () {
myChart.resize();
});
} else {
alert(resp.message);
}
}
})
}
//年份
function initEcharts() {
var myChart = echarts.init(document.getElementById('div_year'));
$.ajax({
type: 'post',//請求方式
url: ctx + '/report/echarts/dataEcharts',//url
//data:{'norm':"凈利潤",'year':year(),'currentmonth':currentmonth(),'lastmonth':lastmonth()},
success: function (resp) {
if (resp.success) {
var tatilData = [];
var data = resp.data;
for (var i = 0; i < data.length; i++) {
tatilData.push(data[i].name)
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {// 坐標軸指示器，坐標軸觸發有效
type: 'cross', // 默認為直線，可選為：'line' | 'shadow'
crossStyle: {
color: '#999'
}
}
},
// toolbox: {
// feature: {
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar']},
// restore: {show: true},
// saveAsImage: {show: true}
// }
// },
// legend: [
// {
// bottom: '3%',//位置
// x: 'center',//居中
// itemGap: 50,//間距
// data: ['已技術歸零', '已管理歸零', '已雙歸零', '未歸零']
// },
// {
// bottom: '0%',//位置
// x: 'center',//居中
// itemGap: 30,//間距
// data: ['占比(已技術歸零)', '占比(已管理歸零)', '占比(已雙歸零)', '占比(未歸零)']
// }
// ],
legend: [
{
bottom: '2%',//位置
x: 'center',//居中
itemGap: 50,//間距
data: ['整機產品提交總數', '整機產品合格數', '信息系統提交總數']
},
{
bottom: '0%',//位置
x: 'center',//居中
itemGap: 50,//間距
data: ['信息系統合格數', '合格率(整機產品)', '合格率(信息系統)']
}
],
xAxis: [
{
type: 'category',
data: ['2017', '2018', '2019'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
"splitLine": { //網格線
"show": false
},
"axisTick": { //y軸刻度線
"show": false
},
"axisLine": { //y軸
"show": true
},
interval: 200
},
{
type: 'value',
interval: 20,
"splitLine": { //網格線
"show": false
},
"axisTick": { //y軸刻度線
"show": false
},
"axisLine": { //y軸
"show": false
},
axisLabel: {
formatter: '{value} %'
}
}
],
color: ['#00FFFF', '#00FF00', '#f321fa', '#FF8C00', '#1e90ff', '#ff7f50', '#b8b8b8', '#b5423d'],
series: [
{
name: '整機產品提交總數',
stack: '整機產品',
barWidth: 30,//柱圖寬度
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
}
}
},
type: 'bar',
barGap: '0',
data: [253, 457, 754]
},
{
name: '整機產品合格數',
stack: '整機產品',
barWidth: 30,//柱圖寬度
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
}
}
},
type: 'bar',
data: [322, 955, 853]
},
{
name: '信息系統提交總數',
stack: '信息系統',
barWidth: 30,//柱圖寬度
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
}
}
},
type: 'bar',
barGap: '0',
data: [433, 127, 754]
},
{
name: '信息系統合格數',
stack: '信息系統',
barWidth: 30,//柱圖寬度
itemStyle: {
normal: {
label: {
show: true, //開啟顯示
}
}
},
type: 'bar',
data: [522, 815, 413]
},
{
name: '合格率(整機產品)',
itemStyle: {normal: {label: {show: true}}},
type: 'line',
yAxisIndex: 1,
data: [50, 55, 54]
},
{
name: '合格率(信息系統)',
itemStyle: {normal: {label: {show: true}}},
type: 'line',
yAxisIndex: 1,
data: [20, 45, 84]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option, true);
$(window).resize(function () {
myChart.resize();
});
} else {
alert(resp.message);
}
}
})
}
/* 初始table */
function initTable() {
// 初始化Table
var oTable = new tableInit();
oTable.init();
}
// 重置table數據
function resetScheduleLists() {
var oTable = new tableInit();
// 調度
oTable.resetScheduleLists();
}
/**
* 初始化 table 數據
*/
var tableInit = function () {
var tableVal = {};
// 重置表單數據
tableVal.resetScheduleLists = function () {
$('#div_table').bootstrapTable('destroy');
tableVal.init();
};
// 初始化表單數據
tableVal.init = function () {
var $table = $('#div_table');
$table.bootstrapTable({
url: ctx + '/report/echarts/dataTable',//url
method: 'post',//請求方式
undefinedText: '',// 當數據為undefined時顯示的字符，默認是'-'
toolbar: 'false', // 工具按鈕用哪個容器
toolbarAlign: 'false', // 工具按鈕的位置
striped: false, // 是否顯示行間隔色
striped: true, //是否顯示行間隔色
queryParams: tableVal.queryParams, // 傳遞參數（*）
pagination: true,//是否分頁
sidePagination: "client",//分頁方式：client客戶端分頁，server服務端分頁（*）
uniqueId: "tid", // 每一行的唯一標識，一般為主鍵列
showColumns: false,// 是否顯示列的按鈕
theadClasses: "thead-dark",//這里設置表頭樣式
classes: "table table-bordered table-striped table-sm table-dark",
pageSize: 10,
pageList: [10, 15, 30],
columns: [
[
{
title: '序號', valign: 'middle', halign: "center", align: 'center', rowspan: 2, formatter: function (value, row, index) {
return index + 1;
}
},
{field: 'tname', title: '單位名稱', rowspan: 2, valign: 'middle', halign: "center", align: 'center'},
{title: '提交可靠性實驗的總次數', colspan: 2, align: 'center', valign: 'middle', halign: "center", align: 'center'},
{title: '一次通過次數', colspan: 2, align: 'center', valign: 'middle', halign: "center", align: 'center'},
{title: '可靠性實驗一次通過率', colspan: 2, align: 'center', valign: 'middle', halign: "center", align: 'center'},
],
[
{field: 'str1', title: '整體產品', align: 'center', halign: "center"},
{field: 'str2', title: '信息系統', align: 'center', halign: "center"},
{field: 'str3', title: '整體產品', align: 'center', halign: "center"},
{field: 'str4', title: '信息系統', align: 'center', halign: "center"},
{field: 'str5', title: '整體產品', align: 'center', halign: "center"},
{field: 'str6', title: '信息系統', align: 'center', halign: "center"}
]
],
responseHandler: function (resp) {
if (resp.success) {
return resp.data;
// return {rows: resp.data.rows, total: resp.data.total};
} else {
CommonJS.modal.msgError(resp.message);
}
return resp;
}
});
}
tableVal.getParams = function () {
var parameter = {
//名稱
tname: $("#input_tname").val(),
};
return CommonJS.removeEmptyValue(parameter);
};
tableVal.getParams2 = function () {
var parameter = CommonJS.getParameterByFrom();
return CommonJS.removeEmptyValue(parameter);
};
// 得到查詢的參數
tableVal.queryParams = function (params) {
// 定義返回對象
var parameter = tableVal.getParams();
parameter.pageNum = Math.round((params.offset + params.limit) / params.limit);
parameter.pageSize = params.limit;
// return JSON.stringify(parameter);
return parameter;
};
return tableVal;
}
/* 點擊查詢事件 */
$('#button_query').click(function () {
resetScheduleLists();
});
/*
合並行
@param data 原始數據（在服務端完成排序）
@param fieldName 合並屬性名稱數組
@param colspan 列數
@param target 目標表格對象
*/
function mergeCells(data, fieldName, colspan, target) {
if (data.length == 0) {
alert("不能傳入空數據");
return;
}
var numArr = [];
var value = data[0][fieldName];
var num = 0;
for (var i = 0; i < data.length; i++) {
if (value != data[i][fieldName]) {
numArr.push(num);
value = data[i][fieldName];
num = 1;
continue;
}
num++;
}
if (typeof (value) != "undefined" && value != "") {
numArr.push(num);
}
var merIndex = 0;
for (var i = 0; i < numArr.length; i++) {
$(target).bootstrapTable('mergeCells',
{
index: merIndex,
field: fieldName,
colspan: colspan,
rowspan: numArr[i]
})
merIndex += numArr[i];
}
}
/**
* 合並列
* @param data 原始數據（在服務端完成排序）
* @param fieldName 合並屬性數組
* @param target 目標表格對象
*/
function mergeColspan(data, fieldNameArr, target) {
if (data.length == 0) {
alert("不能傳入空數據");
return;
}
if (fieldNameArr.length == 0) {
alert("請傳入屬性值");
return;
}
var num = -1;
var index = 0;
for (var i = 0; i < data.length; i++) {
num++;
for (var v in fieldNameArr) {
index = 1;
if (data[i][fieldNameArr[v]] != data[i][fieldNameArr[0]]) {
index = 0;
break;
}
}
if (index == 0) {
continue;
}
$(target).bootstrapTable('mergeCells', {index: num, field: fieldNameArr[0], colspan: fieldNameArr.length, rowspan: 1});
}
}
// function initEcharts(){
// var myChart = echarts.init(document.getElementById('div_bt'));
// var option = {
// title: {
// text: '質量事故與問題歸零情況',
// left: 'center'
// },
// legend: {
// // orient: 'vertical',
// // top: 'middle',
// bottom: 10,
// left: 'center',
// data: ['已技術歸零', '已管理歸零', '已雙歸零', '未歸零']
// },
// series: [
// {
// type: 'pie',
// radius: '65%',
// center: ['50%', '50%'],
// selectedMode: 'single',
// data: [
// {value: 1548, name: '已技術歸零'},
// {value: 535, name: '已管理歸零'},
// {value: 510, name: '已雙歸零'},
// {value: 634, name: '未歸零'}
// ],
// itemStyle: {
// emphasis: {
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
// }
// }
// ]
// };
// myChart.setOption(option, true);
// $(window).resize(function () {
// myChart.resize();
// });
// }
完整的案列2：
頁面html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('餅圖穿透')"/>
<style type="text/css">
.page-header {
padding: 0;
margin: 0 0 10px;
color: #333;
}
.left-bottom {
margin-top: 50px;
}
.left-bottom > ul > li {
margin-top: 25px;
}
.right-top-tab > li {
width: 100px;
}
/*!*定義類名為.thead-blue的樣式*!*/
/*.table .thead-blue th {*/
/* color: #fff;*/
/* background-color: #3195f1;*/
/* border-color: #0d7adf;*/
/*}*/
</style>
</head>
<body class="gray-bg">
<div class="container-div ui-layout-center">
<div class="col-sm-12">
<!--左-->
<div class="col-sm-3">
<!--上-->
<!-- <div class="col-sm-12">-->
<!-- <div class="page-header text-center">-->
<!-- <h4 id="h4_title3" style="font-weight:bold;"></h4>-->
<!-- </div>-->
<!-- </div>-->
<div class="col-sm-12" style="margin-top: 10px;">
<div id="div_pie"></div><!--echarts圖-->
</div>
<!--下-->
<div class="col-sm-12" style="border-top:1px solid #eee;">
<div class="left-bottom" align="center">
<ul class="nav nav-pills nav-stacked" style="width: 130px">
<li class="active"><a href="#div_timeTab" data-toggle="tab">時間</a></li>
<li><a href="#div_unitTab" data-toggle="tab">單位</a></li>
</ul>
</div>
</div>
</div>
<!--右-->
<div class="col-sm-9" style="border-left:1px solid #eee;">
<div class="col-sm-12">
<div class="tab-content">
<!--時間-->
<div id="div_timeTab" class="active tab-pane">
<div class="col-sm-12">
<div class="page-header text-center">
<h4 id="h4_title2" style="font-weight:bold;"></h4>
</div>
</div>
<div class="col-sm-12">
<ul class="nav nav-pills pull-right text-center right-top-tab">
<li class="active"><a href="#div_monthTab" data-toggle="tab" id="month">月份</a></li>
<li><a href="#div_yearTab" data-toggle="tab" id="year">年份</a></li>
</ul>
<div id="mytab-content" class="tab-content">
<div id="div_monthTab" class="tab-pane fade in active">
<div class="col-sm-12" id="div_month" style="margin-top: 10px;"></div>
</div>
<div id="div_yearTab" class="tab-pane fade">
<div class="col-sm-12" id="div_year" style="margin-top: 10px;"></div>
</div>
</div>
</div>
</div>
<!--單位-->
<div id="div_unitTab" class="tab-pane">
<div class="col-sm-12">
<div class="page-header text-center">
<h4 id="h4_title" style="font-weight:bold;"></h4>
</div>
</div>
<div class="col-sm-12" style="margin-bottom: 10px;margin-top: 20px;">
<label><h4>篩選：</h4></label>
<input type="text" id="input_tname">
<button class="btn btn-success" id="button_query" style="margin-left: 30px;">查詢</button>
</div>
<table id="div_table"></table>
<table class="table-count" style="margin-top: 3px;margin-bottom:8px;">
<tr>
<td style="font-size: 16px;">總計：<span id="span_count">1555</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/common/echarts/echarts.js}"></script>
<script th:src="@{/js/report/pieEchart.js}"></script>
</body>
</html>
頁面對應js
$(function () { $("#div_month").css("height", $(window).height() * 0.85).css("width", $(window).width() * 0.70); $("#div_year").css("height", $(window).height() * 0.85).css("width", $(window).width() * 0.70); $("#div_pie").css("height", $(window).height() * 0.30).css("width", $(window).width() * 0.20); // $("#table-count").css("height", $(window).height() * 0.10); $(window).resize(function () { $("#div_month").css("height", $(window).height() * 0.85).css("width", $(window).width() * 0.70); $("#div_year").css("height", $(window).height() * 0.85).css("width", $(window).width() * 0.70); $("#div_pie").css("height", $(window).height() * 0.30).css("width", $(window).width() * 0.20); }); initEcharts();//初始化echarts(左上角餅圖) initTable();//初始化表格(單位) initColumnMonthEcharts();//月份的柱圖 initColumnYearEcharts(); }); //echarts 圖表 function initEcharts() { var myChart = echarts.init(document.getElementById('div_pie')); $.ajax({ type: 'post',//請求方式 url: ctx + '/report/echarts/dataEcharts',//url //data:{'norm':"凈利潤",'year':year(),'currentmonth':currentmonth(),'lastmonth':lastmonth()}, success: function (resp) { $("#h4_title3").html('質量事故與問題歸零情況'); if (resp.success) { var tatilData = []; var data = resp.data; for (var i = 0; i < data.length; i++) { tatilData.push(data[i].name) } var option = { title: { text: '質量事故與問題歸零情況', left: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, // grid: { // top: 'center', // left: 'center', // right: 'center', // bottom: 'center', // containLabel: true // }, // legend: [ // { // // orient: 'vertical', // // top: 'middle', // bottom: 8, // x: 'center', // data: ['已技術歸零', '已管理歸零'] // }, // { // // orient: 'vertical', // // top: 'middle', // bottom: 26, // x: 'center', // data: ['已雙歸零', '未歸零'] // } // ], legend: [ { //orient: 'vertical', // top: 'middle', bottom: 10, left: 'center', data: ['已技術歸零', '已管理歸零', '已雙歸零', '未歸零'] } ], calculable: true, series: [ { name: '歸零百分比', type: 'pie', radius: '45%',//餅圖的半徑大小 center: ['50%', '50%'],//餅圖的位置 minAngle: 0, // 最小角度改為0 selectedOffset: 10, // 選中是扇區偏移量 selectedMode: 'single', label: { //餅圖圖形上的文本標簽 normal: { show: true, length: 2,//標簽線長度 position: 'outer', //標簽的位置(圈外-outer, 圈中-inner) textStyle: { fontWeight: 120, fontSize: 12 //文字的字體大小 }, formatter: '{d}%' // 顯示的數據 } }, // label: { // normal: { // position: 'inner', // show: false, // textStyle: { // fontWeight: 120, // fontSize: 12 //文字的字體大小 // }, // formatter: '{d}%' // } // }, data: data, itemStyle: { normal: {//設置餅圖各塊之間的間隙 borderWidth: 2, borderColor: '#ffffff', color: function (params) { //自定義顏色 var colorList = [ '#00FFFF', '#00FF00', '#f321fa', '#FF8C00', ]; return colorList[params.dataIndex] } }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option, true); $(window).resize(function () { myChart.resize(); }); } else { alert(resp.message); } } }) } /* 初始table */ function initTable() { // 初始化Table var oTable = new tableInit(); oTable.init(); } // 重置table數據 function resetScheduleLists() { var oTable = new tableInit(); // 調度 oTable.resetScheduleLists(); } //當瀏覽器大小變化時 動態修改table 高度 // $(window).resize(function () { // $('#div_table').bootstrapTable('resetView', { // height: $(window).height() - 355 // }); // }); /** * 初始化 table 數據 */ var tableInit = function () { var tableVal = {}; // 重置表單數據 tableVal.resetScheduleLists = function () { $('#div_table').bootstrapTable('destroy'); tableVal.init(); }; $("#h4_title").html(year() + '年各單位質量事故與問題歸零情況'); // 初始化表單數據 tableVal.init = function () { var $table = $('#div_table'); $table.bootstrapTable({ url: ctx + '/report/echarts/dataTable',//url method: 'post',//請求方式 undefinedText: '',// 當數據為undefined時顯示的字符，默認是'-' toolbar: 'false', // 工具按鈕用哪個容器 toolbarAlign: 'false', // 工具按鈕的位置 striped: false, // 是否顯示行間隔色 striped: true, //是否顯示行間隔色 queryParams: tableVal.queryParams, // 傳遞參數（*） pagination: true,//是否分頁 sidePagination: "client",//分頁方式：client客戶端分頁，server服務端分頁（*） uniqueId: "tid", // 每一行的唯一標識，一般為主鍵列 showColumns: false,// 是否顯示列的按鈕 pageSize: 15, columns: [ [ { title: '序號', valign: 'middle', halign: "center", align: 'center', rowspan: 2, formatter: function (value, row, index) { return index + 1; } }, {field: 'tname', title: '單位名稱', rowspan: 2, valign: 'middle', halign: "center", align: 'center'}, {title: '問題發生率', colspan: 3, align: 'center', valign: 'middle', halign: "center", align: 'center'}, {title: 'A類問題發生率', colspan: 3, align: 'center', valign: 'middle', halign: "center", align: 'center'}, {title: 'B類問題發生率', colspan: 3, align: 'center', valign: 'middle', halign: "center", align: 'center'}, {title: 'C類問題發生率', colspan: 3, align: 'center', valign: 'middle', halign: "center", align: 'center'} ], [ {field: 'str1', title: '整體產品', align: 'center', halign: "center"}, {field: 'str2', title: '信息系統', align: 'center', halign: "center"}, {field: 'str3', title: '元器件', align: 'center', halign: "center"}, {field: 'str4', title: '整體產品', align: 'center', halign: "center"}, {field: 'str5', title: '信息系統', align: 'center', halign: "center"}, {field: 'str6', title: '元器件', align: 'center', halign: "center"}, {field: 'str7', title: '整體產品', align: 'center', halign: "center"}, {field: 'str8', title: '信息系統', align: 'center', halign: "center"}, {field: 'str9', title: '元器件', align: 'center', halign: "center"}, {field: 'str10', title: '整體產品', align: 'center', halign: "center"}, {field: 'str11', title: '信息系統', align: 'center', halign: "center"}, {field: 'str12', title: '元器件', align: 'center', halign: "center"} ] ], responseHandler: function (resp) { if (resp.success) { return resp.data; // return {rows: resp.data.rows, total: resp.data.total}; } else { CommonJS.modal.msgError(resp.message); } return resp; }, onLoadSuccess: function (data) { $("#div_table>thead").css("background", "#337ab7"); $("#div_table>thead").css("color", "white") // $("#div_table").on('load-success.bs.table', function (data) { // $('#div_table').bootstrapTable('resetView', { // height: $(window).height() - 355 // }); // }); } }); } tableVal.getParams = function () { var parameter = { //名稱 tname: $("#input_tname").val(), }; return CommonJS.removeEmptyValue(parameter); }; tableVal.getParams2 = function () { var parameter = CommonJS.getParameterByFrom(); return CommonJS.removeEmptyValue(parameter); }; // 得到查詢的參數 tableVal.queryParams = function (params) { // 定義返回對象 var parameter = tableVal.getParams(); parameter.pageNum = Math.round((params.offset + params.limit) / params.limit); parameter.pageSize = params.limit; // return JSON.stringify(parameter); return parameter; }; return tableVal; } /* 點擊查詢事件 */ $('#button_query').click(function () { resetScheduleLists(); }); //月份h4 賦值 $("#month").click(function () { $("#h4_title2").html(year() + '年質量事故與問題歸零情況'); }) //年份h4 賦值 $("#year").click(function () { $("#h4_title2").html((year() - 2) + '-' + year() + '年質量事故與問題歸零情況'); }) //月份柱圖 function initColumnMonthEcharts() { var myChart = echarts.init(document.getElementById('div_month')); $.ajax({ type: 'post',//請求方式 url: ctx + '/report/echarts/dataEchartsMonth',//url //data:{'norm':"凈利潤",'year':year(),'currentmonth':currentmonth(),'lastmonth':lastmonth()}, success: function (resp) { if (resp.success) { var tatilData = []; var yjsglData = []; var yglglData = []; var ysglData = []; var wglData = []; var yjsglzbData = []; var yglglzbData = []; var ysglzbData = []; var wglzbData = []; var data = resp.data; for (var i = 0; i < data.length; i++) { tatilData.push(data[i].month) yjsglData.push(data[i].yjsgl); yglglData.push(data[i].yglgl); ysglData.push(data[i].ysgl); wglData.push(data[i].wgl); yjsglzbData.push(data[i].yjsglzb); yglglzbData.push(data[i].yglglzb); ysglzbData.push(data[i].ysglzb); wglzbData.push(data[i].wglzb); } $("#h4_title2").html(year() + '年質量事故與問題歸零情況'); var option = { // title: { // text: year() + '年質量事故與問題歸零情況', // left: 'center' // }, grid: { top: '10%', left: '4%', right: '4%', bottom: '10%', containLabel: true }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, //右上角導出切換圖標 // toolbox: { // feature: { // dataView: {show: true, readOnly: false}, // magicType: {show: true, type: ['line', 'bar']}, // restore: {show: true}, // saveAsImage: {show: true} // } // }, legend: [ { bottom: '3%',//位置 x: 'center',//居中 itemGap: 50,//間距 data: ['已技術歸零', '已管理歸零', '已雙歸零', '未歸零'] }, { bottom: '0%',//位置 x: 'center',//居中 itemGap: 30,//間距 data: ['占比(已技術歸零)', '占比(已管理歸零)', '占比(已雙歸零)', '占比(未歸零)'] } ], xAxis: [ { type: 'category', data: ['1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月', '1-10月', '1-11月', '1-12月'], axisPointer: { type: 'shadow' }, axisLabel: { interval: 0, rotate: 0//旋轉度數 } } ], yAxis: [ { type: 'value', "splitLine": { //網格線 "show": false }, "axisTick": { //y軸刻度線 "show": false }, "axisLine": { //y軸 "show": false }, interval: 50 }, { type: 'value', interval: 20, "splitLine": { //網格線 "show": false }, "axisTick": { //y軸刻度線 "show": false }, "axisLine": { //y軸 "show": false }, axisLabel: { formatter: '{value} %' } } ], color: ['#00FFFF', '#00FF00', '#f321fa', '#FF8C00', '#1e90ff', '#ff7f50', '#b8b8b8', '#b5423d'], series: [ { name: '已技術歸零', itemStyle: { normal: { label: { show: true, //開啟顯示 position: 'top', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 14 } } } }, type: 'bar', barGap: '0', data: yjsglData }, { name: '已管理歸零', itemStyle: { normal: { label: { show: true, //開啟顯示 position: 'top', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 14 } } } }, type: 'bar', data: yglglData }, { name: '已雙歸零', itemStyle: { normal: { label: { show: true, //開啟顯示 position: 'top', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 14 } } } }, type: 'bar', data: ysglData }, { name: '未歸零', itemStyle: { normal: { label: { show: true, //開啟顯示 position: 'top', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 14 } } } }, type: 'bar', data: wglData }, { name: '占比(已技術歸零)', itemStyle: {normal: {label: {show: true}}}, type: 'line', yAxisIndex: 1, data: yjsglzbData }, { name: '占比(已管理歸零)', itemStyle: {normal: {label: {show: true}}}, type: 'line', yAxisIndex: 1, data: yglglzbData }, { name: '占比(已雙歸零)', itemStyle: {normal: {label: {show: true}}}, type: 'line', yAxisIndex: 1, data: ysglzbData }, { name: '占比(未歸零)', itemStyle: {normal: {label: {show: true}}}, type: 'line', yAxisIndex: 1, data: wglzbData } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option, true); // 瀏覽器窗口發生改變刷新Echarts圖 $(window).resize(function () { myChart.resize(); }); } else { alert(resp.message); } } }) } //年份柱圖 function initColumnYearEcharts() { var myChart = echarts.init(document.getElementById('div_year')); $.ajax({ type: 'post',//請求方式 url: ctx + '/report/echarts/dataEchartsYear',//url //data:{'norm':"凈利潤",'year':year(),'currentmonth':currentmonth(),'lastmonth':lastmonth()}, success: function (resp) { if (resp.success) { var tatilData = []; var yjsglData = []; var yglglData = []; var ysglData = []; var wglData = []; var yjsglzbData = []; var yglglzbData = []; var ysglzbData = []; var wglzbData = []; var data = resp.data; for (var i = 0; i < data.length; i++) { tatilData.push(data[i].year); yjsglData.push(data[i].yjsgl); yglglData.push(data[i].yglgl); ysglData.push(data[i].ysgl); wglData.push(data[i].wgl); yjsglzbData.push(data[i].yjsglzb); yglglzbData.push(data[i].yglglzb); ysglzbData.push(data[i].ysglzb); wglzbData.push(data[i].wglzb); } var option = { // title: { // text: (year() - 2) + '-' + year() + '年質量事故與問題歸零情況', // left: 'center' // }, grid: { top: '10%', left: '4%', right: '4%', bottom: '10%', containLabel: true }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, //右上角導出切換圖標 // toolbox: { // feature: { // dataView: {show: true, readOnly: false}, // magicType: {show: true, type: ['line', 'bar']}, // restore: {show: true}, // saveAsImage: {show: true} // } // }, legend: [ { bottom: '3%',//位置 x: 'center',//居中 itemGap: 50,//間距 data: ['已技術歸零', '已管理歸零', '已雙歸零', '未歸零'] }, { bottom: '0%',//位置 x: 'center',//居中 itemGap: 30,//間距 data: ['占比(已技術歸零)', '占比(已管理歸零)', '占比(已雙歸零)', '占比(未歸零)'] } ], xAxis: [ { type: 'category', data: tatilData, axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', "splitLine": { //網格線 "show": false }, "axisTick": { //y軸刻度線 "show": false }, "axisLine": { //y軸 "show": false }, interval: 50 }, { type: 'value', interval: 20, "splitLine": { //網格線 "show": false }, "axisTick": { //y軸刻度線 "show": false }, "axisLine": { //y軸 "show": false }, axisLabel: { formatter: '{value} %' } } ], color: ['#00FFFF', '#00FF00', '#f321fa', '#FF8C00', '#1e90ff', '#ff7f50', '#b8b8b8', '#b5423d'], series: [ { name: '已技術歸零', itemStyle: { normal: { label: { show: true, //開啟顯示 position: 'top', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 14 } } } }, type: 'bar', barWidth: '20',//柱圖寬度 barGap: '0', data: yjsglData }, { name: '已管理歸零', itemStyle: { normal: { label: { show: true, //開啟顯示 position: 'top', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 14 } } } }, type: 'bar', barWidth: '20',//柱圖寬度 data: yglglData }, { name: '已雙歸零', itemStyle: { normal: { label: { show: true, //開啟顯示 position: 'top', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 14 } } } }, type: 'bar', barWidth: '20',//柱圖寬度 data: ysglData }, { name: '未歸零', itemStyle: { normal: { label: { show: true, //開啟顯示 position: 'top', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 14 } } } }, type: 'bar', barWidth: '20',//柱圖寬度 data: wglData }, { name: '占比(已技術歸零)', itemStyle: { normal: { label: { show: true, position: 'left', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 14 } } } }, type: 'line', yAxisIndex: 1, data: yjsglzbData }, { name: '占比(已管理歸零)', itemStyle: {normal: {label: {show: true}}}, type: 'line', yAxisIndex: 1, data: yglglzbData }, { name: '占比(已雙歸零)', itemStyle: {normal: {label: {show: true}}}, type: 'line', yAxisIndex: 1, data: ysglzbData }, { name: '占比(未歸零)', itemStyle: {normal: {label: {show: true}}}, type: 'line', yAxisIndex: 1, data: wglzbData } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option, true); $(window).resize(function () { myChart.resize(); }); } else { alert(resp.message); } } }) } /* * 獲取當前年 */ function year() { var date = new Date; var year = date.getFullYear(); return year; } // $("#div_yearTab").click(function () { // var myChart = echarts.init(document.getElementById('div_year')); // var option = { // title: { // text: '2017-2019年質量事故與問題歸零情況', // left: 'center' // }, // tooltip: { // trigger: 'axis', // axisPointer: { // type: 'cross', // crossStyle: { // color: '#999' // } // } // }, // //右上角導出切換圖標 // // toolbox: { // // feature: { // // dataView: {show: true, readOnly: false}, // // magicType: {show: true, type: ['line', 'bar']}, // // restore: {show: true}, // // saveAsImage: {show: true} // // } // // }, // legend: { // bottom: -5,//位置 // data: ['已技術歸零', '已管理歸零', '已雙歸零', '未歸零', '占比(已技術歸零)', '占比(已管理歸零)', '占比(已雙歸零)', '占比(未歸零)'] // }, // xAxis: [ // { // type: 'category', // data: ['2017', '2018', '2019'], // axisPointer: { // type: 'shadow' // } // } // ], // yAxis: [ // { // type: 'value', // "splitLine": { //網格線 // "show": false // }, // "axisTick": { //y軸刻度線 // "show": false // }, // "axisLine": { //y軸 // "show": false // // }, // interval: 50 // }, // { // type: 'value', // interval: 20, // "splitLine": { //網格線 // "show": false // }, // "axisTick": { //y軸刻度線 // "show": false // }, // "axisLine": { //y軸 // "show": false // // }, // axisLabel: { // formatter: '{value} %' // } // } // ], // color: ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#1e90ff', '#ff7f50', '#b8b8b8', '#b5423d'], // series: [ // // { // name: '已技術歸零', // itemStyle: { // normal: { // label: { // show: true, //開啟顯示 // position: 'top', //在上方顯示 // textStyle: { //數值樣式 // color: 'black', // fontSize: 14 // } // } // } // }, // type: 'bar', // barGap: '0', // data: [753, 657, 654] // }, // { // name: '已管理歸零', // itemStyle: { // normal: { // label: { // show: true, //開啟顯示 // position: 'top', //在上方顯示 // textStyle: { //數值樣式 // color: 'black', // fontSize: 14 // } // } // } // }, // type: 'bar', // data: [352, 875, 453] // }, // { // name: '已雙歸零', // itemStyle: { // normal: { // label: { // show: true, //開啟顯示 // position: 'top', //在上方顯示 // textStyle: { //數值樣式 // color: 'black', // fontSize: 14 // } // } // } // }, // type: 'bar', // data: [312, 475, 653] // }, // { // name: '未歸零', // itemStyle: { // normal: { // label: { // show: true, //開啟顯示 // position: 'top', //在上方顯示 // textStyle: { //數值樣式 // color: 'black', // fontSize: 14 // } // } // } // }, // type: 'bar', // data: [252, 975, 353] // }, // { // name: '占比(已技術歸零)', // itemStyle: {normal: {label: {show: true}}}, // type: 'line', // yAxisIndex: 1, // data: [75, 96, 24] // }, // { // name: '占比(已管理歸零)', // itemStyle: {normal: {label: {show: true}}}, // type: 'line', // yAxisIndex: 1, // data: [54, 75, 14] // }, // { // name: '占比(已雙歸零)', // itemStyle: {normal: {label: {show: true}}}, // type: 'line', // yAxisIndex: 1, // data: [70, 85, 44] // }, { // name: '占比(未歸零)', // itemStyle: {normal: {label: {show: true}}}, // type: 'line', // yAxisIndex: 1, // data: [30, 65, 54] // } // ] // }; // // 使用剛指定的配置項和數據顯示圖表。 // myChart.setOption(option, true); // $(window).resize(function () { // myChart.resize(); // }); // })
參考博客：https://blog.csdn.net/qweasdzxc_1092665276/article/details/85000602