稳住别慌 - 博客园

2020年12月29日

摘要：加载动画的显示与隐藏： Echarts已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可。显示加载动画：myCharts.showLoading() 隐藏加载动画：myCharts.hideLoading() 增量动画的使用：不管是更改数据还是增加数据都要通过 myCharts. 阅读全文

posted @ 2020-12-29 17:26 稳住别慌阅读(9146) 评论(0) 推荐(0)

echarts图表的自适应

摘要：自适应：当浏览器的大小发生变化的时候，想让图表也能随之适配变化。（1）监听窗口大小变化事件（调用echarts组件时，多个echarts图表的自适应问题） window.addEventListener("resize", () => { myEcharts.resize(); }); （2）在事阅读全文

posted @ 2020-12-29 14:22 稳住别慌阅读(7432) 评论(0) 推荐(0)

2020年12月28日

echarts样式的配置

摘要：直接样式：itemStyle、textStyle、lineStyle、areaStyle、label 高亮样式：在 emphasis 中包裹 itemStyle、textStyle、lineStyle、areaStyle、label 注意：这些样式的优先级高，会覆盖主题中、调色盘的效果 <scrip 阅读全文

posted @ 2020-12-28 17:19 稳住别慌阅读(452) 评论(0) 推荐(0)

echarts调色盘的使用

摘要：（1）调色盘：它是一组颜色，图形、系列会自动从其中选择颜色。调色盘原则：就近原则。主题的调色盘：是引入的js文件中 echarts.registerTheme 中的color 全局的调色盘： option:{ color:['red','green','blue',...], } <script 阅读全文

posted @ 2020-12-28 16:53 稳住别慌阅读(1603) 评论(0) 推荐(0)

Echarts主题相关的使用

摘要：内置主题： Echarts中默认内置了两套主题：light、dark。在初始化对象方法init中可以指明主题方式： var myChart = echarts.init(document.getElementById('main'), 'dark'); var myChart = echarts. 阅读全文

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

Echart基础小结

摘要： 1.各个图表的英文单词： bar：柱状图 line：折线图 scatter/effectScatter：散点图/涟漪动画的散点图 pie：饼图 map：地图 radar：雷达图 gauge：仪表盘 2.每个图表的使用场景：（1）柱状图：描述的是分类的数据，呈现的是每个分类中有多少（最大值、最小值、阅读全文

posted @ 2020-12-28 12:01 稳住别慌阅读(509) 评论(0) 推荐(0)

仪表盘gauge

摘要：仪表盘主要用在进度把控以及数据范围的检测实现步骤：（1）Echarts最基本的代码结构引入js文件，DOM容器，初始化对象，设置option （2）准备数据，设置给series下的data data:[{value:97}] （3）图表类型在series下设置 type: "gauge" 常阅读全文

posted @ 2020-12-28 11:43 稳住别慌阅读(1158) 评论(0) 推荐(0)

雷达图radar

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

posted @ 2020-12-28 11:29 稳住别慌阅读(837) 评论(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 稳住别慌阅读(3312) 评论(0) 推荐(0)

地图的基本实现

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

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