山东大学软件学院2018级暑期项目实训第四周第3次

最新推荐文章于 2024-04-30 13:01:01 发布

qq_44889444

最新推荐文章于 2024-04-30 13:01:01 发布

阅读量120

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_44889444/article/details/119184850

版权

一、利用echarts绘制价格预测图

1）在HTML添加dom
2)

mounted () {
            // 3. 基于准备好的dom，初始化echarts实例
            var myChart1 = echarts.init(document.getElementById('main1'),'light')
            var option1 = {    //1
                // title: {
                //     text: '某地区蒸发量和降水量',
                //     subtext: '纯属虚构'
                // },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['蒸发量', '降水量','1','2'],   //变

                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: true},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie', 'funnel']},
                        restore: {show: true},
                        saveAsImage: {show: true},
                        dataZoom:{show:true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['今日售价', '预测第1天', '预测第2天', '预测第3天', '预测第4天', '预测第5天']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [  //变
                    {
                        name: '1',    变
                        type: 'bar',
                        data: [3.0, 4.9, 7.0, 23.2, 25.6, 76.7],  //变
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            }
            // 5. 展示数据
            myChart1.setOption(option1)

3)利用JS对其进行操作

const myChart1 = this.$echarts.init(document.getElementById('main1'));
                            let option = myChart1.getOption();
                            let legend = option.legend[0].data;
                            // console.log(legend)
                            while(legend.length >0){
                                legend.pop();}
                            var market = res.data.marketlist
                            for(let i=0;i<market.length;i++){
                                legend.push(market[i])
                            }
                            let series = option.series;
                            while(series.length >0){
                                series.pop();}
                            var data = res.data.datalist

                            for(let i=0;i<market.length;i++){
                                series.push(
                                    {
                                        name: market[i],    //
                                        type: 'bar',
                                        data: data[i],
                                        markPoint: {
                                            data: [
                                                {type: 'max', name: '最大值'},
                                                {type: 'min', name: '最小值'}
                                            ]
                                        },
                                        markLine: {
                                            data: [
                                                {type: 'average', name: '平均值'}
                                            ]
                                        }
                                    }
                                )
                            }
                            // console.log(option)
                            myChart1.clear()
                            myChart1.setOption(option)