echarts配置项,边框图片,js截取字符串

简介: echarts配置项,边框图片,js截取字符串

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
相关文章
|
1月前
|
JavaScript 前端开发
JS几种拼接字符串的方法
JS几种拼接字符串的方法
47 1
|
3月前
|
存储 JavaScript 前端开发
JS上传文件(base64字符串和二进制文件流)
这篇文章介绍了两种JavaScript文件上传的方法:使用FileReader对象将文件读取为base64字符串上传,以及使用FormData对象以二进制文件流的形式上传文件,包括如何处理文件选择、读取和上传的详细代码示例。
428 2
JS上传文件(base64字符串和二进制文件流)
|
2月前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
68 5
|
1月前
|
算法 搜索推荐 Java
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
这篇文章介绍了如何使用Java后端技术,结合Graphics2D和Echarts等工具,生成包含个性化信息和图表的海报,并提供了详细的代码实现和GitHub项目链接。
103 0
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
|
1月前
|
存储 JavaScript 前端开发
JavaScript 字符串(String) 对象
JavaScript 字符串(String) 对象
40 3
|
2月前
|
JavaScript 前端开发
javascript创建字符串
javascript创建字符串
|
2月前
|
JavaScript 前端开发
如何在JavaScript中替换字符串:一篇详细指南
如何在JavaScript中替换字符串:一篇详细指南
|
2月前
|
存储 JavaScript
js切割截取字符串方法
js切割截取字符串方法
46 2
|
2月前
|
Web App开发 JavaScript 前端开发
JavaScript 模板字符串
JavaScript 模板字符串
27 3
|
2月前
|
存储 JavaScript 前端开发
JavaScript 字符串
JavaScript 字符串
21 2