重庆做网站费用,网络服务提供者不是网络运营者,上海网站设计哪家强,素米高端品牌网站建设四、SVG(了解) 1svg概述 (1)SVG，Scalable Vector Graphics是一种基于XML的语言，用于定义基于矢量的图形，提供了很多绘图的标签。 (2)作为矢量图像，SVG图像永远不会丢失质量，无论它们如何缩小或调整大小。 (3)SVG图像…

四、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 = movetoL = linetoZ = 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.绘制矩形 柱状图 --><!-- <rectx='100'y='100'width='100'height='100'fill='red'stroke-width='5'stroke='red'transform='rotate(40)'></rect> --><!-- 2.绘制圆形  图形标记 --><!-- <circlecx='250'cy='250'r='200'fill='red'></circle> --><!-- 3.绘制线段 指引线 --><!-- <line x1='20'y1='20'x2='200'y2='20'stroke='red'></line> --><!-- 4.绘制折线 polyline 绘制折线图 --><!-- <polylinepoints='50,100 200,200 250,150 300,250'fill='none'stroke='red'></polyline> --><!-- 5.绘制路径 path 折线图 饼图 扇形图  --><!-- <pathd="M0 0 L200 200 L0 200 z"></path> --><!-- 6.绘制文字 --><!-- 水平对齐：text-anchor:start  middle  end垂直基线对齐：dominant-baseline:text-after-edge  middle  text-before-edge --><!-- <linex1='100'y1='100'x2='500'y2='100'stroke='red'></line> --><!--        <textx='100'y='100'font-size='50'font-family="宋体"text-anchor="start"dominant-baseline="text-before-edge">hello</text><textx='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.使用渐变 --><!-- <rectx='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.使用渐变 --><!-- <circlecx='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 --saveimport * 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.html2.创建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 mindata:[{type:'max',name:'最大值'},{type:'min',name:'最小值'}]},markLine:{//设置标记线  averagedata:[{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.状图绑定点击事件 全部监听 onmyCharts.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();

重庆做网站费用/网络服务提供者不是网络运营者