Echarts中柱状图+切换视图+数据视图

1,567 阅读1分钟

initAchievementChart () {
            let dom = this.$refs.achievementChart
            let myChart = this.$echarts.init(dom)
            myChart.setOption({
                title: { text: '得分情况统计' },
                tooltip: { trigger: 'axis' },
                toolbox: {
                    show: true,
                    feature: {
                        //控制是否出现数据视图
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            //控制是否出现切换折线图和柱状图
                            type: ['line', 'bar']
                        },
                        //还原按钮配置项
                        restore: { show: true },
                        //保存为图片配置项
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    { type: 'category' }
                ],
                yAxis: [
                    { type: 'value' }
                ],
                // 用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响
                dataZoom: [
                    {
                        type: 'slider', // 滑动条型数据区域缩放组件(dataZoomSlider)
                        start: 0,
                        end: 30
                    }
                ],
                series: [
                    {
                        name: '成绩',
                        type: 'bar',
                        data: studentScore,
                        markPoint: {
                            data: [                                
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                        //平均线
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }
                ]
            })
        },

数据结构懒的放了.