一、上篇知识点总结
数据可视化常用工具
容器：canvas svg
插件：echarts highcharts charts d3
canvas标签
大小：300*150 单位px
坐标：起点左上角
canvas画图
画笔：canvas.getContext('2d');
绘制线段：moveTo() lineTo() strokeStyle stroke() fillStyle fill() lineWidth...
绘制矩形：rect() fillRect() strokeRect() clearRect()
绘制圆形：arc(x,y,r,startAng,endAng,bool) Math.PI（180） == π == 3.14
绘制文字：font fillText() strokeText() textAlign ....
绘制图片 drawImage() onload
canvas渐变
线性渐变：linearGradient(x1,y1,x2,y2)
径向渐变：radialGradient(cx1,cy1,r1,cx2,cy2,r2)
canvas变形
rotate(弧度) translate() scale() transform()
canvas状态保存和恢复
save() restore()
三、SVG(了解)
1svg概述
(1)SVG，Scalable Vector Graphics是一种基于XML的语言，用于定义基于矢量的图形，提供了很多绘图的标签。 (2)作为矢量图像，SVG图像永远不会丢失质量，无论它们如何缩小或调整大小。 (3)SVG图像支持交互和动画。
2 svg容器
2.1大小
默认大小也是300*150 单位px 可以通过width和height属性设置其大小或者css方式调整大小
2.2坐标
坐标同canvas,起点默认在画布的左上
3绘制基本图形
1.<rect> 绘制矩形
x,y 矩形绘制的起始位置、 width,height 矩形的宽高、fill颜色值 填充、stroke="颜色" 描边
stroke-width 线宽 、rx，ry 圆角大小
2.<circle> 圆形
cx,cy,r 圆心和半径
3.<line> 线
x1,y1 起始点 、 x2,y2 终点
4.<polyline> 折线
points 集合
="x1,y1 x2,y2 x3,y3 ..."
="x1 y1,x2 y2,..."
5.<path> 路径
d 路径数据
M = moveto
L = lineto
Z = closepath
.....
常用于绘制折线图 面积图
<path
d="M0 0 L200 200 L0 200 z"
fill="none"
stroke="red"
/>
6.<text> 文本
x="100"
y="100"
font-size="50"
fill="red"
font-family="宋体"
水平对齐：text-anchor:start middle end
垂直基线对齐：dominant-baseline:text-after-edge middle text-before-edge
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>svg</title>
<style type="text/css">
svg{background-color: #DDD;}
/* rect{fill:green} */
</style>
</head>
<body>
<!-- 大小：300*150（px） css -->
<svg width='500' height='500'>
<!-- 1.绘制矩形 柱状图 -->
<!-- <rect
x='100'
y='100'
width='100'
height='100'
fill='red'
stroke-width='5'
stroke='red'
transform='rotate(40)'
></rect> -->
<!-- 2.绘制圆形 图形标记 -->
<!-- <circle
cx='250'
cy='250'
r='200'
fill='red'
></circle> -->
<!-- 3.绘制线段 指引线 -->
<!-- <line
x1='20'
y1='20'
x2='200'
y2='20'
stroke='red'
></line> -->
<!-- 4.绘制折线 polyline 绘制折线图 -->
<!-- <polyline
points='50,100 200,200 250,150 300,250'
fill='none'
stroke='red'
></polyline> -->
<!-- 5.绘制路径 path 折线图 饼图 扇形图 -->
<!-- <path
d="M0 0 L200 200 L0 200 z"
></path> -->
<!-- 6.绘制文字 -->
<!-- 水平对齐：text-anchor:start middle end
垂直基线对齐：dominant-baseline:text-after-edge middle text-before-edge -->
<!-- <line
x1='100'
y1='100'
x2='500'
y2='100'
stroke='red'
></line> -->
<!-- <text
x='100'
y='100'
font-size='50'
font-family="宋体"
text-anchor="start"
dominant-baseline="text-before-edge"
>hello</text>
<text
x='300'
y='100'
font-size='50'
font-family="黑体"
text-anchor="start"
dominant-baseline="text-before-edge"
stroke='red'
stroke-width='2'
fill='none'
>world</text> -->
</svg>
</body>
</html>
4 线性渐变
id 唯一标识 x1,y1 渐变起始的位置 百分比 或者 0-1 小数 x2，y2 渐变结束的位置 1.创建线性渐变 <defs> <linearGradient id="linear1" x1='0%' y1='0%' x2='100%' y2='100%'> <stop offset="10%" stop-color="red" stop-opacity="0.6" /> 设置颜色 ..... </linearGradient> </defs> 2.使用渐变 <rect x="50" y="50" width="100px" height="100px" style="fill: url(#linear1);"></rect>
代码案例
<!-- <defs> -->
<!-- 1.创建线性渐变 -->
<!-- 角形线性渐变 垂直和水平同canvas-->
<!-- <linearGradient id="linear1" x1='0%' y1='0%' x2='100%' y2='100%'>
<stop offset="10%" stop-color="red" stop-opacity="0.6" />
<stop offset="40%" stop-color="blue" stop-opacity="0.3" />
<stop offset="80%" stop-color="orange" stop-opacity="1" />
<stop offset="100%" stop-color="pink" stop-opacity="0.8" />
</linearGradient> -->
</defs> -->
<!-- 2.使用渐变 -->
<!-- <rect
x='100'
y='100'
width='200'
height='200'
fill='url(#linear1)'
></rect> -->
5放射性渐变
id 唯一标识 cx,cy 外圆圆心位置 r 外圆半径 fx,fy 内圆圆心 1.创建线性渐变 <defs> <radialGradient id='radial' cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="10%" stop-color="red" stop-opacity="0.6" />设置渐变色 ..... </radialGradient> </defs> 2.使用渐变 <circle cx=250 cy=250 r=200 fill='url(#radial)'></circle>
代码案例：
<!-- <defs> --> <!-- 2.创建径向渐变 --> <!-- <radialGradient id='radial' cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="10%" stop-color="red" stop-opacity="0.6" /> <stop offset="40%" stop-color="blue" stop-opacity="0.3" /> <stop offset="80%" stop-color="orange" stop-opacity="1" /> <stop offset="100%" stop-color="pink" stop-opacity="0.8" /> </radialGradient> </defs> --> <!-- 2.使用渐变 --> <!-- <circle cx='250' cy='250' r='200' fill='url(#radial)' ></circle> -->
四、D3.js（了解）
1概念(数据驱动文档)
D3js(Data-Driven Documents),是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。 1.语法层面其借鉴了jquery的链式操作语法 2.D3主要通过svg来绘制图形 3.对开发者要求较高（偏底层），灵活性非常高（功能是一个一个的函数，可以自由组合，没有规则限制） 4.不同版本之间的兼容性比较差（向下兼容） 中文官方网址：https://www.d3js.org.cn/ 原官网（国外网站）：https://d3js.org/
2安装引用
一种是可以直接引入：
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
另一种是通过npm安装：
npm i d3@版本号 例如安装3版本：npm i d3@3
3D3基本操作
3.1元素选择
1.选择一个元素
d3.select(class|id|元素名称)
2.给元素赋值文本或者标签元素
d3.select().text()
d3.select().html()
3.选择多个元素
d3.selectAll((class|id|元素名称)
// 1.选择一个元素
// d3.select(class|id|元素名称)
// let div = d3.select('div');
// let div = d3.select('#box');
// let div = d3.select('.box');
// console.log(div);
// 2.给元素赋值文本或者标签元素
// d3.select().text()
// d3.select('div').text('我是div')
// d3.select().html()
// d3.select('div').html('<h1>我是标题</h1>')
// 3.选择多个元素
// d3.selectAll((class|id|元素名称)
// let ps= d3.selectAll('p');
// ps[0].forEach((item,index)=>{
// item.innerHTML = index
// })
3.2添加和删除元素
1.新增元素
d3.select().insert('新增元素标签名称','参考位置')
d3.select().append('新增元素')
2.删除元素
d3.select().remove()
// 1.新增元素
// d3.select().insert('新增元素标签名称','参考位置')
// d3.select('div').insert('h1','.p2').text('我是h1')
// d3.select().append('新增元素')
// d3.select('div').append('h2').text('我是h2')
// 2.删除元素
// d3.select().remove()
// d3.select('div').remove();
3.3添加属性
d3.select().attr('属性名称','属性值')
// d3.select().attr('属性名称','属性值')
// 在body中创建一个500*500的画布svg
// d3.select('body').append('svg')
// .attr('width',500)
// .attr('height',500)
3.4绑定数据
1.绑定数组到元素上
d3.selectAll().data()
2.绑定字符串到元素上
d3.selectAll().datum()
// 1.绑定数组到元素上
// d3.selectAll().data()
// let score = [90,60,80];
// d3.selectAll('p').data(score)
// .text((d,i)=>{
// console.log(d,i);
// return d
// })
// 2.绑定字符串到元素上
// d3.selectAll().datum()
// d3.selectAll('p').datum('hello')
// .text((d,i)=>{
// console.log(d,i);
// return d
// })
3.5根据绑定数据动态生成或者删除元素
1.动态创建元素
d3.selectAll().data().enter().append()
2.动态删除元素
d3.selectAll().data().exit().remove()
// 1.动态创建元素
// d3.selectAll().data().enter().append()
// 动态创建svg画布
// let svg = d3.select('body').append('svg')
// .attr('width',500)
// .attr('height',500)
// 根据学员的成绩动态绘制柱状图（rect:x y width height）
// let score=[70,90,60,100,50,80];
// svg.selectAll('rect').data(score).enter().append('rect')
// .attr('x',(d,i)=>{return 50*i})
// .attr('y',0)
// .attr('width',30)
// .attr('height',(d,i)=>{return d})
// .attr('fill','steelblue')
// 2.动态删除元素
// d3.selectAll().data().exit().remove()
let score=[90,100];
d3.selectAll('p').data(score).exit().remove();
五、Echarts.js
1Echarts概述
ECharts，一个使用 JavaScript 实现的开源可视化库，由百度商业前端数据可视化团队研发的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 官方网址：http://echarts.apache.org/zh/index.html echarts社区：https://www.makeapie.com/explore.html
2主要目的
借助图形化的手段，清晰有效地传达与沟通信息，揭示数据中的道理和规律.
3优势
(1)开源软件,提供了非常炫酷的图形界面,尤其是地图，同时还提供了柱状图、折线图、气泡图等。 (2)使用简单,底层用的是javascript封装,可以在html中嵌入图表，直接显示。 (3)兼容性好,基于html5,有着良好的动画渲染效果。
4.Echarts绘制基础柱状图
绘制步骤
1.引入echarts
第一种使用npm安装：
npm install echarts --save
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
第二种使用外链引入： <script src="./echarts.min.js"></script>
下载echarts.js文件以外链方式引入:
官方没有直接下载echarts.js文件这种形式，需要自定义生成echarts.js文件。
地址：https://echarts.apache.org/zh/builder.html
2.创建echarts实例 init()
3.设置绘制图表基本配置 option={图表配置}
4.执行绘图操作 setOption()
5.Echarts基础配置
① title标题组件，包含主标题和副标题
// 配置标题
title:{
link:'http://www.baidu.com',
text:'学生成绩表',
textStyle:{
fontSize:15,
color:'red'
},
subtext:'我是小标题',
subtextStyle:{
color:'steelblue'
},
borderWidth:1,
borderColor:'orange',
borderRadius:15,
left:80,
top:20
},
② xAxis 直角坐标系 grid 中的 x 轴
// 设置x轴
xAxis:{
name:'学员',
type:'category',
data:xData,
axisLine:{show:true},//是否显示坐标轴轴线
axisTick:{show:true},//是否显示坐标上的刻度
},
③ yAxis直角坐标系 grid 中的 y 轴
// 设置y轴
yAxis:{
name:'学科',
type:'value'
}
④ series 系列列表,每个系列通过 type 决定自己的图表类型
series:[
{
type:'bar',
data:yuwenData,
label:{// 配置描述文本
show:true,
rotate:40,
position:'top'
},
barWidth:40,//设置柱的宽度
itemStyle:{
barBorderRadius:[10,10,0,0],//柱状图圆角大小
//渐变颜色 了解
color:new echarts.graphic.LinearGradient(0,0,0,1,[
{
offset:0,
color:'red'
},{
offset:1,
color:'blue'
}
])
},
markPoint:{//设置标记点 max min
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
markLine:{//设置标记线 average
data:[
{type:'average',name:"平均值"}
]
}
}
]
⑤ tooltip提示框组件
// 提示
tooltip:{
show:true,
trigger:'axis',//触发类型
triggerOn:'mousemove',//触发条件
axisPointer:{//指示器
z:0,
type:'line',
lineStyle:{
width:60,
color:'#EEEEEE'
}
}
// formatter:'{a} {b} {c} ',
// formatter:function(param){
// // console.log(param[0])
// },
},
⑥ legend图例组件
//设置图例 配合series 中的name 使用
legend:{
show:true,
// data:['语文','数学'],
data:[
{
name:'语文',
icon:'circle'
},
{
name:'数学',
icon:'rect'
}
]
},
⑦ grid直角坐标系内绘图网格
grid:{
show:true,
left:80,
top:100,
width:'auto',
height:'auto',
containLabel:true//是否包含坐标轴文字描述
},
⑧ 横向柱状图
xAxis和yAxis的type正好相反即可
⑨ color 调色盘
// 调色盘 作用域关系： option.color < series.color < series.itemStyle.color
// 如果没有设置颜色则会依次循环从该列表中取颜色作为系列颜色。
// ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
color: ['orange', 'green', 'blue', 'skyblue', 'purple'],
⑩ toolbox工具栏,可以导出图片
// 工具配置
toolbox:{
show:true,
feature:{
saveAsImage:{},//保存图片
dataZoom:{},//视图区域缩放
dataView:{},//数据视图工具
restore:{},//重置刷新
magicType:{//图形切换
type:['bar','line']
}
}
},
⑪ echarts事件
// 1.状图绑定点击事件 全部监听 on
myCharts.on('click', function (arg) {
console.log(arg)
console.log('click...')
}) // 对事件进行监听
// 2.柱状图绑定点击事件 监听系列是语文的柱状图
myCharts.on("click",{seriesName:"语文"},(e)=>{
let { name,value } = e;
console.log(name,value)
})
// 3.click的事件 接触后无法触发以上click事件
// myCharts.off('click')
// 4.窗口的变化动态改变图表大小（以下是简写方式）
window.onresize = myCharts.resize;
//5. myCharts.showLoading(); myCharts.hideLoading();