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
}
// 系统首页图
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: '2%',
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: true,
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: 1,
min: 0,
interval: 0.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(val) {
// console.log(val)
// const data = [70, 60, 50, 40, 30]
// const titlename = ['外观划伤', '表面油污', '尺寸', '颜色', '大小']
const data = val.map(i => i.cont)
const titlename = val.map(i => i.name)
const valdata = [683, 500, 400, 300, 200]
const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
const option = {
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: '2%',
right: '2%',
bottom: '0%',
top: '10%',
containLabel: true
},
xAxis: {
show: false
},
yAxis: [
{
show: true,
data: titlename,
inverse: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#d8d7d9',
fontSize: 14,
formatter: function(value, index) {
return [
'{lg|' + (index + 1) + '、 }' + '{title|' + value + '} '
].join('\n')
},
rich: {
lg: {
// backgroundColor: '#339911',
color: '#d8d7d9',
borderRadius: 15,
// padding: 5,
align: 'center',
width: 15,
height: 15
}
}
}
},
{
show: false,
inverse: true,
data: valdata,
axisLabel: {
textStyle: {
fontSize: 12,
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: {
show: true,
position: 'right',
formatter: '{c}',
fontSize: 14,
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: '70%',
y: '2%',
textStyle: {
color: '#fff',
fontSize: '22'
},
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
}