数据可视化大屏项目开发中，会遇到各种不一样的需求，前面我们实现的echarts 堆叠伪圆柱柱状图效果，这次我们实现一个类似棱柱体效果。如果顶部的菱形装饰不满意，想用其他的图标我们可以通过iconfont自行寻找图标进行替换。
底部axisLabel的文字倾斜我们用到了rotat...
yekong
1年前 (2023-11-04)
喜欢
数据可视化大屏项目开发中，会遇到各种不一样的需求，今天遇到的需求是堆叠柱状图，并且堆叠在一块的柱状图顶部有个椭圆装饰让柱状图看起来像个个圆柱体。
这里是通过markPoint来实现我们想要的效果的。通过svg图标达到柱状图椭圆顶部的效果。
markPoint
ECharts 的...
yekong
1年前 (2023-11-04)
喜欢
echarts柱状图加载速度过快，客户想要让动画慢一点，这里我们可以通过设置animationDuration来控制动画的加载速度。
animationDuration: 2000, // 这里设置动画持续时间为 3000 毫秒（3 秒）
animationEasing: &q...
yekong
1年前 (2023-10-31)
喜欢
数据大屏项目开发中，柱状图需要显示四种日期的数据，本周只有7天 本月有30多条 上月也有30多条，这种数据量很大渲染的话肯定放不开，这就需要dataZoom来进行拖动显示，但是数据少的又不需要，所以我们需要进行判断显示
判断显示
我们需要根据数据长度进行判断，当数据长度大于12...
yekong
1年前 (2023-10-13)
喜欢
echarts柱状图数据过多时，客户会想让柱状图下的dataZoom自动切换轮播展示。
效果代码
实现思路 我们设置start和end两个值，定时每次增加20然后更新dataZoom当dataZoom达到100后，再从新开始，以此实现dataZoom的数据轮播显示。
<s...
yekong
1年前 (2023-10-10)
喜欢
数据可视化大屏 项目开发中，设计图中有一个效果比较特殊，用echarts代码实现的话，可能没办法实现这种效果，于是想到用图片的方式来实现。
设计图效果截图
echarts渲染后的效果
柱状图分为三部分，顶部中间以及底部三部分。
实例代码
drawLine() {
var...
yekong
1年前 (2023-08-12)
喜欢
数据大屏项目中柱状图为了美观会设计不同样式的柱状图，今天的柱状图效果是渐变色，柱状图顶部是一个倾斜角，因为echarts实现不了这个倾斜角，所以我们使用图片来实现。
实例代码
<template>
<div class="item2" ...
yekong
2年前 (2023-05-13)
喜欢
echarts x轴实现label倾斜效果实例，添加单位，双渐变色柱状图，折线图底部颜色渐变。
演示实例
组件代码
<template>
<div class="echarts1" ref="echarts">...
yekong
2年前 (2023-04-28)
喜欢
数据可视化大屏项目开发中，在渲染柱状图的时候，需要鼠标放在柱状图后，tooltip显示的内容要自定义显示样式和内容。
演示实例
实现
echarts tooltip 默认自带一个半透明的背景色，为了不被这个半透明影响我们的样式效果，我们需要将这个半透明设置为透明backgro...
yekong
2年前 (2023-04-27)
喜欢
echarts 渐变色柱状图效果，label换行效果实例。
演示实例
组件代码
<template>
<div className="echarts1" ref="echarts">
</div&g...
yekong
2年前 (2023-04-26)
喜欢
