echarts 在vue中的用法

最新推荐文章于 2024-06-04 23:08:49 发布
最新推荐文章于 2024-06-04 23:08:49 发布
阅读量65 收藏
点赞数
分类专栏： vue 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feishataojin/article/details/120411817
版权 
<template> 
    <div class="box">
        <div class="box_head"> 
           预约系统数据统计图 
              <el-button type="primary" @click="switchover" style="position: absolute;right: 23px;top: 53px;">切换</el-button>
       </div>   
        <div class="box_center">
            <div class="box_center_1">
                <div class="box_left_1">
                   <div class="timehead">
                       <span class="box_left_1_title">预约总量（按月份显示）</span>     
                        <el-date-picker
                                class="timeData"
                                v-model="value4"
                                type="month"
                                placeholder="选择月">
                        </el-date-picker>
                   </div>
                   <div style="margin-top: 41px;">
                       <div  class='box_left_box_num'>
                           <div class='box_left_1_num'>
                               <span>百万</span>
                               <div>
                                    0
                               </div>
                           </div>
                           <div class='box_left_1_num1'>
                               <span>,</span>
                           </div>
                           <div class='box_left_1_num'>
                                <span>十万</span>
                                <div>
                                    0   
                               </div>
                           </div>
                           <div class='box_left_1_num'>
                                <span>万</span>
                                 <div>
                                     0 
                               </div>
                           </div>
                           <div class='box_left_1_num'>
                                <span>千</span>
                                <div>
                                     0   
                               </div>
                           </div>
                           <div class='box_left_1_num1'>
                                <span>,</span>
                           </div>
                           <div class='box_left_1_num'>
                                <span>百</span>
                                <div>
                                   0    
                               </div>
                           </div>
                           <div class='box_left_1_num'>
                                 <span>十</span>
                                <div>
                                   0    
                               </div>
                           </div>
                           <div class='box_left_1_num'>
                                 <span>个</span>
                                <div>
                                    0   
                               </div>
                            </div> 
                       </div>
                   </div>
                </div>   
                 <div class="box_left_2" >
                     <div class="box_left_box">
                         预约情况
                     </div> 
                     <div class="bgc"></div>  
                     <div class="bgc1"></div>
                     <div class="box_map" ref="sectorchart">
                         
                    </div>    
                </div> 
            </div>
            <div class="box_center_2"> 
                <div class="box_center_box">
                     <div class="box_center_box_1 box_center_box_2">
                         <div class="timehead box_postion">
                            <span class="box_left_1_title">机关三部（旅团分队）分布图</span>
                            <el-date-picker
                                    class="timeData"
                                    v-model="value4"
                                    type="month"
                                    placeholder="选择月">
                            </el-date-picker>
                        </div>
                        <div class="box_center_circle">
                            <div class="box_center_box_circle">
                                <div class="box_center_box_circle_1" ref="circlechart1">

                                </div>    
                                <div class="box_center_box_circle_2">
                                    <div class="box_center_num">280000</div> 
                                     <div class="box_center_text">机关C部</div>       
                                </div>    
                            </div>
                            <div class="box_center_box_circle">
                                <div class="box_center_box_circle_1" ref="circlechart2">

                                </div>    
                                <div class="box_center_box_circle_2">
                                      <div class="box_center_num">280000</div> 
                                     <div class="box_center_text">机关C部</div>                     
                                </div>      
                            </div>
                            <div class="box_center_box_circle">
                                <div class="box_center_box_circle_1" ref="circlechart3">

                                </div>    
                                <div class="box_center_box_circle_2">
                                     <div class="box_center_num">280000</div> 
                                     <div class="box_center_text">机关C部</div>            
                                </div>     
                            </div>
                        </div>
                    </div>   
                     <div class="box_center_box_1 box_center_box_2">
                        <div class="box_center_box_bottoom_1 ">
                            ◉ 机关三部（旅团分队）分布详情    
                        </div>
                        <div class="box_center_box_bottoom_2">
                             <div class="box_map" ref="storechart">

                            </div>
                        </div>
                    </div>  
               </div>    
            </div>
            <div class="box_center_3">
                <div class="box_right_1">
                    <div class="box_right_box"> 
                        进度图
                    </div>
                    <div class="box_map" ref="planchart">

                    </div>
                </div>   
                 <div class="box_right_2">
                     <div class="box_right_box">
                        文印完成动态数据  
                     </div>
                     <div>

                     </div>
                </div>    
            </div>
        </div>   
    </div>
