精华内容
下载资源
问答
  • vue中使用动态echart图表

    千次阅读 2017-09-14 17:41:00
    // 图表动态改变 setInterval(function() { var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/g, ''); var data0 = that.option.series[0].data; data0.shift(); // 两秒请求一次数据 that....
    <template>
      <div class="block">
        <div class="title">展会实时人流里统计</div>
        <div :class="className" :id="id" :style="{height:height,width:width}"></div>
      </div>
    </template>
    <script>
    import echarts from 'echarts';
    
    export default {
      props: {
        className: {
          type: String,
          default: 'dynamic myEchart'
        },
        id: {
          type: String,
          default: 'dynamic'
        },
        width: {
          type: String,
          default: '100%'
        },
        height: {
          type: String,
          default: '400px'
        }
      },
      data() {
        return {
          chart: null,
          data: {},
          people: '',
        }
      },
      computed: {
        option() {
          var self = this;
          return {
            tooltip: {
              trigger: 'axis'
            },
    
            dataZoom: {
              show: false,
              start: 0,
              end: 100
            },
            xAxis: [{
              type: 'category',
              boundaryGap: true,
              data: (function() {
                var now = new Date();
                var res = [];
                var len = 10;
                while (len--) {
                  res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                  now = new Date(now - 2000);
                }
                return res;
              })()
            }, {
              type: 'category',
              boundaryGap: true,
              data: (function() {
                var res = [];
                var len = 10;
                while (len--) {
                  res.push(self.people);
                }
                return res;
              })()
            }],
            yAxis: [{
              type: 'value',
              scale: true,
              name: '人数',
            }],
            series: [{
              name: '人数',
              type: 'line',
              data: (function() {
                var res = [];
                var len = 10;
                while (len--) {
                  res.push(self.people);
                }
                return res;
              })()
            }]
          }
        }
      },
      mounted() {
        this.initChart();
      },
      beforeDestroy() {
        if (!this.chart) {
          return
        }
        this.chart.dispose();
        this.chart = null;
      },
      methods: {
    
        initChart() {
          var that = this;
          this.chart = echarts.init(document.getElementById(this.id));
          this.axios.post('url', {
            id: 1
          }).then((data) => {
            // 初始化数据
            this.data = data.data.data
            this.people = this.data.expo_audience
            this.chart.setOption(this.option)
    
            // 图表动态改变
            setInterval(function() {
              var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/g, '');
              var data0 = that.option.series[0].data;
              data0.shift();
              // 两秒请求一次数据
              that.axios.post('/url', {
                id: 1
              }).then((data) => {
                var people = data.data.data.expo_audience
                data0.push(people);
                that.option.xAxis[0].data.shift();
                that.option.xAxis[0].data.push(axisData);
                that.option.xAxis[1].data.shift();
                that.option.xAxis[1].data.push(people);
    
                that.chart.setOption(that.option);
              })
            }, 2100);
          })
    
        }
      }
    }
    
    </script>
    
    展开全文
  • vue+echart图表动态自适应实现

    千次阅读 2018-04-08 11:15:50
    一、首先全局定义表格对象:二、绑定和设置:如果直接跟window.onresize = myChart.resize会导致只有一个成功,因为直接调用的话后面的会覆盖。三、监听:

    一、首先全局定义表格对象:

    二、绑定和设置:

    如果直接跟window.onresize = myChart.resize会导致只有一个成功,因为直接调用的话后面的会覆盖。

    三、监听:


    展开全文
  • 主要介绍了echarts.js 动态生成多个图表 使用vue封装组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 如何在vue中使用echart图表

    万次阅读 多人点赞 2020-05-11 12:56:08
    echarts在vue项目中实现的步骤 webpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。

    人狠话不多,先上效果图!

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    以上都是在项目中经常使用到的图标,地图的引入下一期会特别介绍!

    echarts中文官网

    官网链接点击查看:ECharts
    在这里插入图片描述
    在这里插入图片描述
    其实官网中有在项目中使用的详细步骤,大家也可以通过对官网的学习来使用echarts,毕竟人家比比我介绍的更详细更专业。

    echarts在vue项目中实现的步骤

    webpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。

    第一步:先安装echarts

    // npm安装echarts
     npm install echarts --save
    

    或者

    // 先安装淘宝镜像
     npm install -g cnpm --registry=https://registry.npm.taobao.org
    // cnpm安装echarts
     cnpm install echarts -S
    

    第二步:在需要的组件中使用echart

    个人喜欢把echart.vue单独封装起来,方便使用和复用。先创建一个chartLint.vue文件;

    chartLint.vue文件:

    <template>  
          <div class="echart" id="echart-line" :style="{float:'left',width: '100%', height: '230px'}"></div>   
    </template>
    
    <script>
    
    import echarts from  "echarts";
    
    export default {
         
          methods:{
    
          initChart(name,xData,yData) {
           
              let getchart = echarts.init(document.getElementById('echart-line'));
              var  option = {
                   
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [name],
                        bottom:'0%'
                    },
                    grid: { //调整图表上下左右位置
                        top:'10%',
                        left: '3%',
                        right: '8%',
                        bottom: '11%',
                        containLabel: true
                    },
                   
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: name,
                            type: 'line',
                            stack: '总量',
                            data: yData
                        },
                    ]
                };
    
              getchart.setOption(option);
              //随着屏幕大小调节图表
              window.addEventListener("resize", () => {
                getchart.resize();
            });
          },
    
        }
    
    }
    </script>
    

    在需要的组件中引入即可:

     <template>
       <div class="analysisTask">             
           <ChartLine ref="chart_line_one"/>              
       </div>
    </template>
    
    <script>
    import ChartLine from './partChart/chartLine.vue'
    
    export default{
        data(){
            return{
              name:'张雪',
              xData: ['2020-02', '2020-03', '2020-04', '2020-05'],
              yData: [30, 132, 80, 134],
            }
        },
        mounted () {
           const {name,xData,yData} = this
           console.log(this.$refs)
           this.$refs.chart_line_one.initChart(name,xData,yData)
        },
        components: {
           ChartLine,
        }
    }
    </script>
    

    这样就显示出来啦!

    展开全文
  • 图表比较多,但其实用到的就是 饼图、柱状图和折线图,如果完整引入,会多很多不必要的插件和增大包的体积,最近一直在上性能优化的课,明白 完整引入和按需引入的差别,所以认真去了解了Echart如何按需引入,在此...

           最近做大数据展示平台,需要用到很多图表去实现数据可视化,图表比较多,但其实用到的就是 饼图、柱状图和折线图,如果完整引入,会多很多不必要的插件和增大包的体积,最近一直在上性能优化的课,明白 完整引入和按需引入的差别,所以认真去了解了Echart如何按需引入,在此记录一下:

    1、安装babel-plugin-equire插件,装在 devDependencies 里,即装在开发环境里,不需要装在生产环境里

    npm install babel-plugin-equire -D

    2、在 .babelrc文件里 的plugins加入equire插件,vue-cli3 以上版本没这个文件,可以自己直接新建一个,与package.json同级

    3、新建一个 echarts.js文件,一般放在lib文件夹下,其他地方也可以,文件内容如下:

    const echarts = equire([
        // 写上需要的组件
        'bar',   //柱状图
        'pie', //饼图
        'line', //折线图
        'legend', //图例
        'title',  //标题
        'tooltip' //提示工具
        
    ])
    export default echarts

    4、在需要用到图表的vue组件内引入即可,注意:这里引入的是您新建的echarts.js ,注意路径

    import echarts from "@/lib/echarts";

    到这里就实现了按需引入Echart了,下面是我实现的一个折线图效果

    我一般从后端请求回数据之后,处理成我要的数据格式,然后调用 绘图方法

    之所以要把 绘图的方法放在  $nextTick里,是因为图表不一定是固定的,还可能需要根据后端返回的数据动态渲染DOM结构,要想绘制图标 就需要获取到最新的DOM结构。不然会报无法获取DOM结构错误。

    图表的配置代码,即option,我没有贴上来,因为太长了,不同项目有不同的配置需求,建议直接看官方文档,非常详细:https://echarts.apache.org/zh/option.html#series

    ps:官方的实例挺多的,建议找个相似的实例看一下,个人感觉,官方写的比较简洁,没有那么多 多余的代码

    官方实例:https://echarts.apache.org/examples/zh/index.html

    他的配置文档里,很多配置参数右侧都有一个试一试,可以测试一下效果,很直观,挺好用的,我刚开始还没注意到

     

    ps:菜鸟成长过程的简单记录,如果不严谨之处,欢迎指正!

     

    展开全文
  • vue中使用Echart图表

    千次阅读 2019-05-06 19:48:47
    1.本地安装echarts ...2.本地安装vue-echarts npm install vue-echarts --save 3.本地安装vue-echarts 包装成组件,引用 import chart from "vue-echarts"; 4.父组件代码 <template> <div class...
  • 1.html代码 <div class="widget-index"> <div ref="vueLine" class="vue-line"> <ve-line ref="lineChart" :data="chartData" :height="height" ></ve-line> &l...
  • 我们在项目中经常需要使用一些折线图、柱状图、饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体...
  • js2种常用定时器: //会间隔3s不停的调用函数 setInterval(function(){}, 3000) //延迟3s执行 只执行一次 setTimeout(function(){}, 3000) 使用多个setInterval会导致浏览器崩溃!原因是setInterval不会清除定时器...
  • vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
  • vue+echart图表数据切换

    2021-09-26 10:47:45
    vue+echart图表数据切换前言一、效果图二、代码演示1.准备阶段2.HTML片段3.js片段4.css片段总结 前言 最近有个需求,同一个echart图表点击切换不同数据,花了点时间实现了,感觉比较常用,记录一下方便下次CV自己...
  • let brokenLineEchart= this.$echarts.init(document.getElementById("scatterEchart")); brokenLineEchart.setOption({ backgroundColor: '#ffffff', grid: { //Echarts组件 离容器的距离 left: '5%', ...
  • vue + echart图表之柱形图

    千次阅读 2020-11-07 10:29:00
    目录使用echarts准备工作柱状图 使用echarts准备工作 1、安装echarts ... Vue.prototype.$echarts = echarts; 3、各种echarts图的实现 0: 官网:https://echarts.apache.org/zh/index.html 0: 配置项 h
  • 需求:在PC端开发含图表展示的页面时,需要考虑用户调整浏览器窗口大小后图表能够根据窗口大小自适应变化。 废话不多说直接来代码吧 html <template> <div class="dashboard-container"> <!-- &...
  • Vue动态渲染echarts图表

    千次阅读 多人点赞 2020-10-13 15:12:54
    这个时候就需要动态来渲染不定数量和类型的echarts图表了。 第一步,选择标签 将选择的所有标签存储到downloadCheckList数组中,再添加一个数组editableTabs用来存放需要展示的标签的相关信息。obj1代表发送请求时...
  • html中: 数据处理就不用提了。嗯,直接画图: // 画 折线图 drawLine() { // 数据处理的方法 this.dealEchartsData() var myChartsArr = [] for (var i =
  • 在使用Tab页第一次切换到有echart页面时,发现echart画的图形未铺满父容器。那是因为父容器最初是被隐藏的,高宽为0。 先提出方案解决这个问题。 elementUi为例: 1.利用v-if值切换来重绘图形页面。 当前tab的...
  • 使用Vue组件封装Echart柱状图,直接引用组件js,并且在需要展示的地方,进行Vue数据传值,支持多坐标轴。本案例非Webpack打包,直接引用JS即可。适用于部分页面使用Vue功能,或者想尝试Vue功能的同学。该组件使用...
  • 我太难了,搞一个echart仪表盘,需求一步步分解: ①一开始是写死的假数据,图表成功显示在页面上; ②和后台约定数据类型格式,前台写好接口,请求后台数据,替换掉假数据给图表data赋值真实数据并成功渲染; ③我想...
  • Echart新手使用: 学习echarts推荐:https://echarts.apache.org/zh/ 1、在vue的脚手架项目里面首先使用如下命令通过 npm 安装 ECharts npm install echarts --save 2、默认使用 require('echarts') 得到的是...
  • vue中使用echart地图

    千次阅读 2020-07-14 15:09:35
    vue中使用echart地图获取湖南的地图数据实现的效果步骤一些方法地图options总结 获取湖南的地图数据 https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ 在这个网址上可以下载各个省份的地图json 实现的效果...
  • 开发中用到了echart图表,需要图表自适应大小resize,一开始使用的方法是: window.onresize = function () { this.myChart.resize(); }; 但是又遇到一个问题,点击侧边栏的展开收起的时候,图表的大小没有自适应...
  • 切换路由Echart图表不显示,刷新页面才正常 刚开始很费解:刚开始以为是组件懒加载的问题 后来又网上搜了下,发现有着问题的还不少 但是提供的解决方法都是: 用setTimeout 来延迟Echart的加载 this.$nextTick()...
  • 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--...上面全局引入会将所有的echarts图表打包,导致体积过大,我解决这一问题,可以使用require按需引入即是需要什么就引入什么: 即是: let ech
  • nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。 nextTick的触发时机: 在同一事件循环中的数据...
  • 可拖拽大屏演示系统,目的是为了能够方便大屏系统的快捷生成,通过拖拽的方式完成图表的搭建。 不用关心设置图表的尺寸,拉伸图表即可控制大小。 能够保存图表在页面上的位置信息,大小信息,下次打开时可还原上次...
  • VUE 项目中,为了使 echart 在窗口变化时能够自适应,要用到 window.resize = function(){ …….}; 但是我在项目刚开始的时间就有一个地方的高度变化使用了 window.resize ,在里面再次使用 会覆盖掉原来的,所以...
  • 首先 npm install echarts --save 在页面中,写入dom ; height: 600px"></div> import * as ... //随着屏幕大小调节图表 window.addEventListener("resize", function () { getChart.resize(); }); }, }, }; </script>
  • echart5 vue正确引入方式

    千次阅读 2021-01-10 11:55:45
    起因 先前给下属安排引入太多...Vue.prototype.$echarts = echarts 2、需要的界面引入 // 引入 ECharts 主模块 // let echarts = require('echarts/lib/echarts') // 引入柱状图 require('echarts/lib/chart/bar');

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,915
精华内容 1,566
关键字:

echart动态图表vue

vue 订阅