可视化工具
文章平均质量分 77
drunk喵咪
学习这件事,不是缺乏时间,而是缺乏努力。
展开
-
google charts
google echarts使用的时候,引入的包比echarts小//在html中引入方式 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>//在项目中引用npm install chart.jsgoogle echarts<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-原创 2021-08-18 13:46:04 · 684 阅读 · 0 评论 -
使用v-chart遇见的问题
v-chart 无数据时图表不显示的解决方案双y轴刻度对齐,规定数据与右边y轴对齐<template> <div id="app"> <ve-histogram :data="histogramData" class="sss" :settings="chartSettings" :y-axis="yAxis" :extend="option" ></ve-h原创 2020-08-16 09:59:58 · 497 阅读 · 0 评论 -
svg入门笔记
位图:由像素点组合成图像 canvas矢量图:以数学向量方式记录图像,内容以线条和色块为主. svgsvg是基于xml的技术文件后缀.svg<svg></svg>是最外层的根结点xmlns定义svg命名空间<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DT原创 2020-12-07 17:49:19 · 129 阅读 · 0 评论 -
二维绘图引擎ZRender
1、描述ZRender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。2、下载ZRender 项目在 gitHub ,也可以使用 npm install zrender 下载。在 dist 目录下找到 zrender.js 和 zrender.min.js,前者是开发版,后者是发布版。3、初始化 ZRender在使...原创 2019-12-13 16:49:27 · 3222 阅读 · 1 评论 -
可视化工具d3(v5)教程
1、用D3更改Hello World <html> <head> <meta charset="utf-8"> <title>HelloWorld</title> <script src="http://d3js.org/d3.v3.mi...原创 2019-12-13 10:48:59 · 1659 阅读 · 0 评论 -
d3入门
d3的安装npm install d3 --save在需要的文件中导入import * as d3 from "d3"向svg中填充图形<template> <div class="dthreeAppend"> <p class="title">This is a d3</p> <svg xmlns...原创 2019-12-11 17:59:18 · 299 阅读 · 0 评论 -
d3.js中v3到v4、v5因版本问题报错
在d3js v4版本以后中的线性比例尺不再使用d3.scale.linear()。而是使用d3.scaleLinear()来代替它。即将 let linear=d3.scale.linear() .domain([min,max]) .range([0,300]); 改为let linear=d3.scaleLine...原创 2019-12-11 16:15:12 · 2753 阅读 · 2 评论 -
eCharts
npm安装eCharts npm install echarts -S在需要用图表的地方引入import echarts from 'echarts'或在main.js中import echarts from 'echarts'和 Vue.prototype.$echarts = echarts属性:type:图形类型name:系列名称,用于tooltip的显示,legend的图例筛选,...原创 2019-12-10 11:57:30 · 660 阅读 · 0 评论