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

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

qq_44889444

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

阅读量105

点赞数

文章标签： vue

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

版权

本文介绍如何利用Echarts在HTML页面中创建一个单产预测的柱状图，展示今年和明年的单产对比，并通过JavaScript进行动态数据更新。首先在HTML中添加图表容器，然后初始化Echarts实例，配置包括x轴、y轴、图例、提示框等选项。接着，通过JS动态操作数据，清除原有数据并填充新的城市及单产预测值，最后更新图表以展示新数据。

摘要由CSDN通过智能技术生成

一、echarts构造单产预测图

1）在HTML中添加dom
2）

mounted () {
            // 3. 基于准备好的dom，初始化echarts实例
            var myChart1 = echarts.init(document.getElementById('main1'),'light')
            var option1 = {    //1
                grid:{
                    //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
                    left:"20%",
                    right:"20%",
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['今年单产', '明年单产'],

                },
                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: '今年单产',
                        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 xAxis = option.xAxis[0].data;
                            console.log(xAxis)
                            while(xAxis.length >0){
                                xAxis.pop();}
                            var city = res.data.citylist
                            for(let i=0;i<city.length;i++){
                                xAxis.push(city[i])
                            }
                            let series1 = option.series[0].data;
                            let series2 = option.series[1].data;
                            var data = [
                                [3.0, 4.9, 7.0],
                                [3.0, 9.9, 7.0]
                            ]
                            data[0] = res.data.datalistone
                            data[1] = res.data.datalisttwo
                            while(series1.length >0){
                                series1.pop();}
                            while(series2.length >0){
                                series2.pop();}
                            for(let i=0;i<city.length;i++){
                                series1.push(data[0][i])
                                series2.push(data[1][i])
                            }

                            console.log(option)
                            myChart1.clear()
                            myChart1.setOption(option)