![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
前端内容
Dove_1234
这个作者很懒,什么都没留下…
展开
-
06ECharts中的事件和行为
用户在操作 Echarts 的图表时会触发相应的事件,这些事件由开发者监听,然后回调函数做出相应的处理,可以弹出一个对话框、跳转到一个地址或者做数据下钻等等。ECharts 3 中绑定事件跟 Echarts 2 一样都是通过 on 方法,不同的是事件名称更加简单。ECharts 3 中,事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例:// 处理点击事件并且跳转到相应的百度搜索页面myChart.on('click', function (params) { w原创 2020-10-06 15:32:06 · 399 阅读 · 1 评论 -
01ECharts快速上手
第一步:引入echart.js<!DOCTYPE html><html><head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script></head></html>第二步:准备容器<body> <!-- 为 EChart原创 2020-09-28 10:45:14 · 185 阅读 · 0 评论 -
02ECharts自定义图形样式
Echarts 可以自定义配置选项;Echarts 设置数据图形的样式可以从三个层级入手,分别是:全局、系列、数据。// 简单的饼状图 option2 = { series: [ { name: '访问来源', type: 'pie', radius: '55%', roseType: 'angle', // 显示成南丁格尔图原创 2020-09-28 11:58:38 · 2317 阅读 · 0 评论 -
03ECharts实现异步数据加载和更新
前面教程,在初始化后的 setOption 中直接填入数据的,但大部分的时候我们需要将数据异步加载后再填入。那么怎么实现?ECharts 中实现异步数据的更新的操作不难,在初始化图表后的任何时间通过使用 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项即可。我们一般,先设置好别的样式,显示出一个空的直角坐标轴,然后获取并填入数据,操作如下:<!DOCTYPE html><html><head> <meta charset="原创 2020-09-28 14:17:50 · 920 阅读 · 0 评论 -
07ECharts 自定义系列
什么是 ECharts 自定义系列?自定义系列(custom series)是一种系列的类型,它能够让用户定制渲染逻辑,在已有的坐标系中创造新的图表;并且增强了极坐标柱状图、自定义维度映射、dataZoom 等 。自定义系列(custom series)它把绘制图形元素这一步留给开发者去做,从而开发者能在坐标系中自由绘制出自己需要的图表。ECharts 为什么会支持自定义系列?由于图表的类型多种多样,要让 ECharts 内置支持所有类型的图表是很难的,有很多小众的需求 ECharts 并不能内置的原创 2020-10-06 17:11:31 · 2021 阅读 · 1 评论 -
ECharts中y轴怎么反向与留白
使用 ECharts 时同样也要注意所设置的 y 轴是否是个反向轴,这通过 yAxis.inverse 就可以得知;并且还需要适当的给坐标轴做留白处理,这样会方便之后的一些操作,但是对于类目型与非类目型的坐标轴,有不同的留白策略。yAxis.inverse | boolean[ default: false ]可以得出 y 轴是否是反向坐标轴。该属性是 ECharts 3 中新加的。yAxis.boundaryGap | boolean, Array设置 y 坐标轴两边留白策略原创 2020-10-12 10:12:21 · 2165 阅读 · 0 评论 -
04ECharts在图表中加入交互组件
ECharts 有很多的交互组件,例如:图例组件 legend标题组件 title视觉映射组件 visualMap数据区域缩放组件 dataZoom时间线组件 timeline这里我们不一一讲解每个组件的加入,只通过介绍加入 数据区域缩放组件 dataZoom 就可以掌握 Echarts 交互组件的加入操作。介绍 Echarts 数据区域缩放组件(dataZoom)数据可视化的基本交互需求是:概览数据整体,按照需要关注数据细节。dataZoom 组件完美的在直角坐标系(grid)、极坐原创 2020-10-06 11:49:28 · 244 阅读 · 0 评论 -
table、tr、td表格的行、单元格等属性说明
<table>标签定义HTML表格。简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。tr元素定义表格行,th元素定义表头,td元素定义表格单元格。<table>标签常见的可选属性有:1. align:规定表格相对周围元素的对齐方式,取值有left、center、right;2. border:规定表格边框的宽度,取值为像素;3. width:规定表格宽度,取值为像素或者百分比;4. frame:规定表格外侧边框的哪个部分是可见的。取值转载 2020-09-29 10:52:16 · 4529 阅读 · 0 评论 -
html折叠框实现【查看】&【收起】转换
折叠框html实现<!-- 折疊顯示框--> <div class="panel-group" id="accordion"> <div class="panel panel-default" style="padding-bottom:10px"> <div class="panel-heading"> <h4 class="pane原创 2020-07-24 09:20:38 · 1334 阅读 · 0 评论 -
HTML中jquery控制button按钮可点击、不可点击
1.首先来说button按钮不可点击1.1第一种(html代码中控制)<button id="button_id" disabled="disabled">按钮不可点击</button>1.2第二种(jquery控制)$("#button_id").attr('disabled',true);2.按钮可点击2.1第一种(html代码中控制,默认)<button id="button_id">按钮可点击</button>.转载 2020-07-20 17:15:04 · 560 阅读 · 0 评论 -
一、<a>标签如何实现下载
实习期间负责的第一个项目:广东互联网协会官网。其中有一个很常见的功能----点击下载。页面截图在此之前,我所认识的<a>标签只是用于页面跳转的,实现文件下载是如何做到的呢?答案是:使用href与download属性<a href="http://image.gdis.cn/files/201809171147055.doc" download="协会团体会员入会申请表"></a>关于兼容性问题:我在Chrome 68.0、O...转载 2020-07-29 09:13:30 · 2954 阅读 · 0 评论 -
解决bootstrap-table只能被调用一次的问题
问题:通过设置查询条件,触发bootstrap-table ajax后端请求后,再次触发不再进行请求原因:应该是,ajaxQuest检测到有表格数据存在,不再进行数据请求解决方案:在初始化table之前,要将table销毁,否则会保留上次加载的内容$("#table").bootstrapTable(‘destroy’);注意:表格id容易忘记替换,需要检查...原创 2020-07-23 10:29:03 · 626 阅读 · 0 评论 -
BootStrap-Table参数、事件、方法
表格参数名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格。 classes data-classes String 'table table-hover' 表格的类名称。默认情况下,表格是有边框的,你可以添加 'table-no-bordered' 来删除表格的边框样式。 sortClass data-sort-class..转载 2020-07-23 10:20:27 · 478 阅读 · 0 评论