软件工程日报--echart图表进阶

echart图表进阶

在简单使用e-charts的基础上深度学习echarts 画出更加优美的图像

通过echarts绘制折线图玫瑰图

通过echats的折线图扇形图等等展示详细信息

  const echarts = window.echarts;
                const dom = document.getElementById('container01');
                if (!dom) return;

                const myChart = echarts.init(dom, null, {
                    renderer: 'canvas',
                    useDirtyRect: false
                });

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    title: {text: '工单统计'},

                    legend: {data: ['保养单', '备件单', '巡检单', '检测单', '维修单']},
                    grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
                    xAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        boundaryGap: false
                    },
                    yAxis: {type: 'value'},
                    series: [{
                        name: '维修单',
                        type: 'line',
                        stack: 'Total',

                        //   smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        label: {
                            show: true,
                            position: 'top'
                        },
                        data: [10, 14, 12, 10, 7, 12, 13]
                    },
                        {
                            //      smooth: true,
                            name: '保养单',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            label: {
                                show: true,
                                position: 'top'
                            },
                            data: [9, 12, 14, 16, 16, 14, 12]

                        },
                        {
                            //      smooth: true,
                            name: '备件单',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            label: {
                                show: true,
                                position: 'top'
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [12, 12, 13, 14, 18, 12, 9],

                        },
                        {
                            //    smooth: true,
                            name: '巡检单',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            label: {
                                show: true,
                                position: 'top'
                            },
                            data: [12, 17, 11, 13, 17, 13, 12]
                        },
                        {
                            //    smooth: true,
                            name: '检测单',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            label: {
                                show: true,
                                position: 'top'
                            },
                            data: [12, 12, 17, 14, 18, 20, 16]
                        }
                    ]
                };


                myChart.setOption(option);
                window.addEventListener('resize', myChart.resize);

                const dom02 = document.getElementById('container02');
                if (!dom02) return;

                const myChart02 = echarts.init(dom02, null, {
                    renderer: 'canvas',
                    useDirtyRect: false
                });

                const option02 = {
                    title: {
                        text: '占比分析',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '80%',
                        left: 'center'
                    },
                    series: [
                        {
                            center: ['50%', '45%'],
                            name: '详细信息',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            padAngle: 5,
                            itemStyle: {
                                borderRadius: 10
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 30, name: '超时完成'},
                                {value: 120, name: '按时完成'},
                                {value: 50, name: '待完成'},
                                {value: 30, name: '超时未完成'},

                            ]
                        }
                    ]
                };

                if (option02 && typeof option02 === 'object') {
                    myChart02.setOption(option02);
                }

                window.addEventListener('resize', myChart.resize);

                let index = 0;
                let currentSeries = 0;
                let mTime = null;
                let isHovering = false;

// 封装定时器创建
                function createTimer() {
                    return setInterval(() => {
                        myChart.dispatchAction({
                            type: 'showTip',
                            seriesIndex: currentSeries,
                            dataIndex: index
                        });

                        // 更新索引（先index后series）
                        index = (index + 1) % 7;
                        if(index === 0) {
                            currentSeries = (currentSeries + 1) % 5;
                        }
                    }, 1500);
                }

加入表的自动播放

图加入响应式的效果，实现图的自动轮播

// 初始化首次提示
                myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: 0
                });

// 启动初始定时器
                mTime = createTimer();

// 优化鼠标事件
                myChart.getZr().on('mousemove', () => {
                    if(!isHovering) {
                        isHovering = true;
                        clearInterval(mTime);
                    }
                });

                myChart.getZr().on('mouseout', () => {
                    isHovering = false;
                    setTimeout(() => {
                        if(!isHovering && !mTime) {
                            mTime = createTimer();
                        }
                    }, 300);
                });

// 窗口失焦处理
                window.addEventListener('blur', () => clearInterval(mTime));
                window.addEventListener('focus', () => {
                    if(!mTime) mTime = createTimer();
                });
                axios.post("http://localhost:7469/MaintenanceManage/stop/selectAll",).then((res) => {

                    this.stationList = res.data;

                })

                axios.post("http://localhost:7469/MaintenanceManage/repairOrder/selectAll",).then((res) => {

                    this.tableData = res.data;

                })