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
相关文章
|
4月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
12月前
|
JavaScript 前端开发
JS几种拼接字符串的方法
JS几种拼接字符串的方法
182 1
|
11月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
239 63
|
9月前
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
122 19
|
9月前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
153 13
|
10月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
11月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
91 2
|
12月前
|
算法 搜索推荐 Java
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
这篇文章介绍了如何使用Java后端技术,结合Graphics2D和Echarts等工具,生成包含个性化信息和图表的海报,并提供了详细的代码实现和GitHub项目链接。
675 0
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
|
JavaScript 前端开发
javascript创建字符串
javascript创建字符串
|
12月前
|
存储 JavaScript 前端开发
JavaScript 字符串(String) 对象
JavaScript 字符串(String) 对象
117 3