数据可视化

9. 创建echarts实例后进行配置： 10. （echarts组件均在series中独立配置） （1）.tooltip-提示组件 鼠标移动图标项上显示对应数据。 （2）.legend-图例切换组件

1.下载资源 新建项目 去官网下载echarts压缩包，在包里的dist文件里找到echarts.min.js文件 新建一个项目，创建lib文件夹存放echarts库文件，创建views文件夹存放页面

HTML体系中，最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。不过canvas更偏重于动画的制作。所以，绘制矢量图的大任落到了SVG身上。

4.1封装常用的绘制函数 4.1.1封装一个矩形 思考：我们用到的矩形需要哪些绘制的东西呢？ 1、矩形的 x、y坐标 2、矩形的宽高 3、矩形的边框的线条样式、线条宽度 4、矩形填充的样式 5、矩形的

3.8 了解：线条样式（了解） lineCap 设置或返回线条的结束端点(线头、线冒)样式 butt ： 默认。向线条的每个末端添加平直的边缘。 round ： 向线条的每个末端添加圆形线帽。 squ

3.3 绘制环境保存和还原（重要） ctx.save() 保存当前环境的状态 可以把当前绘制环境进行保存到缓存中。 ctx.restore() 返回之前保存过的路径状态和属性 获取最近缓存的ctx 一

3.3 变换（重点） 3.3.1 缩放（重点） scale() 方法缩放当前绘图，更大或更小 语法：context.scale(scalewidth,scaleheight) scalewidth :

3.1 Canvas颜色样式和阴影 3.1.1 设置填充和描边的颜色（掌握） fillStyle : 设置或返回用于填充绘画的颜色 strokeStyle: 设置或返回用于笔触的颜色 以上两个值都可以

2.6 绘制图片（drawImage） （重点） 2.6.1 基本绘制图片的方式 2.6.2 在画布上绘制图像，并规定图像的宽度和高度 2.6.3 图片裁剪，并在画布上定位被剪切的部分 2.6.4 用

2.5 绘制文字 2.5.1 绘制上下文的文字属性（会使用就可以了） font设置或返回文本内容的当前字体属性，使用的语法与CSS font属性相同。 例如：ctx.font = "18px '微软雅

2.4 绘制圆形（arc) arc() 方法创建弧/曲线（用于创建圆或部分圆）。语法：**ctx.arc(x,y,r,sAngle,eAngle,counterclockwise)**;r：半径大小；

2.3.7 填充(fill) 图2-14： 2.3.8 快速创建矩形 rect()方法 2.3.9 快速创建描边矩形和填充矩形 2.3.10 清除矩形(clearRect) —————————————

一、canvas 简介 1.1 什么是 canvas？ canvas是 HTML5 提供的一种新标签。 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 1.2 canvas 主要应用的领域