| | |
| | | var option = { |
| | | backgroundColor: 'transparent', |
| | | grid: { |
| | | left: '2%', |
| | | 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 |
| | | } |
| | | }, |
| | | // tooltip: { |
| | | // trigger: 'axis', |
| | | // axisPointer: { |
| | | // type: 'none' |
| | | // }, |
| | | // formatter: function(params) { |
| | | // return params[0].name + ' : ' + params[0].value |
| | | // } |
| | | // }, |
| | | xAxis: { |
| | | show: true, |
| | | type: 'value', |
| | |
| | | type: 'category', |
| | | inverse: true, |
| | | axisLabel: { |
| | | show: true, |
| | | show: false, |
| | | textStyle: { |
| | | color: '#000' |
| | | } |
| | |
| | | |
| | | const option = { |
| | | backgroundColor: 'transparent', |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | // type: 'shadow', |
| | | label: { |
| | | show: true, |
| | | backgroundColor: '#000' |
| | | } |
| | | } |
| | | }, |
| | | // tooltip: { |
| | | // trigger: 'axis', |
| | | // axisPointer: { |
| | | // // type: 'shadow', |
| | | // label: { |
| | | // show: true, |
| | | // backgroundColor: '#000' |
| | | // } |
| | | // } |
| | | // }, |
| | | grid: { |
| | | left: '2%', |
| | | right: '5%', |
| | |
| | | } |
| | | } |
| | | }, |
| | | series: [{ |
| | | series: [ |
| | | { |
| | | name: '时间', |
| | | type: 'line', |
| | | smooth: false, |
| | |
| | | } |
| | | }, |
| | | data: dataY |
| | | }] |
| | | } |
| | | ] |
| | | } |
| | | |
| | | return option |
| | |
| | | } |
| | | 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) { |
| | | return { |
| | | backgroundColor: 'transparent', |
| | | // tooltip: {}, |
| | | title: { |
| | | text: '每月订单数量/出库数量', |
| | | 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 |
| | | } |