kanban-vue/src/components/smtechart/bottom/bottom1Chart/chart.vue

<template>
    <div>
        <Echart
                :options="options"
                id="bottom1Chart"
                height="195px"
                width="1100px"
        ></Echart>
    </div>
</template>

<script>
    import Echart from '@/common/echart'
    export default {
        data() {
            return {
                options: {},
                // 定义颜色
                colorList: {
                    linearYtoG: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#f5b44d'
                            },
                            {
                                offset: 1,
                                color: '#28f8de'
                            }
                        ]
                    },
                    linearGtoB: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#43dfa2'
                            },
                            {
                                offset: 1,
                                color: '#28f8de'
                            }
                        ]
                    },
                    linearBtoG: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#1c98e8'
                            },
                            {
                                offset: 1,
                                color: '#28f8de'
                            }
                        ]
                    },
                    areaBtoG: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(35,184,210,.2)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(35,184,210,0)'
                            }
                        ]
                    }
                }
            }
        },
        components: {
            Echart
        },
        props: {
            cdata: {
                type: Object,
                default: () => ({})
            }
        },
        watch: {
            cdata: {
                handler(newData) {
                    this.options = {
                   /*     title: {
                            text: '',
                            textStyle: {
                                color: '#D3D6DD',
                                fontSize: 24,
                                fontWeight: 'normal'
                            },
                            subtext: '上周：'+newData.lastw + '，历史：' + newData.hisd,
                            // subtext: newData.year + '/' + newData.nowdate,
                            subtextStyle: {
                                color: '#fff',
                                fontSize: 13
                            },
                            top: 90,
                            left: 60
                        },
                        legend: {
                            top: 10,
                            left: 60,
                            orient: 'vertical',
                            itemGap: 15,
                            itemWidth: 12,
                            itemHeight: 12,
                            data: ['本周','上周','历史'],
                            textStyle: {
                                color: '#fff',
                                fontSize: 13
                            }
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        radar: {
                            center: ['68%', '27%'],
                            radius: '30%',
                            name: {
                                color: '#fff'
                            },
                            splitNumber: 8,
                            axisLine: {
                                lineStyle: {
                                    color: this.colorList.linearYtoG,
                                    opacity: 0.6
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: this.colorList.linearYtoG,
                                    opacity: 0.6
                                }
                            },
                            splitArea: {
                                areaStyle: {
                                    color: '#fff',
                                    opacity: 0.1,
                                    shadowBlur: 25,
                                    shadowColor: '#000',
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 5
                                }
                            },
                            indicator: [
                                {
                                    name: '来料不良',
                                    max: 85
                                },
                                {
                                    name: '制程不良',
                                    max: 85
                                },
                                {
                                    name: '设计不良',
                                    max: 85
                                },
                                {
                                    name: '其他',
                                    max: 85
                                }
                            ],
                            axisName: {
                                fontSize: 5
                            },
                            nameGap: 8
                        },*/
                        grid: {
                           /* left: 50,
                            right: 80,
                            bottom: 30,
                            top: '60%'*/
                            left: '5%',
                            right: '4%',
                            bottom: 25,
                        },
                        xAxis: {
                            type: 'category',
                            position: 'bottom',
                            axisLine: true,
                            axisLabel: {
                                color: 'rgba(255,255,255,.8)',
                                fontSize: 12
                            },
                            data: newData.weekCategory
                        },
                        // 下方Y轴
                        yAxis: {
                            name: '',
                            nameLocation: 'end',
                            nameGap: 24,
                            nameTextStyle: {
                                color: 'rgba(255,255,255,.5)',
                                fontSize: 14
                            },
                            max:newData.maxData,
                            splitNumber: 4,
                            min:newData.minData,
                            axisLine: {
                                lineStyle: {
                                    opacity: 0
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#fff',
                                    opacity: 0.1
                                }
                            },
                            axisLabel: {
                                color: 'rgba(255,255,255,.8)',
                                fontSize: 12
                            }
                        },
                        series: [
                           /* {
                                name: '',
                                type: 'radar',
                                symbolSize: 0,
                                data: [
                                    {
                                        value: newData.radarDataAvg,
                                        name: '本周',
                                        itemStyle: {
                                            normal: {
                                                color: '#f8d351'
                                            }
                                        },
                                        lineStyle: {
                                            normal: {
                                                opacity: 0
                                            }
                                        },
                                        areaStyle: {
                                            normal: {
                                                color: '#f8d351',
                                                shadowBlur: 25,
                                                shadowColor: 'rgba(248,211,81,.3)',
                                                shadowOffsetX: 0,
                                                shadowOffsetY: -10,
                                                opacity: 1
                                            }
                                        }
                                    },
                                    {
                                        value: newData.radarData,
                                        name: '上周',
                                        itemStyle: {
                                            normal: {
                                                color: '#43dfa2'
                                            }
                                        },
                                        lineStyle: {
                                            normal: {
                                                opacity: 0
                                            }
                                        },
                                        areaStyle: {
                                            normal: {
                                                color: this.colorList.linearGtoB,
                                                shadowBlur: 15,
                                                shadowColor: 'rgba(0,0,0,.2)',
                                                shadowOffsetX: 0,
                                                shadowOffsetY: 5,
                                                opacity: 0.8
                                            }
                                        }
                                    }
                                    , {
                                        value: newData.radarHisData,
                                        name: '历史',
                                        itemStyle: {
                                            normal: {
                                                color: '#137af4'
                                            }
                                        },
                                        lineStyle: {
                                            normal: {
                                                opacity: 0
                                            }
                                        },
                                        areaStyle: {
                                            normal: {
                                                color: '#137af4',
                                                shadowBlur: 25,
                                                shadowColor: 'rgba(159,229,245,0.3)',
                                                shadowOffsetX: 0,
                                                shadowOffsetY: -10,
                                                opacity: 1
                                            }
                                        }
                                    }
                                ]
                            },*/
                            {
                                name: '',
                                type: 'line',
                                smooth: true,
                                symbol: 'emptyCircle',
                                symbolSize: 8,
                                itemStyle: {
                                    normal: {
                                        color: '#fff'
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        color: this.colorList.linearBtoG,
                                        width: 3
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: this.colorList.areaBtoG
                                    }
                                },
                                data: newData.weekLineData,
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                lineSmooth: true,
                                markLine: {
                                    silent: true,
                                    data: [
                                        {
                                            type: 'average',
                                            name: '平均值'
                                        }
                                    ],
                                    precision: 0,
                                    label: {
                                        normal: {
                                            formatter: '平均值: \n {c}'
                                        }
                                    },
                                    lineStyle: {
                                        normal: {
                                            color: 'rgba(248,211,81,.7)'
                                        }
                                    }
                                },
                                tooltip: {
                                    position: 'top',
                                    formatter: '{c} %',
                                    backgroundColor: 'rgba(28,152,232,.2)',
                                    padding: 6
                                }
                            },
                            {
                                name: '占位背景',
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        show: true,
                                        color: '#000',
                                        opacity: 0
                                    }
                                },
                                silent: true,
                                barWidth: '50%',
                                data: newData.weekMaxData,
                                animation: false
                            }
                        ]
                    }
                },
                immediate: true,
                deep: true
            }
        }
    }
</script>