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
相关文章
|
6天前
|
数据采集 算法 JavaScript
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
JavaScript字符串搜索涵盖`indexOf`、`includes`及KMP算法。`indexOf`返回子字符串位置,`includes`检查是否包含子字符串。KMP是高效的搜索算法,尤其适合长模式匹配。示例展示了如何在数据采集(如网页爬虫)中使用这些方法,结合代理IP进行安全搜索。代码示例中,搜索百度新闻结果并检测是否含有特定字符串。学习这些技术能提升编程效率和性能。
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
|
4天前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
6天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
11 1
|
6天前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
8 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
7 0
|
4天前
|
JavaScript
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
|
4天前
|
JavaScript
js 滚动鼠标滑轮放大缩小图片
js 滚动鼠标滑轮放大缩小图片
5 0
|
4天前
|
JavaScript
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
7 0
|
4天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
15 0
|
5天前
|
存储 JavaScript 前端开发

热门文章

最新文章