echarts可视化
文章平均质量分 51
echarts各类图表制作。贴详细代码,可私信问题。
越来越好。
不实心不成事,不虚心不知事。 不自是者博闻,不自满者受益。
展开
-
echarts时间轴应用
echarts时间轴应用的两种方法第一种,x轴设置type为value,然后还需要把x轴显示的时间戳通过格式化函数(formatter)转换为日期类型,series中的data转换为时间戳。数据类型一般较为常用的是二位数组的方式 如:[ ['时间戳','y轴值'],['时间戳','y轴值'] ] ; 第二种,x轴设置type为time(不需要转换X轴显示的...............原创 2021-01-04 10:48:04 · 26323 阅读 · 33 评论 -
echarts标域 markArea 层级问题
echarts标域块层级问题柱状图时,如果在series中某个data配置项里面设置标域marbikArea,这个marbikArea的层级默认是没有柱状图高的(导致marbikArea被柱状图遮盖),而且marbikArea没有层级这个概念。解决办法将此配置项添加属性 z:0...原创 2020-11-12 20:15:19 · 2813 阅读 · 0 评论 -
echarts双Y轴横向树状图实现(两个类目)
echarts双Y轴横向树状图实现(两个类目)效果演示效果演示(一个大类有好几个小类,等于就是小类的类目都不同)首先设置X为数值轴,Y轴为类目轴。 Y轴设置为数组,设置两个,其中小类的Y轴进行隐藏(注意隐藏时要设置X轴的文字大小,不然虽然显示了,但是文字依然会占据位置),然后将大类的轴线定位到左边来。 series中小类类目数据放在一起。剩下的大类通过设置宽度barWidth来尽兴分类(比如一共10个小类,那么100/10 = 10;每个小类宽度是10%,然后乘以要分的大类中有几个小类的...原创 2020-07-25 14:31:14 · 2580 阅读 · 6 评论 -
echarts tooltip被遮挡
echarts tooltip被遮挡在制作图表中,发现有时候tooltip会被线条遮挡或者被柱子折线遮挡,这种情况会偶尔出现,解决方案如下positions属性解决。 tooltip: { position:function(point,params,dom,rect,size){ dom.style.transform = 'translateZ(0)'; } }...原创 2020-07-06 18:39:48 · 3326 阅读 · 2 评论 -
echarts 标域 放大到一定程度时局部变为空白
echarts 标域 放大到一定程度时局部变为空白正常效果图 放大后 可以很清楚的看到,在放大到一定程度后,会出现留白现象。这个时候需要检查一下你的标域中的data值,如果设置了yAxis的话,要把这个设置删除掉。...原创 2020-01-04 13:27:25 · 684 阅读 · 0 评论 -
echarts x,y轴数据不一一对应时 折线图和柱状图的写法。
echarts x,y轴数据不一一对应时 折线图和柱状图的写法。根据官网和社区给出的demo来看,柱状图折线图等等,很多都是X,Y轴一一对应画出来的,比如 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] ...原创 2019-12-06 10:05:38 · 6505 阅读 · 0 评论 -
echarts手势缩放
echarts手势缩放,查看更详细的信息dataZoom属性,这个属性中的type有两个可选值,一个是inside,一个是slider,其中inside是默认的pc端支持鼠标滑动,移动端支持手势缩放,slider是加了一个滑动条。var option = { xAxis:{ type:"category", data:[...原创 2019-08-22 12:55:15 · 6868 阅读 · 14 评论 -
echarts仪表盘不靠边的解决办法
echarts仪表盘不靠边的解决办法仪表盘中,默认图表是水平垂直居中,如果要改外边距,用grid是不行的, 要用 center , center:['50%','50%'],第一个左,第二个上 一个整圆,要加起来小于等于359.9度,如果整360度,则开始点和结束点会重合。 series: [ { name: '外...原创 2019-08-21 21:22:25 · 3342 阅读 · 0 评论 -
echarts柱状图超过数值换颜色
echarts柱状图超过数值换颜色echarts树状图超过数值换颜色,在一个柱状图上根据值的多少显示不同的颜色。效果图预览地址 点击预览源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...原创 2019-08-06 14:40:42 · 9506 阅读 · 0 评论 -
初识antVG6
初识antVG6,简单的拖拽节点功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-06-05 10:42:31 · 4917 阅读 · 0 评论