关于前端绘制图形的⼀些⽅法（SVG，D3，Echarts）、
Echarts的使⽤
⼀、上篇知识点总结
数据可视化常⽤⼯具
容器：canvas  svg
插件：echarts  highcharts  charts  d3
canvas标签
⼤⼩：300*150  单位px
坐标：起点左上⾓
canvas画图
画笔：Context('2d');
绘制线段：moveTo()  lineTo()  strokeStyle  stroke()    fillStyle  fill() 
绘制矩形：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'
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> -->
svg图形<!--        <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'
>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" ></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.使⽤渐变
代码案例：
<!-- <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.不同版本之间的兼容性⽐较差（向下兼容）
中⽂官⽅⽹址：/
原官⽹（国外⽹站）：/
2安装引⽤
⼀种是可以直接引⼊：
<script src="/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.选择多个元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。