【数据可视化】
文章平均质量分 66
数据可视化系列的所有相关博客
不停喝水
Web. Write Less,Do More
展开
-
【流程图】bpmn.js的使用-前端实现
效果图安装yarn add bpmn-js bpmn-js-properties-panel camunda-bpmn-moddle diagram-js-minimap 需要的依赖“bpmn-js”: “^8.7.3”,“bpmn-js-bpmnlint”: “^0.18.0”,“bpmn-js-color-picker”: “^0.3.1”,“bpmn-js-properties-panel”: “^0.44.0”,“bpmn-js-token-simulation”: “^0.2原创 2021-12-07 09:54:47 · 4058 阅读 · 1 评论 -
【数据可视化从入门到精通】核心指标组件重构-销售趋势组件开发(vue-charts正确打开方式)⑦
Vue-Charts使用vue-echarts和echarts的区别:vue-echarts是封装后的vue插件, 基于 ECharts v4.0.1+ 开发,依赖 Vue.js v2.2.6+,功能一样的只是把它封装成vue插件 这样更方便以vue的方式去使用它。echarts就是普通的js库,vue-echarts特征:轻量,高效,按需绑定事件支持按需导入ECharts.js图表和组件支持组件调整大小事件自动更新视图github仓库为啥要用vue-charts呢?原创 2021-11-02 23:16:32 · 233 阅读 · 0 评论 -
【数据可视化从入门到精通】核心指标组件构建⑥
父组件:Home.vue<template> <div class="home"> <top-view /> <sales-view /> <bottom-view /> <map-view /> </div></template><script> import TopView from '../components/TopView' impor原创 2021-11-01 23:58:59 · 212 阅读 · 0 评论 -
【数据可视化从入门到精通】数据报表项目初始化⑤
项目完成效果开始创建项目安装 vue-cli1.首先安装 npm i -g @vue/cli初始化项目 vue create datav-report-dev清除多余的文件:删除hello world.vue安装 vue-router npm install vue-router --save安装 element-ui...原创 2021-10-11 00:06:40 · 319 阅读 · 0 评论 -
【数据可视化从入门到精通】指南-发展史-数据可视化应用场景-发展前景-技术选型①
实战「慕课外卖」数据大屏基于 Vue 3.0 + EChart 4.0 开发前置学习具备javascript、html、css的基础具备Vue的使用基础了解npm和webpack的基本概念学习指南课程将分为四个主要阶段:基础阶段、数据报表项目、数据大屏项目和移动报表项目数据可视化应用场景什么是数据可视化?基本概念TIP数据可视化,是关于数据视觉表现形式的科学技术研究这个概念向我们传达了两个信息:数据可视化是一门学科数据可视化与数据和视觉有关数据可视化简单理解原创 2021-10-10 17:09:27 · 608 阅读 · 0 评论 -
【数据可视化从入门到精通】ECharts 基本概念:系列-dataset-组件-定位-单双多坐标系④
ECharts 基本概念: 系列系列(series)是指:一组数值映射成对应的图案例:多系列混合<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script> <style&g原创 2021-10-08 23:58:53 · 494 阅读 · 0 评论 -
【数据可视化从入门到精通】ECharts 入门案例:销售柱状图,进阶案例:多 ECharts 实例,自定义主题③
入门案例:销售柱状图代码<!DOCTYPE html><html> <head> <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script> <style> #chart { width: 800px; height: 400px; }原创 2021-10-08 23:38:23 · 539 阅读 · 0 评论 -
【数据可视化从入门到精通】WebGL入门②
WebGLWebGL(Web Graphics Library)是一种 3D 绘图协议,WebGL可以为 HTML5 Canvas 提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了,还能创建复杂的导航和数据视觉化。WebGL 案例分享案例1:3D 魔方案例2:化学模型案例3:3D 地球案例4:3D 大脑WebGL 绘制点<html> <body> <canvas id="canvas" wi原创 2021-07-24 12:40:00 · 973 阅读 · 0 评论 -
【数据可视化从入门到精通】svg入门入门②
svgSVG是一种基于 XML 的图像文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形入门案例:绘制点、矩形、直线和圆形<!DOCTYPE html><html> <head> </head> <body> <svg width="800" height="800"> <rect width="50" heig原创 2021-07-24 12:34:15 · 124 阅读 · 0 评论 -
【数据可视化从入门到精通】canvas入门:画图,高级应用:图片压缩算法实现②
canvascanvas 是 HTML5 的新特性,它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。入门案例:绘制点、矩形、直线和圆形<!DOCTYPE html><html> <head> </head> <body> <canvas id="canvas" width="800" height="800"></canvas> <script>原创 2021-07-23 22:30:12 · 189 阅读 · 0 评论