| | |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '10%', |
| | | right: '5%', |
| | | left: '5%', |
| | | right: '10%', |
| | | bottom: '0%', |
| | | top: '10%', |
| | | containLabel: true |
| | |
| | | color: 'rgba(41, 162, 245, 1)', |
| | | barBorderRadius: 10 |
| | | } |
| | | // color: '#A71A2B', |
| | | // barBorderRadius: 4, |
| | | // color: '#A71A2B', |
| | | // barBorderRadius: 4, |
| | | } |
| | | // label: { |
| | | // normal: { |
| | | // color: '#fff', |
| | | // show: true, |
| | | // position: ["-80px", 0], |
| | | // textStyle: { |
| | | // fontSize: 16 |
| | | // }, |
| | | // formatter: function(a, b) { |
| | | // return a.name |
| | | // } |
| | | // } |
| | | // } |
| | | // label: { |
| | | // normal: { |
| | | // color: '#fff', |
| | | // show: true, |
| | | // position: ["-80px", 0], |
| | | // textStyle: { |
| | | // fontSize: 16 |
| | | // }, |
| | | // formatter: function(a, b) { |
| | | // return a.name |
| | | // } |
| | | // } |
| | | // } |
| | | }] |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | } |
| | | // { |
| | | // text: '单位:个', |
| | | // top: 20, |
| | | // left: 20, |
| | | // textStyle: { |
| | | // fontSize: 14, |
| | | // color: '#666666', |
| | | // fontWeight: 400 |
| | | // } |
| | | // } |
| | | // { |
| | | // text: '单位:个', |
| | | // top: 20, |
| | | // left: 20, |
| | | // textStyle: { |
| | | // fontSize: 14, |
| | | // color: '#666666', |
| | | // fontWeight: 400 |
| | | // } |
| | | // } |
| | | ], |
| | | // legend: { |
| | | // orient: 'vertical', |
| | |
| | | formatter: params => { |
| | | return ( |
| | | '{icon|●}{name|' + params.name + '}{value|' + |
| | | formatNumber(params.value) + '}' |
| | | formatNumber(params.value) + '}' |
| | | ) |
| | | }, |
| | | padding: [0, -50, 25, -50], |
| | |
| | | |
| | | 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} <br/>{c} {b}' |
| | | }, |
| | | series: [ |
| | | { |
| | | 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 |
| | | } |