import * as echarts from 'echarts'
/**
* 统一样式，加载
* @param {*} id
* @param {*} option
*/
export function loadEcharts(id, option) {
var myChart = echarts.init(document.getElementById(id))
if (option.textStyle == null) {
option.textStyle = {
fontFamily: 'Microsoft YaHei',
color: '#ffffff'
}
}
// 使用刚指定的配置项和数据显示图表。
myChart.clear()
myChart.setOption(option, true)
window.addEventListener('resize', function() {
myChart.resize()
})
return myChart
}
const colorX = '#c7e7ff'
const colorY = '#7696c5'
// 系统首页图
export function barTop(data, colorArr) {
var salvProName = ['x']
var salvProValue = [data]
var Value = []// 背景按最大值
for (let i = 0; i < salvProValue.length; i++) {
Value.push(salvProValue[0] + 20)
}
const color = colorArr
const option = {
backgroundColor: 'transparent',
grid: {
left: '0%',
right: '0%',
bottom: '2%',
top: '2%',
containLabel: true
},
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'none'
// },
// formatter: function(params) {
// return params[0].name + ' : ' + params[0].value
// }
// },
xAxis: {
show: false,
type: 'value'
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: false,
textStyle: {
color: '#000'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: salvProName
}],
series: [{
name: '值',
type: 'bar',
zlevel: 1,
itemStyle: {
normal: {
// barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: `rgba(${color[0]},1)`
}, {
offset: 1,
color: `rgba(${color[1]},1)`
}])
}
},
barWidth: 15,
data: salvProValue
},
{
name: '背景',
type: 'bar',
barWidth: 15,
barGap: '-100%',
data: Value,
itemStyle: {
normal: {
color: `rgba(${color[1]},0.8)`,
barBorderRadius: 30
}
}
}
]
}
return option
}
export function bar01(data) {
var dataX = data.map(r => r.key)
var dataY = data.map(r => r.value)
// var salvProMax = []// 背景按最大值
// for (let i = 0; i < salvProValue.length; i++) {
// salvProMax.push(salvProValue[0])
// }
var option = {
backgroundColor: 'transparent',
grid: {
left: '5%',
right: '5%',
bottom: '0%',
top: '2%',
containLabel: true
},
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'none'
// },
// formatter: function(params) {
// return params[0].name + ' : ' + params[0].value
// }
// },
xAxis: {
show: true,
type: 'value',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
show: true,
textStyle: {
color: '#000'
}
}
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: false,
textStyle: {
color: '#000'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: dataX
}],
series: [{
name: '值',
type: 'bar',
zlevel: 1,
// lineStyle:{
// normal:{
//
// }
// },
itemStyle: {
normal: {
barBorderRadius: 30,
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
// offset: 0,
// color: 'rgb(42,197,137,1)'
// }, {
// offset: 1,
// color: 'rgb(187,236,218,1)'
// }])
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: `rgba(42, 197, 137, 1)`// 0% 处的颜色
},
{
offset: 1,
color: `rgba(187, 236, 218, 1)` // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
} // 渐变颜色
}
},
label: {
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
// axisLabel: {
// textStyle: {
// color: '#000',
// fontSize: '12'
// },
// },
position: 'right',
data: dataY
},
barWidth: 10,
data: dataY
}
// {
// name: '背景',
// type: 'bar',
// barWidth: 20,
// barGap: '-100%',
// data: salvProMax,
// itemStyle: {
// normal: {
// color: 'rgba(24,31,68,1)',
// barBorderRadius: 30,
// }
// },
// },
]
}
return option
}
export function line01(data) {
const dataX = data.map(r => r.key)
const dataY = data.map(r => r.value)
const option = {
backgroundColor: 'transparent',
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// // type: 'shadow',
// label: {
// show: true,
// backgroundColor: '#000'
// }
// }
// },
grid: {
left: '2%',
right: '5%',
bottom: '0%',
top: '3%',
containLabel: true
},
// legend: {
// data: ['line', 'bar'],
// textStyle: {
// color: '#ccc'
// }
// },
xAxis: {
data: dataX,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
show: true,
textStyle: {
color: '#000'
}
}
},
yAxis: {
max: 14,
min: 0,
interval: 2,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#000'
}
}
},
series: [
{
name: '时间',
type: 'line',
smooth: false,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 8,
itemStyle: {
normal: {
color: `rgba(42, 197, 137, 1)`
}
},
lineStyle: {
normal: {
width: 2,
color: `rgba(42, 197, 137, 1)`
}
},
data: dataY
}
]
}
return option
}
// 综合看板图
export function bar02(dataArr, titlenameArr) {
// const data = [700, 600, 50, 40, 30]
// const titlename = ['500ml提手盖咖啡杯 蓝色 喷塑', '500ml提手盖咖啡杯 蓝色 喷塑', '尺寸', '颜色', '大小']
// const data = val.map(i => i.cont)
// const titlename = val.map(i => i.name)
const data = dataArr.filter((item, index) => index < 5)
const titlename = titlenameArr.filter((item, index) => index < 5)
const length = titlename.length
if (titlename.length < 5) {
for (let i = 0; i < 5 - length; i++) {
titlename.push('0')
}
}
console.log(titlename, 123)
// const valdata = [683, 500, 400, 300, 200]
// const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
// const myColor = ['#0000FF']
// const myColor = ['#7af5f5', '#00FFFF', '#00FFFF', '#00FFFF', '#00FFFF']
const myColor = ['rgba(122,245,245,1)', 'rgba(122,245,245,0.95)', 'rgba(122,245,245,0.9)', 'rgba(122,245,245,0.85)', 'rgba(122,245,245,0.8)']
const option = {
animation: false,
backgroundColor: 'transparent',
title: {
show: false,
text: '一周内Top5不良：',
x: '2%',
y: '4%',
textStyle: {
color: '#d8d7d9',
fontSize: '18'
// fontWeight: 'lighter'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
}
},
grid: {
left: '5%',
right: '10%',
bottom: '0%',
top: '10%',
containLabel: true
},
// animation: false, // 取消动画
xAxis: {
show: false
},
yAxis: [
{
show: true,
data: titlename,
inverse: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
// color: '#fff',
color: function(value, index) {
return value === '0' ? 'transparent' : '#fff'
},
verticalAlign: 'bottom',
// align: 'left',
// margin: 80,
fontSize: 20,
// formatter: function(value, index) {
// return [
// '{lg|' + (index + 1) + '、 }' + '{title|' + value + '} '
// ].join('\n')
// },
formatter: function(params) {
var val = ''
if (params.length > 8) {
val = params.substr(0, 8) + '...'
return val
} else {
return params
}
},
rich: {
lg: {
// backgroundColor: '#339911',
// color: '#d8d7d9',
color: '#fff',
borderRadius: 15,
// padding: 5,
align: 'center',
width: 15,
height: 15
}
}
}
},
{
show: true,
inverse: true,
data: data,
axisLabel: {
textStyle: {
fontSize: 20,
color: '#fff'
}
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}
],
series: [
{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: data,
barWidth: 22,
itemStyle: {
normal: {
barBorderRadius: 30,
color: function(params) {
// const num = myColor.length
// return myColor[params.dataIndex % num]
return myColor[params.dataIndex]
}
}
},
label: {
normal: {
color: '#fff',
show: true,
position: [0, '-20px'],
textStyle: {
fontSize: 16
},
formatter: function(a, b) {
return a.name
}
}
// normal: {
// show: true,
// position: 'right',
// formatter: '{c}',
// fontSize: 20,
// color: '#fff'
// // formatter: '{c}%',
// }
}
}
]
}
return option
}
// 仓库管理看板图 （弃用）
export function bar03(titleText) {
const path = 'path://M214,1079l8-6h16l8,6-8,6H222Z'
const zzx1 = ['800', '900', '700', '300', '500', '800', '700']
const wgx1 = ['700', '600', '500', '400', '300', '333', '222']
const option = {
backgroundColor: 'transparent',
tooltip: {
show: false,
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(e) {
if (e.length > 1) {
var S = e[1].data - e[0].data
return e[0].axisValue + ':
差额=当前－年初
=' + S
} else if (e.length = 1) {
return e[0].axisValue + ':
' + e[0].seriesName + '=' + e[0].data
}
}
},
title: {
text: titleText,
x: '66%',
y: '2%',
textStyle: {
// color: '#fff',
color: '#00ffff',
fontSize: '18',
fontWeight: 'lighter'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
}
},
grid: {
left: '4%',
right: '4%',
bottom: '4%',
top: '15%',
containLabel: true
},
legend: {
data: ['title1', 'title2'],
left: 220,
top: 10,
textStyle: {
color: '#00ffff',
fontSize: 14
},
itemWidth: 12,
itemHeight: 10,
itemGap: 35,
color: '#242424'
},
xAxis: {
type: 'category',
data: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
axisLine: {
lineStyle: {
show: true,
lineStyle: {
color: '#6A989E'
}
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei',
color: '#fff', // x轴颜色
fontWeight: 'normal',
fontSize: '14',
lineHeight: 22
}
}
// splitLine:{
// show:true,
// lineStyle: {
// type: 'dashed',
// color: 'rgba(135,140,147,0.8)'
// }
// },
},
yAxis: {
type: 'value',
name: '数量（单位：个）',
nameTextStyle: {
color: '#ffffff'
},
axisLine: {
show: false,
lineStyle: {
type: 'dashed',
color: 'rgba(135,140,147,0.8)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(135,140,147,1)' // 左侧显示线
}
},
axisLabel: {
formatter: '{value}',
color: '#fff',
fontSize: 14
}
},
series: [
{
type: 'pictorialBar',
symbol: path,
symbolSize: [30, 8],
symbolOffset: [-18, -4],
symbolPosition: 'end',
z: 12,
color: '#3440FF',
data: zzx1
},
{
type: 'pictorialBar',
symbol: path,
symbolSize: [30, 8],
symbolOffset: [18, -4],
// symbolOffset: [20, -5],
symbolPosition: 'end',
z: 12,
color: '#FF1155',
data: wgx1
},
{
type: 'pictorialBar',
symbol: path,
symbolSize: [30, 8],
symbolOffset: [-18, 4],
z: 12,
color: 'rgba(126,192,238,0.6)',
data: zzx1
},
{
name: '',
type: 'pictorialBar',
symbol: path,
symbolSize: [30, 8],
// symbolOffset: [20, 4],
symbolOffset: [18, 4],
color: '#FFC0CB',
z: 12,
data: wgx1
}, {
name: 'title1',
type: 'bar',
barWidth: '30',
itemStyle: {
normal: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'blue'
}, {
offset: 1,
color: '#7EC0EE'
}]),
barBorderRadius: 0
}
},
label: {
show: true,
// position: ['-18','-18'],
position: 'top',
color: '#00f8ff',
fontSize: 12
},
data: zzx1
},
{
name: 'title2',
type: 'bar',
barWidth: '30',
itemStyle: {
normal: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FF2246'
}, {
offset: 1,
color: '#FFC0CB'
}]),
barBorderRadius: 0
}
},
label: {
show: true,
// position: ['18','-18'],
position: 'top',
color: '#00f8ff',
fontSize: 12
},
data: wgx1
}
]
}
return option
}
// 采购订单图
export function pie01() {
const option = {
backgroundColor: 'transparent',
title: {
text: '60.21%',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
color: '#fff',
fontSize: 18
}
},
color: ['rgba(176, 212, 251, 1)'],
legend: {
show: false,
itemGap: 12,
data: ['01', '02']
},
series: [
{
name: 'Line 1',
type: 'pie',
clockWise: true,
radius: ['50%', '66%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [
{
value: 80,
name: '01',
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#24d3ff' // 0% 处的颜色
}, {
offset: 1,
color: '#5580fe' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
name: '02',
value: 20
}
]
}]
}
return option
}
// 看板头部背景条
export function kbTop() {
var getXY = ['学前教育系'] // 数据点名称
var getRS = [255] // 学生满意度
var max = Math.ceil(255 / 10) * 10
const option = {
animation: false,
backgroundColor: 'transparent',
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '0%'
// containLabel: true
},
xAxis: [
{
type: 'value',
show: false,
axisLabel: {
margin: 5,
color: '#666666',
textStyle: {
fontSize: '13'
}
},
min: 0,
max: max, // 计算最大值
interval: max / 5, // 平均分为5份
splitNumber: 5,
splitLine: {
show: true,
lineStyle: {
color: '#D1D1D1'
}
},
axisLine: {
lineStyle: {
color: '#333333'
}
},
axisTick: {
show: false
}
}
],
yAxis: [
{
type: 'category',
inverse: true,
show: false,
axisLabel: {
textStyle: {
color: '#6F84BD',
fontSize: '13'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#333333'
}
},
data: getXY
}
],
series: [
{
name: '值',
type: 'bar',
zlevel: 1,
xAxisIndex: 0,
label: {
show: false,
position: 'right',
color: '#6F84BD',
fontSize: 14,
offset: [10, 0]
},
itemStyle: {
normal: {
barBorderRadius: [10, 10, 10, 10],
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#91ddec' // 0% 处的颜色
}, {
offset: 1,
color: '#09d8f2' // 100% 处的颜色
}], false)
}
},
barWidth: 15,
data: getRS
}
]
}
return option
}
// 车间质量左下周不良
export function line02(dataX, dataY) {
return {
animation: false,
backgroundColor: 'transparent',
tooltip: {},
// title: {
// show: false,
// text: '订单完成总数',
// left: '50%',
// top: '5%',
// textAlign: 'center',
// textStyle: {
// // color: '#fff',
// color: '#00ffff',
// fontSize: '20',
// fontWeight: 'bolder'
// }
// },
grid: {
left: '0%',
right: '2%',
bottom: '5%',
top: '8%',
containLabel: true
},
legend: {
show: false,
itemGap: 50,
data: ['注册总量', '最新注册量'],
textStyle: {
color: '#f9f9f9',
borderColor: '#fff'
}
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisLabel: {
interval: 0,
formatter: '{value}',
fontSize: 18,
margin: 20,
textStyle: {
color: colorX
}
},
axisLine: {
lineStyle: {
color: '#032c58'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: false
},
data: dataX
}],
yAxis: [
{
// max: 800,
boundaryGap: false,
splitNumber: 4,
type: 'value',
axisLabel: {
textStyle: {
fontSize: 18,
color: colorY
}
},
// name: '单',
// nameTextStyle: {
// color: colorY,
// fontSize: 14,
// lineHeight: 20
// },
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: true
}
}
],
series: [
{
name: '注册总量',
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#28ffb3' // 线条颜色
},
borderColor: '#f0f'
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: 16
}
},
itemStyle: {
normal: {
color: '#28ffb3'
}
},
tooltip: {
show: false
},
areaStyle: { // 区域填充样式
normal: {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,154,120,1)'
},
{
offset: 1,
color: 'rgba(0,0,0, 0)'
}
], false),
shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
data: dataY
// data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
}
// {
// name: '最新注册量',
// type: 'bar',
// barWidth: 20,
// tooltip: {
// show: false
// },
// label: {
// show: true,
// position: 'top',
// textStyle: {
// color: '#fff',
// }
// },
// itemStyle: {
// normal: {
// // barBorderRadius: 5,
// // color: new echarts.graphic.LinearGradient(
// // 0, 0, 0, 1,
// // [{
// // offset: 0,
// // color: '#14c8d4'
// // },
// // {
// // offset: 1,
// // color: '#43eec6'
// // }
// // ]
// // )
// color: function (params) {
// var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
// return colorList[params.dataIndex];
// }
// }
// },
// data: [200, 382, 102, 267, 186, 315, 316]
// }
]
}
}
// 车间质量右上 日不良
export function bar04(resValueArr) {
// let data = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))//替换数组对象中的键名
const data = [
{
name: '装配一线',
value: resValueArr.find(i => i.eqp_name === '装配一线') ? resValueArr.find(i => i.eqp_name === '装配一线').cont : 0
},
{
name: '装配二线',
value: resValueArr.find(i => i.eqp_name === '装配二线') ? resValueArr.find(i => i.eqp_name === '装配二线').cont : 0
},
{
name: '装配三线',
value: resValueArr.find(i => i.eqp_name === '装配三线') ? resValueArr.find(i => i.eqp_name === '装配三线').cont : 0
},
{
name: '装配四线',
value: resValueArr.find(i => i.eqp_name === '装配四线') ? resValueArr.find(i => i.eqp_name === '装配四线').cont : 0
}
]
const getSymbolData = (data) => {
const arr = []
for (var i = 0; i < data.length; i++) {
arr.push({
value: data[i].value,
symbolPosition: 'end'
})
}
return arr
}
const option = {
animation: false,
backgroundColor: 'transparent',
grid: {
top: '0%',
bottom: 0,
right: '4%',
left: -20,
containLabel: true
},
xAxis: {
show: false
},
yAxis: [{
triggerEvent: true,
show: true,
inverse: true,
data: data.map(r => r.name),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
interval: 0,
color: '#fff',
align: 'left',
margin: 60,
formatter: function(value, index) {
return '{title|' + value + '}'
},
rich: {
title: {
width: 50,
align: 'right',
fontSize: 20
}
}
}
}, {
triggerEvent: true,
show: true,
inverse: true,
data: data.map(r => r.name),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
shadowOffsetX: '-20px',
color: ['#fff'],
align: 'left',
verticalAlign: 'center',
lineHeight: 40,
fontSize: 20,
formatter: function(value, index) {
return data[index].value + ''
}
}
}],
series: [
{
name: 'XXX',
type: 'pictorialBar',
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
// symbolSize: [50, 50],
symbolSize: function(params) {
return params === 0 ? [0, 0] : [50, 50]
},
symbolOffset: [20, 0],
z: 12,
itemStyle: {
normal: {
color: '#fff'
}
},
data: getSymbolData(data)
},
{
name: '条',
type: 'bar',
showBackground: true,
// barBorderRadius: 30,
yAxisIndex: 0,
data: data,
barWidth: 10,
// align: left,
itemStyle: {
normal: {
color: 'rgba(41, 162, 245, 1)',
barBorderRadius: 10
}
// color: '#A71A2B',
// barBorderRadius: 4,
}
// label: {
// normal: {
// color: '#fff',
// show: true,
// position: ["-80px", 0],
// textStyle: {
// fontSize: 16
// },
// formatter: function(a, b) {
// return a.name
// }
// }
// }
}]
}
return option
}
// 车间质量右下 周不良
export function pie02(resValueArr) {
const bgColor = 'transparent'
const title = '总不良数'
const color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
const echartData = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))// 替换数组对象中的键名
const formatNumber = function(num) {
const reg = /(?=(\B)(\d{3})+$)/g
return num.toString().replace(reg, ',')
}
const total = echartData.reduce((a, b) => {
return a + b.value * 1
}, 0)
const option = {
animation: false,
backgroundColor: bgColor,
color: color,
// tooltip: {
// trigger: 'item'
// },
title: [{
text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
top: 'center',
left: 'center',
textStyle: {
rich: {
name: {
fontSize: 22,
fontWeight: 'normal',
color: '#fff',
padding: [10, 0]
},
val: {
fontSize: 22,
fontWeight: 'bold',
color: '#fff'
}
}
}
}
// {
// text: '单位：个',
// top: 20,
// left: 20,
// textStyle: {
// fontSize: 14,
// color: '#666666',
// fontWeight: 400
// }
// }
],
// legend: {
// orient: 'vertical',
// icon: 'rect',
// x: '80%',
// y: 'center',
// itemWidth: 12,
// itemHeight: 12,
// align: 'left',
// textStyle: {
// rich: {
// name: {
// fontSize: 12
// },
// value: {
// fontSize: 16,
// padding: [0, 5, 0, 15]
// },
// unit: {
// fontSize: 12
// }
// }
// },
// formatter: function(name) {
// let res = echartData.filter(v => v.name === name);
// res = res[0] || {};
// let unit = res.unit || '';
// return '{name|' + name + '} {value|' + res.value + '}{unit|' + unit + '}'
// }
// // data: legendName
// },
series: [
{
type: 'pie',
radius: ['35%', '50%'],
center: ['50%', '50%'],
data: echartData,
hoverAnimation: false,
itemStyle: {
normal: {
borderColor: bgColor,
borderWidth: 2
}
},
labelLine: {
normal: {
// showAbove: false,
length: 20,
length2: 35,
lineStyle: {
color: '#fff'
}
}
},
label: {
normal: {
formatter: params => {
return (
'{icon|●}{name|' + params.name + '}{value|' +
formatNumber(params.value) + '}'
)
},
padding: [0, -50, 25, -50],
rich: {
icon: {
fontSize: 18,
color: 'red'
},
name: {
fontSize: 18,
padding: [0, 10, 0, 4],
color: '#fff'
},
value: {
fontSize: 18,
fontWeight: 'bold',
color: '#fff'
}
}
}
}
}]
}
return option
}
// 车间生产 生产信息 生产进度 进度条
export function progress(param1, param2) {
// param1 报工数量
// param2 任务数量
// 拿到数据之后需要计算出相对长度 param2的相对长度为100
let relativeValue = ''// 相对值 绿色背景
relativeValue = (param1 / param2) * 100
// 百分比数值的位置
var position = 'right'
// if (param1 >= 50) {
// position = 'inside';
// } else if (param1 < 50) {
// position = 'right';
// }
var option = {
animation: false,
// animation: false, // 取消动画
// animationDuration: 5000,
grid: {
top: 'center',
left: '0%',
right: '0%',
// height: '%',
// containLabel: false
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
show: false
},
max: 100,
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
},
yAxis: [{
type: 'category',
data: [],
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
z: 10
}, {
type: 'category',
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
data: []
}],
series: [{
name: '',
type: 'bar',
barWidth: '100%',
// barMaxWidth: '100%',
label: {
normal: {
show: true,
// position: ['24', '38%'],
position: (param1.toString() + param2.toString()).length <= 6 ? ['24', '38%'] : 'insideLeft',
// formatter: '{c} %',
formatter: param1 + '/' + param2,
textStyle: {
color: '#FFFFFF',
fontWeight: 'bold',
fontFamily: 'Microsoft YaHei',
fontSize: 18
}
}
},
itemStyle: {
normal: {
barBorderRadius: 5,
shadowBlur: 10,
shadowColor: '#111',
color: '#2FD04F'
}
},
// data: [param1],
data: [relativeValue],
z: 10
}, {
type: 'bar',
barWidth: '100%',
yAxisIndex: 1,
silent: true,
// barMaxWidth: '100%',
itemStyle: {
normal: {
barBorderRadius: 5,
color: '#42475B'
}
},
// data: [param2]
data: [100]
}]
}
return option
}
// 采购订单
export function cgddchart(data1, data2, data3) {
// 得到最大值 5的倍数
let max = Math.max(Math.max(data1, data2), data3) + 5
if (max % 5 !== 0) {
max = 5 - max % 5 + max
}
const option = {
backgroundColor: 'transparent',
tooltip: {
formatter: '{a}
{c} {b}'
},
series: [
{
show: false,
name: ' ',
type: 'gauge',
color: ['#f00'],
min: 0,
max: max,
splitNumber: 5,
radius: '70%',
center: ['17%', '48%'],
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10,
color: [
[0.4, '#09d8f2'],
[1, '#00FFFFF']
]
},
backgroundColor: 'none'
},
tooltip: {
show: false
},
axisTick: { // 坐标轴小标记
length: 10, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 10, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: colorY
}
},
axisLabel: {
borderRadius: 1,
// color: 'rgba(255,255,255,0.7)',
color: '#00FFFF',
padding: 1,
fontSize: 18
},
title: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
fontSize: 22,
fontFamily: 'Microsoft YaHei',
fontColor: '#FFF',
color: '#FFF',
paddingTop: 20,
offsetCenter: [0, '120%']
// fontStyle: 'italic'
},
itemStyle: {
// color: '#1092ff'
color: '#09d8f2'
},
detail: {
shadowOffsetX: 0,
shadowOffsetY: 0,
fontFamily: 'digital',
fontSize: 26,
color: '#fff',
rich: {},
offsetCenter: [0, '90%'],
formatter: function(value) {
return value
}
},
data: [{
value: data1,
name: '本月采购订单数'
}]
},
{
name: '本月采购订单数',
type: 'gauge',
color: ['#f00'],
min: 0,
max: max,
splitNumber: 5,
radius: '70%',
center: ['17%', '48%'],
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10,
color: [
[0.4, '#09d8f2'],
[1, '#00FFFFF']
]
},
backgroundColor: 'none'
},
tooltip: {
show: false
},
axisTick: { // 坐标轴小标记
length: 10, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 10, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: colorY
}
},
axisLabel: {
borderRadius: 1,
// color: 'rgba(255,255,255,0.7)',
color: '#00FFFF',
padding: 1,
fontSize: 18
},
title: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
fontSize: 22,
fontFamily: 'Microsoft YaHei',
fontColor: '#FFF',
color: '#FFF',
paddingTop: 20,
offsetCenter: [0, '120%']
// fontStyle: 'italic'
},
itemStyle: {
// color: '#1092ff'
color: '#09d8f2'
},
detail: {
shadowOffsetX: 0,
shadowOffsetY: 0,
fontFamily: 'digital',
fontSize: 26,
color: '#fff',
rich: {},
offsetCenter: [0, '90%'],
formatter: function(value) {
return value
}
},
data: [{
value: data1,
name: '本月采购订单数'
}]
},
{
name: '本月到货单数',
type: 'gauge',
color: ['#f00'],
min: 0,
max: max,
splitNumber: 5,
radius: '70%',
center: ['50%', '48%'],
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10,
color: [
[0.4, '#09d8f2'],
[1, '#00FFFFF']
]
},
backgroundColor: 'none'
},
tooltip: {
show: false
},
axisTick: { // 坐标轴小标记
length: 10, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 10, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: colorY
}
},
axisLabel: {
borderRadius: 1,
// color: 'rgba(255,255,255,0.7)',
color: '#00FFFF',
padding: 1,
fontSize: 18
},
title: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
fontSize: 22,
fontColor: '#FFF',
color: '#FFF',
fontFamily: 'Microsoft YaHei',
paddingTop: 20,
offsetCenter: [0, '120%']
// fontStyle: 'italic'
},
itemStyle: {
// color: '#1092ff'
color: '#09d8f2'
},
detail: {
shadowOffsetX: 0,
shadowOffsetY: 0,
// borderWidth: 1,
textBorderColor: '#000',
textBorderWidth: 1,
textShadowBlur: 1,
textShadowColor: colorY,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
paddingTop: 10,
fontFamily: 'digital',
fontSize: 20,
width: 30,
color: '#fff',
rich: {},
offsetCenter: [0, '90%'],
formatter: function(value) {
// console.info(value)
// return (value * 10 + '%')
return value
}
},
data: [{
value: data2,
name: '本月到货单数'
}]
},
{
name: '本月采购入库单数',
type: 'gauge',
color: ['#f00'],
min: 0,
max: max,
splitNumber: 5,
radius: '70%',
center: ['83%', '48%'],
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10,
color: [
[0.4, '#09d8f2'],
[1, '#00FFFFF']
]
},
backgroundColor: 'none'
},
tooltip: {
show: false
},
axisTick: { // 坐标轴小标记
length: 10, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 10, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: colorY
}
},
axisLabel: {
borderRadius: 1,
// color: 'rgba(255,255,255,0.7)',
color: '#00FFFF',
padding: 1,
fontSize: 18
},
title: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
fontSize: 22,
fontColor: '#FFF',
color: '#FFF',
fontFamily: 'Microsoft YaHei',
paddingTop: 20,
offsetCenter: [0, '120%']
// fontStyle: 'italic'
},
itemStyle: {
// color: '#1092ff'
color: '#09d8f2'
},
detail: {
shadowOffsetX: 0,
shadowOffsetY: 0,
// borderWidth: 1,
textBorderColor: '#000',
textBorderWidth: 1,
textShadowBlur: 1,
textShadowColor: colorY,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
paddingTop: 10,
fontFamily: 'digital',
fontSize: 20,
width: 30,
color: '#fff',
rich: {},
offsetCenter: [0, '90%'],
formatter: function(value) {
return value
}
},
data: [{
value: data3,
name: `本月采购入库单数`
}]
}
]
}
return option
}
export function all01(xData2, yData) {
// var xData2 = ['123', '21', '32', '23', '1233']
var data1 = yData.map(i => i.quantity)
var data2 = yData.map(i => i.plan_qty)
var barWidth = 30
const option = {
backgroundColor: 'transparent',
// tooltip: {
// trigger: 'item'
// },
grid: {
left: '2%',
top: '20%',
right: '2%',
bottom: '5%',
containLabel: true
},
title: {
text: '各车间当月订单数/入库数量',
left: '50%',
top: '0%',
textAlign: 'center',
textStyle: {
color: 'rgba(0,255,255,0.8)',
fontSize: '20',
fontWeight: 'bolder'
}
},
xAxis: {
data: xData2,
type: 'category',
boundaryGap: true,
axisLabel: {
interval: 0,
formatter: '{value}',
fontSize: 16,
margin: 20,
textStyle: {
color: colorX
}
},
axisLine: {
lineStyle: {
color: '#032c58'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: false
}
},
yAxis: {
boundaryGap: false,
// splitNumber: 4,
type: 'value',
// max: 100,
axisLabel: {
textStyle: {
fontSize: 16,
color: colorX
}
},
nameTextStyle: {
color: '#fff',
fontSize: 16,
lineHeight: 40
},
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: false
}
},
series: [
{ // 上半截柱子
name: '2019',
type: 'bar',
barWidth: barWidth,
barGap: '-100%',
z: 0,
itemStyle: {
color: '#163F7A',
opacity: 0.7
},
data: data2
},
{ // 下半截柱子
name: '2020',
type: 'bar',
barWidth: barWidth,
barGap: '-100%',
itemStyle: { // lenged文本
opacity: 0.7,
color: function(params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#12B9DB' // 0% 处的颜色
}, {
offset: 1,
color: '#6F8EF2' // 100% 处的颜色
}], false)
}
},
data: data1
},
{ // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
type: 'bar',
barWidth: barWidth,
barGap: '-100%',
stack: '广告',
itemStyle: {
color: 'transparent'
},
label: {
normal: {
show: true,
position: 'left',
fontSize: 16,
color: colorX,
zIndex: 10
}
},
data: data1
},
{ // 上半截柱子顶部圆片
'name': '',
'type': 'pictorialBar',
'symbolSize': [barWidth, 15],
'symbolOffset': [0, -10],
'z': 12,
'symbolPosition': 'end',
itemStyle: {
color: '#163F7A',
opacity: 1
},
label: {
show: true,
position: 'top',
fontSize: 16,
color: '#fff'
},
'data': data2
},
{ // 下半截柱子顶部圆片
'name': '',
'type': 'pictorialBar',
'symbolSize': [barWidth, 15],
'symbolOffset': [0, -10],
'z': 12,
itemStyle: {
opacity: 1,
color: function(params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#12B9DB' // 0% 处的颜色
}, {
offset: 1,
color: '#6F8EF2' // 100% 处的颜色
}], false)
}
},
// label: {
// show: true,
// position: 'top',
// fontSize: 16,
// color: '#fff'
// // formatter:(item)=>{
// // console.log(item)
// // return 'ssss'
// // }
// },
'symbolPosition': 'end',
'data': data1
},
{ // 下半截柱子底部圆片
'name': '',
'type': 'pictorialBar',
'symbolSize': [barWidth, 15],
'symbolOffset': [0, 5],
'z': 12,
itemStyle: {
opacity: 1,
color: function(params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#12B9DB' // 0% 处的颜色
}, {
offset: 1,
color: '#6F8EF2' // 100% 处的颜色
}], false)
}
},
'data': [1, 1, 1, 1, 1]
},
{
name: '第一圈',
type: 'pictorialBar',
symbolSize: [47, 16],
symbolOffset: [0, 11],
z: 11,
itemStyle: {
normal: {
color: 'transparent',
borderColor: '#00ffff',
borderWidth: 2
}
},
data: [1, 1, 1, 1, 1]
},
{
name: '第二圈',
type: 'pictorialBar',
symbolSize: [62, 22],
symbolOffset: [0, 17],
z: 10,
itemStyle: {
normal: {
color: 'transparent',
borderColor: '#00ffff',
borderWidth: 2
}
},
data: [1, 1, 1, 1, 1]
}
]
}
return option
}
export function all02(data, title) {
return {
backgroundColor: 'transparent',
// tooltip: {},
title: {
text: title,
left: '50%',
top: '0%',
textAlign: 'center',
textStyle: {
// color: '#fff',
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
}
},
grid: {
left: '4%',
right: '4%',
bottom: '4%',
top: '15%',
containLabel: true
},
// legend: {
// show: false,
// itemGap: 50,
// data: ['注册总量', '最新注册量'],
// textStyle: {
// color: '#f9f9f9',
// borderColor: '#fff'
// }
// },
xAxis: [{
type: 'category',
boundaryGap: true,
axisLabel: {
interval: 0,
formatter: '{value}',
fontSize: 16,
margin: 20,
textStyle: {
color: colorX
}
},
axisLine: {
lineStyle: {
color: '#032c58'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: false
},
data: data.map(i => i.Month)
}],
yAxis: [
{
// max: 800,
boundaryGap: false,
splitNumber: 4,
type: 'value',
axisLabel: {
textStyle: {
fontSize: 16,
color: colorX
}
},
// name: '单',
// nameTextStyle: {
// color: colorY,
// fontSize: 14,
// lineHeight: 20
// },
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: true
}
}
],
series: [
{
name: '注册总量',
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#28ffb3' // 线条颜色
},
borderColor: '#f0f'
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#28ffb3'
}
},
tooltip: {
show: false
},
areaStyle: { // 区域填充样式
normal: {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,154,120,1)'
},
{
offset: 1,
color: 'rgba(0,0,0, 0)'
}
], false),
shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
data: data.map(i => i.quantity)
},
{
name: '最新注册量',
type: 'line',
barWidth: 20,
tooltip: {
show: false
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
areaStyle: { // 区域填充样式
normal: {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,154,120,1)'
},
{
offset: 1,
color: 'rgba(0,0,0, 0)'
}
], false),
shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
// itemStyle: {
// normal: {
// // barBorderRadius: 5,
// // color: new echarts.graphic.LinearGradient(
// // 0, 0, 0, 1,
// // [{
// // offset: 0,
// // color: '#14c8d4'
// // },
// // {
// // offset: 1,
// // color: '#43eec6'
// // }
// // ]
// // )
// color: function(params) {
// var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1']
// return colorList[params.dataIndex]
// }
// }
// },
data: data.map(i => i.ouquantity)
}
]
}
}
export function cjzl03(xData, legendData, yData, show) { // 左侧
return {
backgroundColor: 'transparent',
// tooltip: {},
title: {
show: show,
text: '各车间不良趋势',
left: '50%',
top: '3%',
textAlign: 'center',
textStyle: {
// color: '#fff',
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
}
},
grid: {
left: '2%',
right: '2%',
bottom: '15%',
top: '20%',
containLabel: true
},
legend: {
data: legendData,
textStyle: { fontSize: 16, color: '#fff' },
itemWidth: 25,
itemHeight: 10,
itemGap: 15,
bottom: '5%',
selectedMode: false
},
xAxis: [{
type: 'category',
boundaryGap: true,
axisLabel: {
interval: 0,
formatter: '{value}',
fontSize: 16,
margin: 20,
textStyle: {
color: colorX
}
},
axisLine: {
lineStyle: {
color: '#032c58'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: false
},
data: xData
}],
yAxis: [
{
// max: 800,
boundaryGap: false,
splitNumber: 4,
type: 'value',
axisLabel: {
textStyle: {
fontSize: 18,
color: colorX
}
},
// name: '单',
// nameTextStyle: {
// color: colorY,
// fontSize: 14,
// lineHeight: 20
// },
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: true
}
}
],
series: [
{
name: legendData[0],
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#00ffff' // 线条颜色
},
borderColor: '#00ffff'
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#00ffff'
}
},
tooltip: {
show: false
},
// areaStyle: { // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(0,154,120,1)'
// },
// {
// offset: 1,
// color: 'rgba(0,0,0, 0)'
// }
// ], false),
// shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
data: yData[0]
},
{
name: legendData[1],
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#ff3000' // 线条颜色
},
borderColor: '#ff3000'
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#ff3000'
}
},
tooltip: {
show: false
},
// areaStyle: { // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(0,154,120,1)'
// },
// {
// offset: 1,
// color: 'rgba(0,0,0, 0)'
// }
// ], false),
// shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
data: yData[1]
},
{
name: legendData[2],
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#ffa800' // 线条颜色
},
borderColor: '#ffa800'
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#ffa800'
}
},
tooltip: {
show: false
},
// areaStyle: { // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(0,154,120,1)'
// },
// {
// offset: 1,
// color: 'rgba(0,0,0, 0)'
// }
// ], false),
// shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
data: yData[2]
},
{
name: legendData[3],
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#ffee00' // 线条颜色
},
borderColor: '#ffee00'
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#ffee00'
}
},
tooltip: {
show: false
},
// areaStyle: { // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(0,154,120,1)'
// },
// {
// offset: 1,
// color: 'rgba(0,0,0, 0)'
// }
// ], false),
// shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
data: yData[3]
},
{
name: legendData[4],
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#ff5b00' // 线条颜色
},
borderColor: '#ff5b00'
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#ff5b00'
}
},
tooltip: {
show: false
},
// areaStyle: { // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(0,154,120,1)'
// },
// {
// offset: 1,
// color: 'rgba(0,0,0, 0)'
// }
// ], false),
// shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
data: yData[4]
}
]
}
}
export function cjzl03_2(xData, legendData, yData, show) { // 左侧
return {
backgroundColor: 'transparent',
// tooltip: {},
// title: {
// show: show,
// text: '各车间不良趋势',
// left: '50%',
// top: '3%',
// textAlign: 'center',
// textStyle: {
// // color: '#fff',
// color: '#00ffff',
// fontSize: '20',
// fontWeight: 'bolder'
// }
// },
grid: {
left: '2%',
right: '2%',
bottom: '5%',
top: '20%',
containLabel: true
},
// legend: {
// data: legendData,
// textStyle: { fontSize: 16, color: '#fff' },
// itemWidth: 25,
// itemHeight: 10,
// itemGap: 15,
// bottom: '5%',
// selectedMode: false
// },
xAxis: [{
type: 'category',
boundaryGap: true,
axisLabel: {
interval: 0,
formatter: '{value}',
fontSize: 16,
margin: 20,
textStyle: {
color: colorX
}
},
axisLine: {
lineStyle: {
color: '#032c58'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: false
},
data: xData
}],
yAxis: [
{
// max: 800,
boundaryGap: false,
splitNumber: 4,
type: 'value',
axisLabel: {
textStyle: {
fontSize: 18,
color: colorX
}
},
// name: '单',
// nameTextStyle: {
// color: colorY,
// fontSize: 14,
// lineHeight: 20
// },
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: true
}
}
],
series: [
{
name: legendData[0],
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#00ffff' // 线条颜色
},
borderColor: '#00ffff'
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#00ffff'
}
},
tooltip: {
show: false
},
// areaStyle: { // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(0,154,120,1)'
// },
// {
// offset: 1,
// color: 'rgba(0,0,0, 0)'
// }
// ], false),
// shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
data: yData[0]
},
{
name: legendData[1],
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#ff3000' // 线条颜色
},
borderColor: '#ff3000'
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#ff3000'
}
},
tooltip: {
show: false
},
// areaStyle: { // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(0,154,120,1)'
// },
// {
// offset: 1,
// color: 'rgba(0,0,0, 0)'
// }
// ], false),
// shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
data: yData[1]
},
{
name: legendData[2],
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#ffa800' // 线条颜色
},
borderColor: '#ffa800'
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#ffa800'
}
},
tooltip: {
show: false
},
// areaStyle: { // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(0,154,120,1)'
// },
// {
// offset: 1,
// color: 'rgba(0,0,0, 0)'
// }
// ], false),
// shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
data: yData[2]
},
{
name: legendData[3],
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#ffee00' // 线条颜色
},
borderColor: '#ffee00'
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#ffee00'
}
},
tooltip: {
show: false
},
// areaStyle: { // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(0,154,120,1)'
// },
// {
// offset: 1,
// color: 'rgba(0,0,0, 0)'
// }
// ], false),
// shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
data: yData[3]
},
{
name: legendData[4],
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#ff5b00' // 线条颜色
},
borderColor: '#ff5b00'
},
label: {
show: true,
position: 'top',
textStyle: {
fontSize: 16,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#ff5b00'
}
},
tooltip: {
show: false
},
// areaStyle: { // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(0,154,120,1)'
// },
// {
// offset: 1,
// color: 'rgba(0,0,0, 0)'
// }
// ], false),
// shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
data: yData[4]
}
]
}
}
export function cjzl04(xData, yData) {
const option = {
backgroundColor: 'transparent',
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
// },
grid: {
left: '2%',
right: '2%',
bottom: '5%',
top: '20%',
containLabel: true
},
xAxis: [{
type: 'category',
data: xData,
boundaryGap: true,
axisLabel: {
interval: 0,
formatter: '{value}',
fontSize: 16,
margin: 20,
textStyle: {
color: colorX
}
},
axisLine: {
lineStyle: {
color: '#032c58'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: false
}
}],
yAxis: [
{
// max: 800,
boundaryGap: false,
splitNumber: 4,
type: 'value',
axisLabel: {
textStyle: {
fontSize: 18,
color: colorX
}
},
// name: '单',
// nameTextStyle: {
// color: colorY,
// fontSize: 14,
// lineHeight: 20
// },
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: true
}
}
],
series: [
{
type: 'bar',
data: yData,
barWidth: '20px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,244,255,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(0,77,167,1)' // 100% 处的颜色
}], false),
barBorderRadius: [30, 30, 30, 30],
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4
}
},
label: {
normal: {
show: true,
lineHeight: 30,
width: 80,
height: 30,
backgroundColor: 'rgba(0,160,221,0.1)',
borderRadius: 200,
position: ['-8', '-60'],
distance: 1,
formatter: [
' {d|●}',
' {a|{c}} \n',
' {b|}'
].join(','),
rich: {
d: {
color: '#3CDDCF'
},
a: {
fontSize: 16,
color: '#3CDDCF',
align: 'center'
},
b: {
width: 1,
height: 30,
borderWidth: 1,
borderColor: '#3CDDCF',
align: 'left'
}
}
}
}
}
]
}
return option
}
export function all03(ydata, data) {
const option = {
backgroundColor: 'transparent',
// tooltip: {
// formatter: '{b} ({c})'
// },
title: {
text: '各车间当月完工数量',
left: '50%',
top: '0%',
textAlign: 'center',
textStyle: {
// color: '#fff',
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
}
},
grid: {
left: '8%',
right: '8%',
bottom: '10%',
top: '15%',
containLabel: true
},
xAxis: [{
// gridIndex: 0,
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisLine: {
show: false
}
}],
yAxis: [{
gridIndex: 0,
interval: 0,
// data: yAxisData.reverse(),
data: ydata.reverse(),
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
fontSize: 18,
color: colorX
}
},
splitLine: {
show: false
},
axisLine: {
show: false
}
}],
series: [
{
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: '45%',
itemStyle: {
normal: {
barBorderRadius: 15,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(0,255,205,.6)'
}, {
offset: 0.8,
color: 'rgba(41,134,207,1)'
}], false)
}
},
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: colorX
},
fontSize: 18
}
},
data: data.map(i => i.quantity).reverse()
}
]
}
return option
}
export function bar3(data) {
const option = {
backgroundColor: 'transparent',
grid: {
left: '1%',
right: '4%',
bottom: '6%',
top: '20%',
containLabel: true
},
legend: { // 图例组件，颜色和名字
left: 'center',
top: 10,
itemGap: 16,
itemWidth: 18,
itemHeight: 10,
data: [{
name: '任务数'
},
{
name: '完工数'
}],
textStyle: {
color: colorX,
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 16
}
},
xAxis: [
{
type: 'category',
// data: data.map(i => i.step_code),
data: data.map(i => i.stepname),
boundaryGap: true,
axisLabel: {
interval: 0,
formatter: '{value}',
fontSize: 16,
margin: 20,
textStyle: {
color: colorX
}
},
axisLine: {
lineStyle: {
color: '#032c58'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: false
}
}
],
yAxis: [
{
// max: Math.max(...data.map(i => i.plan_qty)) * 1.2,
boundaryGap: false,
splitNumber: 4,
type: 'value',
axisLabel: {
textStyle: {
fontSize: 18,
color: colorX
}
},
// name: '单',
// nameTextStyle: {
// color: colorY,
// fontSize: 14,
// lineHeight: 20
// },
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: true
}
}
],
series: [
{
name: '任务数',
type: 'bar',
data: data.map(i => i.plan_qty),
barWidth: 20,
barGap: 0, // 柱间距离
label: { // 图形上的文本标签
normal: {
show: true,
position: 'top',
textStyle: {
color: colorX,
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 16
}
}
},
itemStyle: { // 图形样式
normal: {
barBorderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1, color: 'rgba(127, 128, 225, 0.7)'
}, {
offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
}, {
offset: 0.31, color: 'rgba(0, 208, 208, 0.7)'
}, {
offset: 0.15, color: 'rgba(0, 208, 208, 0.7)'
}, {
offset: 0, color: 'rgba(104, 253, 255, 0.7)'
}], false)
}
}
},
{
name: '完工数',
type: 'bar',
data: data.map(i => i.good_qty),
barWidth: 20,
barGap: 1, // 柱间距离
label: { // 图形上的文本标签
normal: {
show: true,
position: 'top',
textStyle: {
color: colorX,
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 16
}
}
},
itemStyle: { // 图形样式
normal: {
barBorderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1, color: 'rgba(127, 128, 225, 0.7)'
}, {
offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
}, {
offset: 0.25, color: 'rgba(226, 99, 74, 0.7)'
}, {
offset: 0, color: 'rgba(253, 200, 106, 0.7)'
}], false)
}
}
}
]
}
return option
}