精华内容
下载资源
问答
  • 主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 基于vue+echarts 数据可视化大屏展示[附源码]

    万次阅读 多人点赞 2020-01-02 22:54:40
    访问 获取源码 精准模板教程~

    获取 ECharts 的路径有以下几种,请根据您的情况进行选择:

    1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本;开发环境建议下载源代码版本,包含了常见的错误提示和警告。
    2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
    3) 或者通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts”
    由 cdn 引入,你可以在 cdnjs,npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

    项目模板源码在文章最后哦~

    项目效果展示
    在这里插入图片描述

    这篇介绍如何在vue中引入echarts:
    1.先安装依赖

    npm install echarts --save
    

    2.1全局引入main.js中配置(不推荐使用,会导致包过大,冗余多)

    import echarts from 'echarts' //引入echarts
    Vue.prototype.$echarts = echarts //挂载在原型,组件内使用直接this.$echarts调用
    

    2.2组件内按需引入 ( 推荐使用 )
    这种方式很简单,在需要引入图表的组件引入,例如如下引入柱状图。

    //在组件引入基本模板
    let echarts = require("echarts/lib/echarts");
    //在组件引入柱状图组件
    require("echarts/lib/chart/bar");
    

    3.全局引入为例,在组件中使用示例

    <template>
    	<div class="view-content">
    		<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    	</div>
    </template>
    
    <script>
    	export default {
    		name: 'Echarts',
    		data() {
    			return {
    			}
    		},
    		mounted() {
    			this.drawLine();
    		},
    		methods: {
    			drawLine() {
    				// 基于准备好的dom,初始化echarts实例
    				let myChart = this.$echarts.init(document.getElementById('myChart'))
    				// 绘制图表配置
    				let option = {
    					tooltip: {},
    					xAxis: {
    						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    					},
    					yAxis: {},
    					series: [{
    						name: '销量',
    						type: 'bar',
    						data: [5, 20, 36, 10, 10, 20]
    					}]
    				};
    				// 窗口大小自适应方案
    				myChart.setOption(option);
    				setTimeout(function() {
    					window.onresize = function() {
    						myChart.resize();
    					}
    				}, 200)
    			}
    		}
    	}
    </script>
    <style lang="scss" scoped>
    </style>
    

    4.效果
    在这里插入图片描述
    5.以上效果是官方的默认效果,当然这样子应用到项目中显然不符合需求,要做的更加炫酷更加科技感,就需要经过一番配置,如图(以下项目均为自己开发)
    在这里插入图片描述
    在这里插入图片描述
    如果想快速上手开发数据可视化大屏可以查考下项目模板,获取方式扫描下方二维码关注公众号,无任何附加条件即可直接获取哦~
    在这里插入图片描述

    展开全文
  • 基于vue + echarts 数据可视化大屏展示[附源码]

    万次阅读 多人点赞 2019-06-21 16:35:21
    一、老规矩先npm安装echarts npm install echarts --save 二、引入使用 1.全局引入main.js中配置 (这种方式在我项目中报echarts未定义错,求大神指点~。解除报错,就是在使用的组件内引入下 let echarts = require...
    *模板项目源码在文章最后获取哦~
    

    一、先npm安装echarts

    npm install echarts --save
    

    二、引入使用

    1.全局引入main.js中配置(不推荐使用)

    import echarts from 'echarts' //引入echarts
    Vue.prototype.$echarts = echarts //挂载在原型,组件内使用直接this.$echarts调用
    

    2.组件内按需引入(推荐使用)
    这种方式很简单,在需要引入图表的组件引入,例如如下引入柱状图。具体使用干什么样子的组件需要引入什么可以参考引入示例

    //引入基本模板
    let echarts = require("echarts/lib/echarts");
    // 引入柱状图组件
    require("echarts/lib/chart/bar");
    

    三、项目中应用

    1.直接上效果图果断干脆
    在这里插入图片描述
    2.目录结构
    每一块图表都是一个组件的形式呈现,方便对echarts的修改
    在这里插入图片描述
    first.vue组件代码示例如下,其他组件可以比葫芦画瓢

    <template>
      <div class="visual-chart1" id="myChart1"></div>
    </template>
    
    <script>
    export default {
      name: "first",
      props: {
        lineData: {
          type: Object
        }
      },
      data() {
        return {
          faultByHourTime:null
        };
      },
      mounted() {
        this.chartsView();
      },
      methods: {
        chartsView() {
          let myChart = this.$echarts.init(document.getElementById("myChart1"));
          var option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#57617B"
                }
              }
            },
            legend: {
              itemWidth: 18,
              itemHeight: 10,
              itemGap: 13,
              data: ["学校管理员", "教师", "学员"],
              right: "10px",
              top: "0px",
              textStyle: {
                fontSize: 12,
                color: "#fff"
              }
            },
            grid: {
              left: "8%",
              top: "10%",
              bottom: "10%",
              right: "10%"
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                axisLine: {
                  lineStyle: {
                    color: "#57617B"
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: "#fff"
                  }
                },
                data: this.lineData.date
              }
            ],
            yAxis: [
              {
                type: "value",
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: "#57617B"
                  }
                },
                axisLabel: {
                  margin: 10,
                  textStyle: {
                    fontSize: 14
                  },
                  textStyle: {
                    color: "#fff"
                  }
                },
                splitLine: {
                  lineStyle: {
                    color: "#57617B"
                  }
                }
              }
            ],
            series: [
              {
                name: "学校管理员",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 6,
                lineStyle: {
                  normal: {
                    width: 2
                  }
                },
                areaStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "rgba(7,46,101,0.2)"
                      },
                      {
                        offset: 1,
                        color: "rgba(0,166,246,0.4)"
                      }
                    ]),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                    shadowBlur: 10
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#3A44FB"
                  }
                },
                data: this.lineData.sta
              },
              {
                name: "教师",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 6,
                lineStyle: {
                  normal: {
                    width: 2
                  }
                },
                areaStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "rgba(7,44,90,0.2)"
                      },
                      {
                        offset: 1,
                        color: "rgba(0,212,199,0.4)"
                      }
                    ]),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                    shadowBlur: 10
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#00d4c7"
                  }
                },
                data: this.lineData.ta
              },
              {
                name: "学员",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 6,
                lineStyle: {
                  normal: {
                    width: 2
                  }
                },
                areaStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "rgba(7,44,90,0.2)"
                      },
                      {
                        offset: 1,
                        color: "rgba(0,146,246,0.4)"
                      }
                    ]),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                    shadowBlur: 10
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#0092f6"
                  }
                },
                data: this.lineData.sa
              }
            ]
          };
    
          myChart.setOption(option);
          setTimeout(function() {
            window.onresize = function() {
              myChart.resize();
            };
          }, 200);
    
          // 动态显示tootip
          var faultByHourIndex = 0; //播放所在下标
          this.faultByHourTime = setInterval(function() {
            //使得tootip每隔三秒自动显示
            myChart.dispatchAction({
              type: "showTip", // 根据 tooltip 的配置项显示提示框。
              seriesIndex: 0,
              dataIndex: faultByHourIndex
            });
            faultByHourIndex++;
            // faultRateOption.series[0].data.length 是已报名纵坐标数据的长度
            if (faultByHourIndex > option.series[0].data.length) {
              faultByHourIndex = 0;
            }
            if (faultByHourIndex > option.series[1].data.length) {
              faultByHourIndex = 0;
            }
            if (faultByHourIndex > option.series[2].data.length) {
              faultByHourIndex = 0;
            }
          }, 3000);
        }
      },
      beforeDestroy() {
        clearInterval(this.faultByHourTime);
        this.faultByHourTime = null;
      }
    };
    </script>
    
    <style rel="stylesheet/scss" lang="scss" scoped>
    .visual-chart1 {
      width: 100%;
      height: 100%;
    }
    </style>
    

    以上内容技术相关问题欢迎下方留言/私信交流,js+jq+echarts版本可以查看链接 点击进入,如需模板项目源码可以关注下方公众号无条件直接获取哦~
    在这里插入图片描述

    展开全文
  • 基于vue+echarts 数据可视化大屏展示

    千次阅读 2021-01-06 10:21:47
    获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整...

    获取 ECharts 的路径有以下几种,请根据您的情况进行选择:

    1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本;开发环境建议下载源代码版本,包含了常见的错误提示和警告。
    2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
    3) 或者通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts”
    由 cdn 引入,你可以在 cdnjs,npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

    项目背景
    在这里插入图片描述

    这篇介绍如何在vue中引入echarts:
    1.先安装依赖

    npm install echarts --save

    2.1全局引入main.js中配置(不推荐使用,会导致包过大,冗余多)

    import echarts from 'echarts' //引入echarts Vue.prototype.$echarts = echarts //挂载在原型,组件内使用直接this.$echarts调用

    2.2组件内按需引入 ( 推荐使用 )
    这种方式很简单,在需要引入图表的组件引入,例如如下引入柱状图。

    //在组件引入基本模板 let echarts = require("echarts/lib/echarts"); //在组件引入柱状图组件 require("echarts/lib/chart/bar");

    3.全局引入为例,在组件中使用示例

    <template> <div class="view-content"> <div id="myChart" :style="{width: '300px', height: '300px'}"></div> </div> </template> <script> export default {name: 'Echarts', data() { return { } }, mounted() { this.drawLine(); }, methods: { drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart =this.$echarts.init(document.getElementById('myChart')) // 绘制图表配置 let option = { tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 窗口大小自适应方案 myChart.setOption(option); setTimeout(function() {window.onresize = function() { myChart.resize(); } }, 200) } } } </script> <style lang="scss" scoped> </style>

    4.效果
    在这里插入图片描述
    5.以上效果是官方的默认效果,当然这样子应用到项目中显然不符合需求,要做的更加炫酷更加科技感,就需要经过一番配置,如图(以下项目均为自己开发)
    在这里插入图片描述
    在这里插入图片描述

    最后跟大家分享几个兼职接单平台,找程序员开发者有兴趣的可以了解一下

    1.靠山云:https://www.kaoshanyun.com

    2. 猪八戒:https://zbj.com

    3. CODING 码市:https://mart.coding.net

    4. 开源众包:https://zb.oschina.net/projects/list.html

     

    程序员兼职,程序员接单平台,程序员私活

    展开全文
  • 数据可视化开发相关图表库 与 echarts 官方文档 类似的图表库还有 highchart 官方文档 和 antv 官方文档等等 要说这些图表库如何选型,其实这点大可不必纠结,萝卜青菜各有所爱,可以说这些都有自己的有点,选哪一种...
  • 一、版权注释格式 <!-- @author Poleng @email 30930572@qq.com @create date 2020-07-18 08:42:38 @modify date 2020-03-20 15:17:15 @desc A data visualization project based on echarts.js. --> 二、
  • 下载链接 https://download.csdn.net/download/qq_36710522/14147525
  • 大屏可视化的自适应处理,除了要懂得前端的基本布局以外,还需要了解各个场景下的自适应方案选型,这里提供三种自适应处理大屏的方案
  • 这里默认已经具备了vue中如何使用echarts,如是小白先查看echarts在vue里面如何引入使用。 下面进入正题 (直接上代码): <script> export default { data() { return { resizefun:null } }, ...

空空如也

空空如也

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

echarts数据可视化大屏