稳住别慌 - 博客园

2020年12月26日

摘要：饼图常见效果显示数值：label、formatter 圆环的设置：radius:['50%','70%'] 设置内外半径不一样南丁格尔图：roseType: 'radius' 选中效果：选中模式：selectedMode:single\multiple 选中偏移量：selectedOffset 阅读全文

posted @ 2020-12-26 15:30 稳住别慌阅读(420) 评论(0) 推荐(0)

直角坐标系

摘要：直角坐标系中的常用配置直角坐标系图表：柱状图、折线图、散点图配置1：网格 grid grid是用来控制直角坐标系的布局和大小，x轴和y轴就是在grid的基础上进行绘制的。显示grid：show进行控制 grid的边框：borderWidth、borderColor grid的位置和大小：lef 阅读全文

posted @ 2020-12-26 13:59 稳住别慌阅读(993) 评论(0) 推荐(0)

散点图的常见效果

摘要：散点图的常见效果：气泡图效果：散点的大小不同（symbolSize）散点的颜色不同（itemStyle中的color）涟漪动画效果： type: "effectScatter", // 具有涟漪动画的散点图 showEffectOn: 'emphasis', // render每个散点渲染完阅读全文

posted @ 2020-12-26 11:05 稳住别慌阅读(736) 评论(0) 推荐(0)

散点图的基本实现scatter

摘要：散点图：散点图可以帮助我们推断出变量间的相关性。实现步骤：（1）Echarts最基本的代码结构：引入js文件，DOM容器，初始化对象，设置option （2）x轴数据和y轴的数据：二维数组数组1：[[身高1,体重1],[身高2,体重2],[身高3,体重3]...] （3）图表类型：在ser 阅读全文

posted @ 2020-12-26 10:34 稳住别慌阅读(579) 评论(0) 推荐(0)

2020年12月25日

折线图line

摘要：常见效果：标记：最大值、最小值（markPoint）；平均值（markLine）；标注区间（markArea）线条控制：线条平滑度smooth、线条风格lineStyle（曲线、点线、颜色进行控制）填充风格：areaStyle 紧挨边缘：boundaryGap（紧挨y轴要写在xAxis中）缩阅读全文

posted @ 2020-12-25 15:08 稳住别慌阅读(355) 评论(0) 推荐(0)

平行四边形按钮

摘要：生成一个平行四边形按钮，但按钮中的字体不是倾斜的 <button style="transform: skewX(-30deg);" @click='console.log(11)'><p style="transform: skewX(30deg);">按钮1</p></button> <butt 阅读全文

posted @ 2020-12-25 11:35 稳住别慌阅读(568) 评论(0) 推荐(0)

2020年12月24日

echarts通用配置

摘要：通用配置：指的是任何一种类型的图表都可以使用的配置。 1.通用配置title （1）文字样式：textStyle （2）标题边框：borderWidth、borderColor、borderRadius （3）标题位置：left、top、right、bottom title: { text: '期末阅读全文

posted @ 2020-12-24 16:30 稳住别慌阅读(458) 评论(0) 推荐(0)

柱状图bar

摘要：柱状图的特点：柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况常见效果 1.标记：markPoint ：最大值、最小值；markLine：平均值 series: [{ name: '语文', type: 'bar', // 标注最大值、最小值阅读全文

posted @ 2020-12-24 14:20 稳住别慌阅读(1210) 评论(0) 推荐(0)

echarts-demo

摘要： 1.数据可视化数据可视化主要目的：借助于图形化手段，清洗有效地传达与沟通信息。数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 2.Echarts （1）引入echarts.js （2）准备一个呈现图表的盒子（要有宽高）（3）初始化echarts实例对象（4）准备配阅读全文

posted @ 2020-12-24 11:39 稳住别慌阅读(905) 评论(0) 推荐(0)

2020年12月23日

实现背景图片的透明度，但是图片上的文字透明度不变

摘要：方法1 背景图+定位 <div class="btn1"> <div class="btn11"> <span>文字</span> </div> </div> .btn1 { width: 120px; height: 150px; background: url("../assets/1.jpg" 阅读全文

posted @ 2020-12-23 13:20 稳住别慌阅读(673) 评论(0) 推荐(0)