vvv3171071的博客

本次需求中UI提供的设计图的一个模块：开发页面过程中写该模块样式时还原出的效果：实现方法：在的里进行配置：2、tooltip的文本框：这部分没有特供的配置属性，直接用配合超文本的形式进行样式加工：这边值得一提的是CSS中的backdrop-filter这个属性，在案例中实现了一个模糊滤镜的效果该属性的各项配置效果具体可参考该文章：css的backdrop-filter未来有时间再好好研究下这个属性并将经验输出成文章分享给大家~THX！

算是一个比较偏门的需求吧，具体UED给的设计图效果如下：看起来非常简单，但实际实现起来……也确实简单，就是步骤多一点~我们知道Echarts提供的markPoint标注最大值和最小值是会有一个水滴图案的：首先要做的就是隐藏这个水滴图案。但如果将markPoint.symbol设为’none’，会将label文本一同去除。所以思路应为将水滴图案的颜色置为透明。

本篇文章比较浅显，主要写给想要快速直接上手数据可视化带Echarts图表项目的新人们。1、实例化图表：setOption(Object option)Object类型的参数 option，表示图表数据结构 ，形如：var option = { title: { text: "我的第一个ECharts图表示例" }, tooltip: {

①. 首先介绍一下window.onresize，这个方法可以监听窗口变化。将window.onresize写在mounted中，在窗口变化时就会执行它的内容。如： mounted() { window.onresize = () => { console.log("窗口发生变化时会打印该条"); }; },②. 接下来，只要在window.onresize中写入重新绘制echarts的逻辑就OK了echarts自带resize这个API，即.

注：是适应不是自适应，指移动端不同尺寸的手机下，为了让canvas宽高能根据外层盒子的大小进行匹配，而非自适应（让canvas随外层盒子大小变化实时自变化）。场景：案例采用的是阿里的AntV F2图表库html：<!-- 环形饼图开始 --><div class="bingtu" id="huanjing"> <div class="chart"> <canvas id="container" :height="chartHeight" :