随笔分类 -  eharts

echarts 关系图 与节点显隐的切换事件实例
摘要：如标题所言，echarts可以用来绘制关系图，效果图如下： 实例如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>关系图</title> <script src="js/echarts.min.js"></script> 阅读全文
posted @ 2022-07-14 15:51 逸凨 阅读(1444) 评论(0) 推荐(0)
echarts 图例文字颜色与图例一致的配置，以及图例文字多种颜色的配置
摘要：echarts 中 图例文字的颜色默认是黑色，通常我们配置图例文字颜色有两种方式： 一、在lengend 中配置data属性，data里面定义各图例的文本，以及该文本对应的样式，这里的文本就与option中的series中的data 重复了，【echart实际上的图例数据是根据series中的dat 阅读全文
posted @ 2021-09-18 11:34 逸凨 阅读(25180) 评论(0) 推荐(5)
echarts 地图飞线实例
摘要：效果图 demo实例: <template> <div ref="main" style="width: 1920px; height: 1080px; border: 1px solid #ddd"></div> </template> <script> import * as echarts f 阅读全文
posted @ 2021-09-13 11:31 逸凨 阅读(3511) 评论(0) 推荐(0)
echarts 绘制地图 区分外边界线与内边界线
摘要：echarts 中并没有封装对 地图 区分内外边界线的样式，只有统一的边界样式，所以我们换个思路，绘制2个图层，在底层图层中设置边界线的样式【该边界线为外边界线】，在上层图层中设置边界线的样式【该边界线为内边界线】这样就可以满足 【原理：上层的图层会覆盖底层的图层，所以地图的内边界线只会显示上层图层 阅读全文
posted @ 2021-09-07 17:29 逸凨 阅读(3994) 评论(0) 推荐(0)
echarts 地图标注打点使用本地自定义图片
摘要：echarts 中 symbol参数设置 标记打点的图形。 ECharts 提供的标记类型包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'【圆形、矩形、圆角矩形、三角形、菱形、大头针型像水滴 阅读全文
posted @ 2021-09-02 11:18 逸凨 阅读(5112) 评论(0) 推荐(0)
echarts 图例文本太长、或者数量太多溢出的处理
摘要：根据项目需要，有时从后端取出来的图例数据太多，文本又太长，那么在展示上就不是那么完美，这时就需要对图例进行处理,效果图见下面1中的截图： 1、图例数据太多： 解决方法：echarts中已经封装了对图例的分页处理：在lengend中加入type: "scroll"即可，图例会自动根据容器的宽或高对图例 阅读全文
posted @ 2021-07-07 11:38 逸凨 阅读(19891) 评论(2) 推荐(0)
设置饼图内的空心中间位置处设置固定的label 文本，不会随鼠标移动到饼图模块的切换hover效果而显示对应的label文本数据
摘要：如上图，在echarts的官方案例中，当鼠标移动到邮件营销模块上时，中间的文本会根据series下的data来显示对应项的name值， 从上面可以看出，如果要在饼图内的空心中间位置处设置固定的label 文本，不会随鼠标移动到饼图模块的切换hover效果而显示对应的label文本数据，那么只要将上图 阅读全文
posted @ 2021-07-02 10:47 逸凨 阅读(2096) 评论(0) 推荐(0)
echarts 图例配置监听事件实现链接跳转
摘要：首先在 ECharts 中主要通过 on 方法添加事件处理函数，而echarts图表中封装了切换图例选中状态后的事件函数： legendselectchanged。【简单的说就是点击、切换图例的时候会调用legendselectchanged函数】，所以当我们需要对点击切换图例做一些js操作时，可以 阅读全文
posted @ 2021-07-01 17:09 逸凨 阅读(2612) 评论(0) 推荐(0)
echarts 图表的内容的轮播
摘要：第一种：官网提供的方法：dispatchAction和on事件（tooltip + 定时器 方式） init(id) { var myChart = echarts.init(document.getElementById(id)) var option = { title: { text: '饼图 阅读全文
posted @ 2020-10-27 11:41 逸凨 阅读(2783) 评论(1) 推荐(0)
echarts-----渐变色横向柱状图
摘要：效果图： 代码如下： option = { tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "shadow" // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: "4 阅读全文
posted @ 2020-10-16 15:10 逸凨 阅读(2409) 评论(0) 推荐(0)
echarts ----渐变色曲线图表demo
摘要：效果图如下 代码如下：option = { xAxis: { //name: '日期',//y轴名称 nameGap: 30, type: 'category', boundaryGap: false, //设置x轴的刻度坐标展示数据，会覆盖series中数据的name属性【也是设置x轴的刻度坐标的 阅读全文
posted @ 2020-10-16 11:50 逸凨 阅读(2010) 评论(0) 推荐(0)