| | |
| | | return option |
| | | } |
| | | |
| | | export function all02(data) { |
| | | export function all02(data, title) { |
| | | return { |
| | | backgroundColor: 'transparent', |
| | | // tooltip: {}, |
| | | title: { |
| | | text: '每月订单数量/出库数量', |
| | | text: title, |
| | | left: '50%', |
| | | top: '0%', |
| | | textAlign: 'center', |
| | |
| | | } |
| | | 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 |
| | | } |