echarts 实战应用

// 使用echarts
import * as echarts from 'echarts'
// 设备信息数据
const   EquipmentDatas = EquipmentInformationDatas => {
    return  {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '30%'],
            axisTick: {
                alignWithLabel: true
            }
        },
        // visualMap: {
        //     type: 'piecewise',
        //     show: false,
        //     dimension: 0,
        //     seriesIndex: 0,
        //     pieces: [
        //         {
        //             gt: 1,
        //             lt: 3,
        //             color: 'rgba(0, 0, 180, 0.4)'
        //         },
        //         {
        //             gt: 5,
        //             lt: 7,
        //             color: 'rgba(0, 0, 180, 0.4)'
        //         }
        //     ]
        // },
        // dataZoom: [
        //     {
        //         type: 'inside',
        //         start: 0,
        //         end: 2
        //     },
        //     {
        //         start: 0,
        //         end: 2
        //     }
        // ],
        series: [
            {
                name: '消息量',
                type: 'line',
                smooth: 0,
                symbol: 'none',
                symbolSize: 1,
                lineStyle: {
                    color: '#1890ff'
                },
                // markLine: {
                //     symbol: ['none', 'none'],
                //     label: { show: false },
                //     data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
                // },
                areaStyle: {
                    color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#1890ff'
                        },
                        {
                            offset: 1,
                            color: '#1890ff'
                        }
                    ])
                },
                data: EquipmentInformationDatas
            }
        ]
    }
}

// 当前在线
const   deviceOnline = datas => {
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
                axis: 'x',
                label: {
                    show: false,
                    fontStyle: 'lighter',
                    fontSize: 12
                }
            }
        },
        // grid: {
        //     left: '0%',
        //     right: '4%',
        //     bottom: '3%',
        //     top: '2%',
        //     containLabel: true
        // },
        xAxis: [
            {
                type: 'time',
                show: false

            }
        ],
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            show: false

        },
        // series: [
        //     {
        //         name: 'Direct',
        //         type: 'bar',
        //         barWidth: '60%',
        //         data: datas
        //     }
        // ],
        series: [
            {
                name: '消息量',
                type: 'bar',
                smooth: 0,
                symbol: 'none',
                symbolSize: 1,
                // showBackground: true,
                itemStyle: {
                    color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0, color: '#188df0' },
                        { offset: 0, color: '#188df0' }
                    ]),
                    shadowColor: false

                },
                data: datas
            }
        ]
    }
}

// 设备消息量
const   deviceInfoNum =  datas => {
    console.log(datas, '数据')
    return  {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
                axis: 'x',
                snap: true,
                // z: 0,
                triggerTooltip: true,
                label: {
                    show: false,
                    fontStyle: 'lighter',
                    fontSize: 18
                }

            }
        },
        xAxis: [
            {
                type: 'time',
                show: false

            }
        ],
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            show: false

        },

        series: [
            {
                name: '消息量',
                data: datas,
                type: 'line',
                areaStyle: {},
                pointer: {
                    icon: 'circle'
                },

                symbol: 'circle',
                // cursor: 'pointer',

                showSymbol: false,

                lineStyle: {
                    color: '#fff'
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#975FE4' },
                        { offset: 0, color: '#A776E8' },
                        { offset: 0, color: '#8150C6' }
                    ]),
                    shadowColor: false

                }
            }
        ]
    }
}
// cpu图形数据
const  cpuDatas = datas => {
    console.log(datas)
    return   {
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },

        series: [
            {

                radius: '78%',  // 仪表盘的半径
                name: '使用率',
                type: 'gauge',
                max: 10,
                splitNumber: 10, // 分割段数，默认为5
                splitLine: {
                    show: false, // 是否显示分割线
                    distance: 10
                },
                axisTick: {
                    show: true, // 是否显示刻度。
                    splitNumber: 1,
                    distance: -12,
                    lineStyle: {
                        color: '#63677A'
                    }
                },
                axisLabel: {
                    distance: 2
                },
                detail: {
                    formatter: '{value}%',
                    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: 16
                    }
                },
                progress: {
                    show: true,
                    clip: true,
                    itemStyle: {
                        color: '#46DE71',
                        shadowColor: true

                    }
                },
                pointer: {
                    icon: 'roundRect',
                    width: 6,
                    itemStyle: {
                        color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#1890FF' },
                            { offset: 0, color: '#1890FF' },
                            { offset: 0, color: '#1890FF' }
                        ]),
                        shadowColor: false

                    }
                },
                data: [
                    {
                        value: 2
                        // name: 'SCORE'
                    }
                ]
            }
        ]
    }

}

// jvm图形数据
const  jvmDatas = val => {
    console.log(val)
    return   {
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },

        series: [
            {

                radius: '78%',  // 仪表盘的半径
                name: '使用率',
                type: 'gauge',
                max: 10,
                splitNumber: 10, // 分割段数，默认为5
                splitLine: {
                    show: false, // 是否显示分割线
                    distance: 10
                },
                axisTick: {
                    show: true, // 是否显示刻度。
                    splitNumber: 1,
                    distance: -12,
                    lineStyle: {
                        color: '#63677A'
                    }
                },
                axisLabel: {
                    distance: 2
                },
                detail: {
                    formatter: '{value}%',
                    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: 16
                    }
                },

                progress: {
                    show: true,
                    clip: true,
                    itemStyle: {
                        color: '#1890FF',
                        shadowColor: true

                    }
                },
                pointer: {
                    // icon: 'roundRect',
                    width: 6,
                    itemStyle: {
                        color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#2F9CFF' },
                            { offset: 0, color: '#2F9CFF' },
                            { offset: 0, color: '#2F9CFF' }
                        ]),
                        shadowColor: false

                    }
                },
                data: [
                    {
                        value: 2,
                        // name: 'SCORE',

                        detail: {
                            show: true,
                            color: '#654332'
                        },
                        itemStyle: {
                            color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0, color: '#83bff6' },
                                { offset: 0, color: '#83bff6' }
                            ]),
                            shadowColor: false

                        }
                    }
                ]
            }
        ]
    }

}

// 暴露出去
export  default {
    EquipmentDatas,
    deviceOnline,
    deviceInfoNum,
    cpuDatas,
    jvmDatas

}

效果图：