</template>

<script>
import option from '../../common/option'
export default {
  components: {
    
  },
  data() {
    return {
        value4:null,
        //进度图
        mychart:null,
        planlist: [200,400,204],
        planx:['kkk','kkk','kkk'],
        //预约情况
        mychart1:null,
        //机关三部（旅团分队）分布详情
        mychart2:null,
        //机关三部分布
        mychart3:null,
        mychart4:null,
        mychart5:null,
    };
  },
  mounted() {
    this.draplan();
    this.drasector();
    this.drastore();
    this.dracircle1();
    this.dracircle2();
    this.dracircle3();
    let that = this;  
    window.onresize = () => {
      return (() => {
        that.mychart.resize();
        that.mychart1.resize();
        that.mychart2.resize();
        that.mychart3.resize();
         that.mychart4.resize();
        that.mychart5.resize();
      })()
    }
  },
  methods: {
    switchover(){
        this.$router.push('/exhibition1')
    },
    draplan() {
      let that = this
      that.mychart = that.$echarts.init(that.$refs.planchart)
      option.options2.series[1].itemStyle.normal.color = function(){
                  return new  that.$echarts.graphic.LinearGradient(
                                        0, 0, 1, 0,
                                        [
                                            {offset: 0, color: '#3977E6'},
                                            {offset: 1, color: '#37BBF8'}
                                        ])
                            // for(let i=0;i<that.planlist.length;i++){
                            //     if(that.planlist[i] <= 300){
                            //         return new  that.$echarts.graphic.LinearGradient(
                            //             0, 0, 1, 0,
                            //             [
                            //                 {offset: 0, color: '#3977E6'},
                            //                 {offset: 1, color: '#37BBF8'}
                            //             ])
                            //     }else{
                            //         return new that.$echarts.graphic.LinearGradient(
                            //             0, 0, 1, 0,
                            //             [
                            //                 {offset: 0, color: '#E8576C'},
                            //                 {offset: 1, color: '#661C5A'}

                            //             ])
                            //     }
                            // }
                        }
      option.options2.yAxis[0].data = that.planx
      option.options2.yAxis[1].data = that.planx
      option.options2.series[1].data = that.planlist
      that.mychart.setOption(option.options2)
    },
    drasector(){
      let that = this
      that.mychart1 = that.$echarts.init(that.$refs.sectorchart);
      that.mychart1.setOption(option.options1)
    },
    drastore(){
     let that = this
      that.mychart2 = that.$echarts.init(that.$refs.storechart);
      that.mychart2.setOption(option.options3)    
    },    
    dracircle1(){
     let that = this
      that.mychart3 = that.$echarts.init(that.$refs.circlechart1);
    //   option.options4.series[0].data[0].itemStyle.normal.color=function(){
    //                return new  that.$echarts.graphic.LinearGradient(
    //                                     0, 0, 1, 0,
    //                                     [
    //                                         {offset: 0, color: '#3977E6'},
    //                                         {offset: 1, color: '#37BBF8'}
    //                                     ])
    //             }
      that.mychart3.setOption(option.options4)    
    },    
    dracircle2(){
     let that = this
      that.mychart4 = that.$echarts.init(that.$refs.circlechart2);
      that.mychart4.setOption(option.options5)    
    },    
    dracircle3(){
     let that = this
      that.mychart5 = that.$echarts.init(that.$refs.circlechart3);
      that.mychart5.setOption(option.options6)    
    },    
  },

  created() {

  }
};
</script>


