jiurikeai的博客

格式化后小圆点去哪了。在tooltip配置的格式化formatter后，默认的小圆点会消失。其实他在formatter的参数中的marker属性中。因此，我们在格式化tooltip文字展示时，可以将marker拼接到相应位置，还可自定义新的marker样式。下图的需求是，格式化tooltip，并在最后添加总量的统计展示。其中sumMarker 是自定义的**总数小圆点**

echarts提供了点击事件方法，首先需要确定点击的范围，以横向柱状图为例，若不设置属性，添加点击事件后默认为柱型。1. 设置可点击属性，需添加以下配置：silent: false,triggerEvent: true,axisLabel: {clickable:true,//可点击}。2. 在init函数中添加点击事件this.students.on('click', function (params) {}

在可视化开发中通常会遇到带排名的柱状图，要求前三条数据分别显示不同颜色，其余数据显示同一颜色一、配置柱状图颜色1. 定义柱状图渐变颜色数组2. 定义放置数据及样式的数组3. 循环数据数组4. 将循环的数据与添加的样式push到空数组中5. 设置数据二、配置y轴label文字颜色、配置柱状图末尾label文字颜色样式1. 定义颜色列表2. yAxis[0]配置y轴坐标文字及样式3. yAxis[1]配置柱状图后具体数值文字及样式

在可视化开发中我们通常会遇到修改tooltip样式问题，下面分享给大家代码片段和最终呈现效果。trigger 触发类型 axisPointer 坐标轴指示器配置项 borderColor：自定义边框颜色 borderWidth：自定义边框宽度 backgroundColor：自定义背景 confine是否将tooltip框限制在图表的区域内，默认为false extraCssText：额外附加到浮层的css样式 formatter：格式化悬浮框文字格式 triggerOn:：触发时机 textStyle：设

vue可视化开发屏幕自适应开发，可视化大屏第一步，必须要考虑适配不同屏幕的问题，在网络上查看资料，总结了一个目前最适合可视化开发的自适应方案——v-scale-screen组件。v-scale-screen会将页面等比缩放，在最外层使用，包裹整个组件，width与height设置ui图大小，在v-scale-screen中可以直接使用px，不会导致位置偏移或改变图表大小等。:fullScreen是否铺满屏幕，默认为false，设置为true即铺满全屏，会导致相应页面效果拉伸，通常不建议使用。

一、在项目终端安装echarts二、在main.js中全局引入，即可在任一组件中使用this.$echarts三、创建一个dom元素，并赋予其高度、宽度、id等四、创建一个初始化函数（以折线图为例）五、在mounted钩子里调用initChart函数...