可视化
可视化相关知识点,Canvas、echarts、webGL、three.js
深海有鱼呀
永远年轻,永远热泪盈眶
展开
-
Echarts--初步学习
一、根据官网下载echarts引入<script src="echarts.min.js"></script>二、定义图表显示区域 <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="main" style="width: 600px;height:400px;"&g...原创 2020-06-19 16:59:06 · 73 阅读 · 0 评论 -
Echarts--省地图
```javascriptthis.myChart2 = window.Echarts.init(document.getElementById('china')); let data=this.mapdata this.myChart2.setOption({ // 进行相关配置 backgroundColor: "#fff", ...原创 2020-06-19 16:57:15 · 137 阅读 · 0 评论 -
Echarts--市地图
```javascript```javascript```javascript```handlebars```javascriptthis.myChart2 = window.Echarts.init(document.getElementById('china')); var geoCoordMap = { '海门': [121.15, ...原创 2020-06-19 16:57:05 · 1030 阅读 · 0 评论 -
Echarts--tabs切换图表宽度显示为100px问题
用echarts时碰到了宽度不灵的问题。但是之前明明是好用的,具体问题是,我设置的width:100%,结果出来的时候就变成了100px;查了资料后发现,是因为我把图放到了tab选项卡里,因为图一开始是display:none;在一开始初始化执行js的时候找不到这个元素,所以会出现问题。解决方法就是,在echarts初始化之前再用js获取当前屏幕的大小,然后再给他设置宽度就可以了。var myC...原创 2020-06-19 16:54:37 · 935 阅读 · 0 评论 -
Echarts--动态修改容器高度
实例完后加上let myChart = window.Echarts.init(document.getElementById(“terminal_echarts”)); this.autoHeight = this.counts * 80 + 50; // counst.length为柱状图的条数,即数据长度。 myChart.getDom().style.height = this....原创 2020-06-19 16:53:28 · 1113 阅读 · 0 评论 -
Echarts--限制y轴文本长度
yAxis : [ { type : 'category', data : ['场景选择一个','6','5','4','3','2','1'], axisLabel : { color: "blue", formatter:function (value) ...原创 2020-06-19 16:45:03 · 1607 阅读 · 0 评论 -
Echarts--饼图改半圆扇形图
/**@data: series中的data数据*@legend:图例数据*@name: 标题*/function pieCharts(data, legend,name) { //计算data中value的总和 var a = 0; for (var i = 0; i < data.length; i++) { a += parseFloat(data[i].value); } //添加新的元素到data中,并设置其颜色样式为白色原创 2020-07-04 16:03:29 · 1301 阅读 · 0 评论 -
Echarts--x轴文本过长,设置超出隐藏显示省略号,鼠标悬浮上显示全部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!--引入js转载 2020-07-29 16:03:44 · 10972 阅读 · 2 评论 -
Echarts--简单图表封装
/* 折线*@data: Array y轴折线名称*@selected: Object {'次日留存率':true,'3日留存率':true,'7日留存率':false} 某条折现是否显示 *@xAxis: Array x轴数据 xAxis: ["05/18", "05/19", "05/20", "05/21", "05/22", "05/23"] *@series:Array n条折线数据 series: [{name: 7日留存, data: ["0.00", "0.00", "0.0原创 2020-07-29 16:07:37 · 253 阅读 · 0 评论 -
Echarts--折线图便签上下交错
1、换行和设置distance来达到一上一下的效果series: [{ data: [820.25656, 932.3657, 901.58487, 934.25648, 1290.2645, 1330, 1320], type: 'line', label:{ show:true, position:'top', distance:-28, formatter:function(value){ let valueType if(value.dataIndex%2!=0)原创 2020-12-02 11:59:37 · 934 阅读 · 0 评论 -
Echarts--Y轴只显示整数或保留n位小数
yAxis: [ { type: ‘value‘, minInterval: 1//只显示整数 } ],yAxis: [ { type: ‘value‘, minInterval:...原创 2020-06-19 16:43:02 · 922 阅读 · 0 评论 -
Echarts--动态设置图例和数据(折线)
重点:legend里的data和selectedlineChartData: { color:['rgba(84,127,229,1)','rgba(54,195,155,1)','rgba(167,140,222,1)','rgba(38,198,217,1)','rgba(238,110,115,1)','rgba(254,178,116,1)'], ...原创 2020-06-19 16:33:25 · 2539 阅读 · 0 评论 -
Echarts--数据可视化全解注释(记录地址)
https://blog.csdn.net/luanpeng825485697/article/details/76691965原创 2020-06-19 16:12:49 · 117 阅读 · 0 评论 -
Canvas--线、网格、折线
什么是Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。路径的绘制- 描边 stroke()- 填充 fill()- beginPath() 开启新路径- closePath(); 使用canvas的自动闭合 自动闭...原创 2020-06-19 16:44:45 · 295 阅读 · 0 评论 -
canvas--圆形倒计时
<canvas width="500px;" height="400px;" id="canvas"></canvas> <div class="canvas-djs"> </div> <script> //canvas 倒计时 var canvas2 = document.getEleme...原创 2020-06-19 16:44:29 · 213 阅读 · 0 评论 -
canvas--条形进度条
原创 2020-06-19 16:44:08 · 278 阅读 · 0 评论 -
canvas--圆形进度条
<canvas id="canvas" width="800" height="800" style="border:1px solid #ccc"></canvas><script> const can = document.getElementById('canvas'); const van = can.getContext('2d')...原创 2020-06-19 16:43:57 · 250 阅读 · 0 评论