<style scoped="scoped" lang='less'>
.box{
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    letter-spacing: normal;
    color: #fff;
    text-align: center;
    line-height: normal;
    text-transform: none;
    width: 100%;
    height: 100%;    
    padding: 10px;
    padding-top: 117px;
    padding-bottom: 25px;
    box-sizing: border-box; 
    background-color: rgba(8, 20, 36, 1);
    position: relative;
   .box_head{
       width: 100%;
       height: 122px;
       line-height: 100px;
       font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight: 700;
        font-style: normal;
        font-size: 36px;
        color: #FFFFFF;
       position: absolute;
       top: 0px;
       background: url(~imgs/home/23.png) no-repeat center;
   }
   .box_center{
       height: 100%;
       .box_center_1{
        width:25%;
        height:100%;
        display: inline-block;
        box-sizing: border-box;
        padding-top:250px; 
        float:left;    
        position: relative;
        .box_left_1{
           height:250px;
           width: 100%; 
           position: absolute;
           top: 0px;
           padding: 8px 23px;
           box-sizing: border-box;
           background: url(~imgs/home/24.png) no-repeat;
           background-size: 100% 100%;
           .box_left_box_num{
               width: 302px;
               margin: 0 auto;
               margin-top: 20px;
               .box_left_1_num1,.box_left_1_num{
                    display: inline-block;
                    text-align: center;
                    margin-right: 5px;
                    height: 93px;
                    >div{
                     width: 34px;
                     height: 66px;  
                     background: url(~imgs/home/25.png) no-repeat;
                     background-size: 100% 100%;
                     font-size: 49px;
                    }
                }
                .box_left_1_num1{
                    height: 0px;
                    font-size: 24px;
                    span{
                          position: relative;
                          bottom: -16px;
                    }
                }

           }
        }
        .box_left_2{
           height:100%;
           width: 100%;
            background: url(~imgs/home/24.png) no-repeat;
           background-size: 100% 100%;
           padding: 10px 16px;
           box-sizing: border-box;
           position: relative;
           padding-top: 40px;  
           text-align: left;
            .box_left_box{
                    height: 30px;
                    font-size: 18px;
                    position: absolute;
                    top: 20px;
                }
            }
      
       }
      .box_center_2{
        width:50%;
        height:100%;
        display: inline-block; 
        box-sizing: border-box; 
        float: left;
        padding: 0px 10px;
        .box_center_box{
         width: 100%;
         height: 100%;
         background: url(~imgs/home/24.png) no-repeat;
         background-size: 100% 100%;
        padding: 22px 28px;
        box-sizing: border-box;
        .box_center_box_2{
              position: relative; 
              padding-top: 30px;
        }
        .box_postion{
            position: absolute;
            top: 0px;
            width: 100%;
        }
        .box_center_box_1{
             width: 100%;
             height: 50%; 
             box-sizing: border-box;  
             .box_center_circle{
                width: 100%;
                 height: 100%;
                 box-sizing: border-box;  
             .box_center_box_circle  {
                 width: 33.3%;
                 height: 100%;
                 display: inline-block;
                box-sizing: border-box;  
                .box_center_box_circle_1{
                    height: 70%; 
                    width: 100%;     
                }
                .box_center_box_circle_2{
                    height: 30%; 
                    width: 100%; 
                    .box_center_num{
                        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
                        font-weight: 700;
                        font-style: normal;
                        font-size: 32px;
                        color: #FF6600;   
                    }
                    .box_center_text{
                        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
                        font-weight: 700;
                        font-style: normal;
                        color: #FFFFFF;
                        font-size: 18px;
                    }
                }
             }    
             }
            
             .box_center_box_bottoom_1{
                 text-align: left;
                 font-size: 18px;
                 height: 30px;
                 position: absolute;
                 top: 0px;
             }
            .box_center_box_bottoom_2{
                 height:100%;
                 width: 100%; 
            }  
         }
        }
       }
       .box_center_3{
                width:25%;
                height:100%;
                display: inline-block;
                box-sizing: border-box;
                float:left;    
             .box_right_1{
                width: 100%;
                height:60%; 
                background: url(~imgs/home/24.png) no-repeat;
                background-size: 100% 100%;
                padding: 24px 13px;
                padding-top: 30px;
                position: relative;
                box-sizing: border-box;
             }   
             .box_right_2{
                width: 100%;
                height:40%; 
                background: url(~imgs/home/24.png) no-repeat;
                background-size: 100% 100%;
                padding-top: 30px;
                padding: 24px 13px;
                box-sizing: border-box;
                position: relative;
             }   
             .box_right_box{
                 height: 30px;
                 font-size: 18px;
                  position: absolute;
                  top: 10px;
              }
        }
   }
}

