稳住别慌 - 博客园

2021年2月4日

摘要： <rich-text :nodes="graphicDetails"></rich-text> 获取到后台返回的字符串后将大于号小于号替换回来，将图片的宽度设置为100% // 富文本部分反解析 UnchangeContent(str) { return str ? str.replace(/&lt 阅读全文

posted @ 2021-02-04 11:00 稳住别慌阅读(872) 评论(0) 推荐(0) 编辑

2021年1月16日

给style里面的样式进行动态绑定

摘要： <div :style="{backgroundColor:item.color}"></div> :style="{ backgroundImage: 'url(' + item.storeThumbnail + ')' }" 阅读全文

posted @ 2021-01-16 22:29 稳住别慌阅读(781) 评论(0) 推荐(0) 编辑

2020年12月29日

交互API

摘要：全局echarts对象：全局echarts对象是引入echarts.js文件之后就可以直接使用的。 init：初始化echarts实例对象，使用主题。 echarts.registerTheme：注册主题的时候使用。 registerMap：（1）注册地图数据 $.get('json/map/c 阅读全文

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

Echarts动画的使用

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

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

echarts图表的自适应

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

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

2020年12月28日

echarts样式的配置

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

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

echarts调色盘的使用

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

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

Echarts主题相关的使用

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

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

Echart基础小结

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

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

仪表盘gauge

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

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