echarts配置:
(1)基本步骤
下载scharts并引入在html里
准备一个容器
初始化echarts实例对象
指定配置项和数据(option)
将配置项设置给实例对象
(2)相关配置
title:标题组件
tooltip:提示框组件
legend:图例组件
toolbox:工具栏
grid:直角坐标系内绘制网格(当刻度标签溢出的时候,grid区域是否包含坐标轴的刻度标签 如果为true,则显示
false为不显示;就是当left或right为0%时,则刻度标签会溢出,此时若要显示则为true)
containlabel:true/false;
- xAxis:直角坐标系grid中的x轴
- yAxis:直角坐标系grid中的y轴
- series:系列列表。每个系列通过type决定自己的图表类型()
series:[ { name:'邮件', type:'line',----为图标类型,折线图 stack:'总量',(默认y轴数据会依次叠加,需将该变量去除) data:[120,132,177,90] }, { name:'广告', type:'line', stack:'总量', areaStyle:{}, data:[220,165,123,40] } ]
每组数据表示一个折线
- color:调色盘颜色列表(数组)
边框图片:当不同部分的大小不同但是边框却一样时,则使用border-image
/*border里面的第一个数值为宽度,但是会挤压盒子里面的内容*/ border:15px solid pink; border-image-source:url(...) /*剪裁时按照上右下左 不需要加单位*/ border-image-width:30; /*这个属性默认值是border宽度,但是不会挤压盒子里面的内容*/ border-image-width:30px; /*默认值为边框拉伸,repeat会重复但是可能会有不完整图片,而round则是会铺满整个图片*/ border-image-repeat:round;
js截取字符串:区间为左闭右开
- substr方法 substr(start,length)–第一个为第一个字符的索引,第二个为长度
var now = 'ice-cream' var list = now.substr(2,5)----截取从索引号2开始截取5个字符 var tt = now.substr(2)---截取从索引号2一直到最后的字符 //e-cre // e-cream
- slice,substring方法 substring(from,to)—其中from指代要抽去的子串第一个字符在原字符串中的位置
to指代所要抽去的子字符串最后一个字符的后一位(这个参数可以不加)
//相同 var happy='sumoerbn' var list1=happy.splice(0)---获取整个字符串 var list2=happy.splice(1,4)---截取从索引号1到3的字符 var list3=happy.splice(2)---截取从索引号2一直到最后的字符 //不同,负数时 var list4.slice(2,-5);//返回"m";实际上是slice(2,3),负数加上字符串长度转换成正3,(若第一位 >= 第二位, 则返回空字符串); var list5.substring(2,-5);//返回"su"; 实际上是substring(2,0),负数都转换为0, substring把较小的数作为起始位置
split方法(可用于截取网址)
//将上个页面传的数据写入该页面中 uname后面的内容 //先获取网址内容 var list=location.search---获取到 ?uname=lalal //然后取?后面的内容,使用substr方法 var tt=list.substr(1)---获取到 uname=lalal //转变为数组 var arr=tt.split("=")---['uname','lalal'] //获取数组内容 var hh = arr[1] //lalal