.box_map{
    width: 100%;
    height: 100%;
}
.timehead{
    height: 40px;
    line-height: 40px;
    text-align: left;
  .box_left_1_title{
    font-size: 18px;
}

.btn{
    position: absolute;
    right: 1px;
}

.timeData{
    display: inline-block;
    width: 0px;
    float: right;
    margin-right: 40px;
    /deep/.el-input__inner{
        padding-left:0px !important;
        background-color: rgba(8, 20, 36, 0.1);
        border: none !important;
    }
    /deep/ .el-input__icon{
        color: #fff;
        font-size: 20px;
    }
}
}

.bgc1{
    width: 200px;
    height: 200px;
    border-radius: 260px;
     background: url(~imgs/home/28.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 40%; 
     margin-left: -100px;
    margin-top: -80px;
    animation: rotate 20s linear infinite;
}

.bgc{
    width: 260px;
    height: 260px;
    border-radius: 260px;
     background: url(~imgs/home/27.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 40%; 
    margin-left: -130px;
    margin-top: -108px;
    animation: rotate1 20s linear infinite;
}

@keyframes rotate1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate1 {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

</style>
一个前端小菜鸡
关注
专栏目录
在vue中使用vue-echarts-v3的实例代码
10-18
在Vue.js应用中集成ECharts图表库，通常我们会选择使用vue-echarts-v3这个封装库，它使得在Vue环境中使用ECharts变得更加便捷。本文将详细介绍如何在Vue项目中使用vue-echarts-v3，包括安装、配置、以及具体实例。 ...
echarts在vue中使用方法
xiaoming4965的博客
01-18 137
ehcarts基础使用
在Vue 3项目中使用 echarts
dangfulin的博客
05-01 3万+
记得第一次使用 echarts 还是2019年的时候，那时做的一个物联网项目云平台的前端需要一些数据可视化功能，经过一些对比后就使用了 echarts 。上手非常快，专业性也足够，因此在后来其他的一些项目中就多次用到它。 echarts 是百度基于 JavaScript 实现的一个开源可视化图表库，主要特点就是可视化类型丰富、动画炫酷、使用简单。 这个教程就简单演示如何在 Vue 3 项目中使用 echarts。 一，创建 Vue3 项目并安装 echarts npm 创建项目： npm create u
Echarts 在 Vue 中的最佳实践
xxxzzzqqq_的博客
03-11 1706
props: {},id: {},width: {},height: {},option: {},},data() {return {},watch: {option() {},},},if (!return;},methods: {},},
echarts在vue2中的简单使用
weixin_47030180的博客
11-20 5532
因项目需要，需要大量的展示数据，但是大量的使用表格对于界面观感不好，所以采用了echarts来对数据进行展示，下面我来详细介绍echarts在vue中的使用方法： 在vue中安装echarts 以vscode编辑器和vue-cli为例 用vue创建项目这里一笔带过 打开终端使用命令行输入 npm i echarts--save 在package.json中可以查看到 3.为了使用的方便我们选择将在vue的原型上加入echarts 打开 main.js import echarts from '
echarts在vue的基本使用
m0_60477336的博客
06-04 219
在你的 Vue 组件中，导入了 ECharts
Echarts在vue中的使用
gmf7471的博客
05-05 1754
以下是在vue中开发使用的场景 必要的从npm下载echarts npm install echarts --save 其次引入全局中 1.开始的时候需要准备一个div，就是所说的对dom容器 <div class="Iots"></div> 2.在我们echarts官方文档中找到自己所需的图表，然后复制到methods生命周期里，（如需调用接口本人建议的方法时给图表代码外封一层函数，然后在mounted里面调用，这样请求下来的数据可以直接通过调用携带数据） 3.之
echarts在vue中的基本使用流程
m0_62823653的博客
08-23 402
在打开页面之后更新echarts的数据想要页面跟着渲染需要调用配置项。使用流程:echarts在vue中的使用流程。在我的第二部分使用方法中就是说必须调用此函数。第二部分知识小点:适配器。
Echarts在vue中的基本使用以及常用配置
qq_45747117的博客
05-07 1531
1、安装Echarts npm install echarts --save 2、在main.js中引入 //全局引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts=echarts 3、在组件中使用 准备一个盒子，确定盒子宽高 <div> <!-- 基本的折线图 --> <div id="line" style="width: 400px; height:..
在vue3 中使用echarts
热门推荐
启明星的指引---博客
12-08 7万+
1,安装echarts npm install echarts --save 有cnpm 的可以cnpm安装 2,在main.js中导入 import { createApp } from 'vue' import App from './App.vue' import * as echarts from 'echarts' const app = createApp(App).mount('#app') app.echarts=echarts 3,在需要使用的页面,定义div &lt
Vue中运用ECharts
weixin_61665636的博客
11-23 1万+
全局引用是把Echarts完整的引入，这样做的缺点就是会额外的引入很多其他没有用的配置文件，可能会导致项目体积过大。全局引用是把Echarts完整的引入，这样做的缺点就是会额外的引入很多其他没有用的配置文件，可能会导致项目体积过大。在React中，如果把ECharts整个引入，也会面临项目包体积过大所造成的负面影响。在以前没有Hook的时候，我们都是在class里面写代码，就如上述的方法一样。在以前没有Hook的时候，我们都是在class里面写代码，就如上述的方法一样。来对真实的DOM进行操作。
在Vue中使用echarts的方法
08-28
在Vue中使用ECharts的方法 Vue框架是当前最流行的前端框架之一，ECharts是中国最流行的数据可视化工具之一。在实际项目中，我们经常需要将ECharts集成到Vue项目中，以实现数据的可视化展示。因此，本文将详细介绍...
在Vue中使用Echarts实例图的方法实例
10-14
在Vue中使用Echarts涉及到几个关键步骤，包括安装Echarts、在组件中引入Echarts、创建Echarts图表容器、配置图表参数以及在合适的生命周期中挂载图表。 首先，需要在Vue项目中安装Echarts。可以通过npm或者yarn来...
在vue中使用echarts(折线图的demo,markline用法)
10-15
在`mounted`生命周期钩子中，我们初始化ECharts图表，调用`this.$echarts.init()`方法创建图表实例，然后使用`setOption()`方法设置配置。 在`markLine`中，你可以根据需求配置不同类型的数据，如平均值、最大值、...
57.公司裁员人员优化方案.docx
09-14
57.公司裁员人员优化方案.docx
GPT-o1 草莓大模型训练原理，IIya 是co-author
最新发布
09-14
内容概要：该论文研究了在解决复杂多步骤推理时，在过程监督(process supervision)方法下训练奖励模型的效果显著优于单纯的结果监督(outcome supervision)，尤其是在难度较高的数学题目上更为突出。通过利用从大数据集中收集到的逐层反馈数据（PRM800K），论文提出了一种基于人类评分反馈的方式训练过程监控模型，这比仅依靠解决方案的结果来优化模型表现得更好。实验证明，过程监控行为使得错误识别更容易，同时也避免模型仅为了得到正确答案而进行逻辑错误推导的问题。 适用人群：自然语言处理的研究人员以及关注人工智能安全和可靠性的技术人员。 使用场景及目标：本文旨在提供一个深入的理解关于过程指导相对于结论导向监管的优势，特别是在需要复杂的、多层次推理任务如自动解答复杂应用型数学问题等方面。 其他说明：本文不仅详细讨论了两者在数据采集效率方面的区别而且还开源了一个完整的带有分级人工评价标签的数据集，以帮助未来对大模型对齐的相关研究工作推进。
c语言大丰收小游戏源码
09-14
c语言大丰收游戏源码
基于Springboot和Vue的在线宠物用品交易网源码 在线宠物用品交易网代码，包括程序，中文注释，配置说明操作步骤
09-14
在线宠物用品交易网-在线宠物用品交易网-在线宠物用品交易网-在线宠物用品交易网-在线宠物用品交易网-在线宠物用品交易网-在线宠物用品交易网-在线宠物用品交易网-在线宠物用品交易网-在线宠物用品交易网-在线宠物用品交易网-在线宠物用品交易网 1、资源说明：在线宠物用品交易网源码，本资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 2、适用人群：计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者，作为参考资料，进行参考学习使用。 3、资源用途：本资源具有较高的学习借鉴价值，可以作为“参考资料”，注意不是“定制需求”，代码只能作为学习参考，不能完全复制照搬。需要有一定的基础，能够看懂代码，能够自行调试代码，能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/details/135931154 技术栈、环境、工具、软件： ① 系统环境:Windows ② 开发语言：Java
echarts在vue中的使用
03-31
在Vue中使用Echarts需要先安装echarts和vue-echarts依赖。 1. 安装依赖 ``` npm install echarts vue-echarts ...以上就是在Vue中使用Echarts的基本方法，具体的Echarts配置可以参考Echarts官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值