上一节，我们实现了数据可视化大屏入场动画教程，这一节我们来完成第一个区域的功能，使用echarts绘制柱状图.
根据数据大屏设计图来看，我们一共有10个区域，所以我们创建10个item,来对应这10个区域.
为什么用编号不用名称呢？一开始的项目中，用过拼音用过英文，但是实际开发的...
yekong
1年前 (2023-03-30) 636℃
0喜欢
vue数据大屏需要实现类似甘特图的效果，效果图如下，将实现的效果记录下来，方便后期复用。
实例代码
<template>
<div class="echarts1" ref="echarts">
<...
yekong
1年前 (2023-03-22) 737℃
0喜欢
最近要写一个新的数据大屏可视化 页面，其中有一个排名功能，设计图ui效果如下，使用echarts实现效果，但是效果图里面的头部是一个倾斜角，echarts默认并没有，所以需要将柱状图分为两部分，顶部的倾斜角使用echarts的pictorialBar自定义图片来实现，下面的柱子使...
yekong
1年前 (2023-02-22) 943℃
0喜欢
vue外包项目 经常会遇到需要排行榜的效果，这次ui设计 出的数据可视化大屏 里排行榜效果如下：
效果描述
排行榜柱状图的颜色需要渐变
排行榜柱状图的尾端有一段与其他部位不同的白色色块
排行榜柱状图的数字颜色跟随柱状图的颜色变化
排行榜柱状图有一个边框
ui设计图的效果
ech...
yekong
1年前 (2023-02-21) 1061℃
0喜欢
echarts 菱形柱状图效果
实现代码
<template>
<div class="echarts1" ref="echarts">
</div>
</template>
&...
yekong
1年前 (2022-12-16) 792℃
0喜欢
vue echarts 实现进度条效果
更多进度条效果实例
vue 数据可视化大屏进度条效果实例
使用
<echarts title="当月" :num="50"></echarts>
组件代码
<tem...
yekong
1年前 (2022-12-16) 999℃
1喜欢
实现代码
<template>
<div class="echarts1" ref="echarts">
</div>
</template>
<script>
expo...
yekong
1年前 (2022-11-30) 912℃
1喜欢
echarts 异形柱状图效果
实现代码
drawLine() {
var that = this
// 基于准备好的dom，初始化echarts实例
window.addEventListener('resize', this.drawLine)
const ...
yekong
1年前 (2022-11-30) 848℃
0喜欢
Echarts 柱状图警报闪烁效果，已将代码以及github库贴出，闪光的部分单独引用了一个库。
运行实例
代码
<template>
<div class="echarts1" ref="echarts">...
yekong
1年前 (2022-11-08) 2489℃
4喜欢
vue外包项目开发要求echarts柱状图重叠显示，通过文档查询，可以使用barGap字段来进行控制操作。
barGap: '-100%',
<template>
<div class="echartsBody">
&l...
yekong
2年前 (2022-09-19) 1050℃
0喜欢
