稳住别慌 - 博客园

2020年12月28日

摘要：雷达图实现步骤：（1）Echarts最基本的代码结构引入js文件，DOM容器，初始化对象，设置option （2）定义各个维度的最大值 indicator:[{name:''易用性",max:100},...] （3）准备具体产品的数据 data:[{name:"华为手机1",value:[80 阅读全文

posted @ 2020-12-28 11:29 稳住别慌阅读(727) 评论(0) 推荐(0) 编辑

2020年12月26日

地图的常见效果（显示某个区域、让不同城市显示不同颜色、地图和散点图结合）

摘要： 1.显示某个区域步骤：（1）加载该区域的矢量地图数据（2）通过registerMap注册到echarts全局对象中（3）指明geo配置下的type和map属性（4）通过zoom放大该区域（5）通过center定位中心点 <script src="lib/echarts.min.js"></ 阅读全文

posted @ 2020-12-26 17:07 稳住别慌阅读(2956) 评论(0) 推荐(0) 编辑

地图的基本实现

摘要：地图图表的使用方式（1）百度地图API 需要申请百度地图的ak （2）矢量地图需要准备矢量地图的地图数据矢量地图的实现步骤：（1）Echarts最基本的代码结构：引入js文件，DOM容器，初始化对象，设置option （2）准备中国的矢量地图json文件，放到json/map/的目录下 c 阅读全文

posted @ 2020-12-26 16:44 稳住别慌阅读(193) 评论(0) 推荐(0) 编辑

饼图的常见效果 map

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

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

直角坐标系

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

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

散点图的常见效果

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

posted @ 2020-12-26 11:05 稳住别慌阅读(654) 评论(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 稳住别慌阅读(511) 评论(0) 推荐(0) 编辑

2020年12月25日

折线图line

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

posted @ 2020-12-25 15:08 稳住别慌阅读(303) 评论(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 稳住别慌阅读(470) 评论(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 稳住别慌阅读(390) 评论(0) 推荐(0) 编辑