first
parent
3d628bd344
commit
5c0c055ba8
@ -0,0 +1,173 @@
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
let xAxisData = ["排产单量", "生产单量", "完工单量"]
|
||||
let seriesData = [100, 200, 300]
|
||||
|
||||
let colors = ['#2fa3f8', '#f4b069', '#2fa3f8']
|
||||
|
||||
|
||||
export let option = {
|
||||
// backgroundColor: '#09224e',
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '8%',
|
||||
top: '16%',
|
||||
bottom: '5%',
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'none'
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params[0].name + ': ' + params[0].value;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#37B6F2',
|
||||
opacity: 0.5,
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
// interval: 0,
|
||||
fontSize: 8,
|
||||
//函数模板
|
||||
formatter(val, i) {
|
||||
if (i == 0) {
|
||||
return `{start| ${val}}`
|
||||
} else if (i == 1) {
|
||||
return `{two| ${val}}`
|
||||
}
|
||||
else if (i == 2) {
|
||||
return `{three| ${val}}`
|
||||
}
|
||||
else if (i == 3) {
|
||||
return `{end| ${val}}`
|
||||
}
|
||||
|
||||
},
|
||||
rich: {
|
||||
start: {
|
||||
color: '#fff',
|
||||
padding: [5, 4, 4, 4],
|
||||
align: 'center'
|
||||
},
|
||||
two: {
|
||||
color: '#fff',
|
||||
padding: [5, 4, 4, 4],
|
||||
align: 'center'
|
||||
},
|
||||
three: {
|
||||
color: '#fff',
|
||||
padding: [5, 4, 4, 4],
|
||||
align: 'center'
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name:'（个） ',
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true, lineStyle: {
|
||||
color: '#37B6F2',
|
||||
opacity: 0.1,
|
||||
}
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'hill',
|
||||
type: 'pictorialBar',
|
||||
barCategoryGap: '10%',
|
||||
symbolClip: true,
|
||||
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
return {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: colors[params.dataIndex]
|
||||
},
|
||||
{
|
||||
offset: 0.3,
|
||||
color: colors[params.dataIndex]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(13,8,16,0)'
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
opacity: 1
|
||||
},
|
||||
},
|
||||
// 图形上方描述文字
|
||||
label: {
|
||||
show: false,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
fontSize: 12,
|
||||
formatter: function (params) {
|
||||
let index = params.dataIndex
|
||||
let str = "{a" + index + "|" + params.value + "万人}";
|
||||
return str;
|
||||
},
|
||||
rich: {
|
||||
a0: {
|
||||
color: colors[0],
|
||||
align: "center",
|
||||
},
|
||||
a1: {
|
||||
color: colors[1],
|
||||
align: "center",
|
||||
},
|
||||
a2: {
|
||||
color: colors[2],
|
||||
align: "center",
|
||||
},
|
||||
a3: {
|
||||
color: colors[3],
|
||||
align: "center",
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: seriesData,
|
||||
z: 2
|
||||
}]
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue