可视化
yw00yw
编程之路任重而道远!
展开
-
Web浏览器基于Flash实时播放监控视频(二)
vue项目中应用vue-video-player与videojs-flash实现RTMP流播放所需插件npm install vue-video-player --savenpm install videojs-flash --save版本"videojs-flash": "^2.2.1","vue-video-player": "^5.0.2"全局使用main.jsimport VueVideoPlayer from 'vue-video-player'import 'vi.原创 2020-12-29 18:00:40 · 554 阅读 · 0 评论 -
Web浏览器基于Flash实时播放监控视频(一)
安装插件插件安装npm install video.js --savecnpm install --save videojs-flashcnpm install --save videojs-swfcnpm install --save vue-video-player // 使用video.js播放不安装这个插件对应版本“video.js”: “^7.10.2”,“videojs-flash”: “^2.2.1”,“videojs-swf”: “^5.4.2”,“vue-vide原创 2020-12-29 16:54:07 · 906 阅读 · 2 评论 -
echarts环状饼图默认选中且图例可点击选择二次封装
核心库echartslodashResizeListener代码<!-- * @Author: your name * @Date: 2020-11-04 10:39:39 * @LastEditTime: 2020-12-08 14:05:46--><template> <div class="charts" ref="charts"></div></template><script>impor原创 2020-12-08 14:20:40 · 1108 阅读 · 0 评论 -
可视化-svg
svg特点SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG 是万维网联盟的标准SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体SVG 可被非常多的工具读取和修改(比如记事本)SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地原创 2020-12-01 11:33:36 · 351 阅读 · 0 评论 -
vue-awesome-swiper的基本使用
安装安装地址:https://www.npmjs.com/package/vue-awesome-swiper引入import { swiper, swiperSlide } from "vue-awesome-swiper";import "../../../node_modules/swiper/css/swiper.css";注册组件components: { swiper, swiperSlide},组件使用<div class="banner_box原创 2020-11-26 16:55:31 · 1334 阅读 · 0 评论 -
基于echarts对雷达图的封装
核心库echartslodashResizeListener代码<!-- * @Author: your name * @Date: 2020-11-04 10:39:39 * @LastEditTime: 2020-11-19 11:44:45--><template> <div class="charts" ref="charts"></div></template><script>impor原创 2020-11-26 16:39:50 · 408 阅读 · 0 评论 -
基于echarts对饼图的封装
核心库echartslodashResizeListener代码<!-- * @Author: your name * @Date: 2020-11-04 10:39:39 * @LastEditTime: 2020-11-26 14:11:28--><template> <div class="charts" ref="charts"></div></template><script>impor原创 2020-11-26 16:33:59 · 534 阅读 · 0 评论 -
基于echarts对折线图的封装
核心库echartslodashResizeListener代码<!-- * @Author: your name * @Date: 2020-11-04 14:56:52 * @LastEditTime: 2020-11-19 15:14:00--><template><div class="charts" ref="charts"></div></template><script>import ec原创 2020-11-26 16:29:46 · 485 阅读 · 0 评论 -
基于echarts对柱状图的封装
核心库echartslodashResizeListener代码<!-- * @Author: your name * @Date: 2020-11-03 10:39:39 * @LastEditTime: 2020-11-21 16:04:42--><template> <div class="charts" ref="charts"></div></template><script>impor原创 2020-11-26 16:20:58 · 704 阅读 · 0 评论 -
echarts图例的显示与隐藏
需求在图表加载的时候,默认只显示部分图例,只要图例显示部分,对应的柱图或者折线图也只显示对应的。点击一个按钮显示剩余的图例,或者点击置灰的图例让恢复显示。核心在legend里面的字段加个selected,然后设置不需要显示的数据标题:以官方案例为例:selected: {'邮件营销': false, '联盟广告': false}使用按钮切换可以动态改变selected里面对象的键值即可:this.options.legend.selected = {'邮件营销': false, '联盟广告'原创 2020-08-04 10:17:57 · 27525 阅读 · 0 评论 -
echarts的tooltip提示内容过多分列显示及自定义图例
效果图效果图描述tooltip内容太多,超出图表的显示区域,导致显示不全代码<template> <div class="chart_box"> <ChartBar :option="options"></ChartBar> </div></template><script>import lodash from "lodash";import { ChartBar } fr原创 2020-07-09 17:52:26 · 3314 阅读 · 1 评论 -
echarts柱图点击事件改变图例
效果图效果图描述点击柱状图的每根柱子显示对应的值和name及图例对应的总额柱图点击事件<template> <div ref="dom" class="charts chart-bar"></div></template>this.dom = echarts.init(this.$refs.dom, theme);this.dom.on('click', (event) => { // 柱图绑定点击事件 this.$emit('原创 2020-07-08 09:29:09 · 1809 阅读 · 0 评论 -
LightningChart® JS BS端结合框架模拟心电图实例
简介用于 .NET 与 Web 的高性能图表控件官网地址英文官网地址:https://www.arction.com/API地址进入到LightningChart® JS 下的Resources的目录有模板和API等内容使用方式可以下载对应的模板进行更改,或者自己用脚手架搭建,然后安装即可cnpm install ––save @arction/lcjsyarn add...原创 2020-04-01 11:04:39 · 3494 阅读 · 0 评论 -
LightningChart® JS BS端使用方式
LightningChart® JS 简介用于 .NET 与 Web 的高性能图表控件,真实使用情况是.net平台相对多,在bs端直接引入javascript几乎没人用,所以搜索引起几乎搜不到javascript引入的方式使用情况。这个使用是收费的,有免费的社区版,可以供个人学习参考,使用之后有水印,不能使用商用,如果需要商用,需要购买付费。中文官网: 中文官网有demo案例,有.net ...原创 2020-04-01 10:41:46 · 765 阅读 · 0 评论 -
可视化图表库对比总结
DataVDataV是一个基于Vue的数据可视化组件库(当然也有React版本)-提供用于提升页面视觉效果的SVG边框和装饰提供常用的图表如折线图等飞线图/轮播表等其他组件AntVAntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。G2本身是一门图形语法,简易性和灵活性是在于你学习了这么语法之后,你能够所思即所得,用图形...原创 2020-03-25 09:49:51 · 868 阅读 · 0 评论