效果图:
思路是:
通过数组循环生成多个echarts实例盒子,生成的柱形图只有一条数据,是由多个图表设置barGap: '-100%'
实现重叠,并通过设置柱形图中间颜色到边上颜色的渐变形成类似3d的视觉效果,实际每一个柱形图是由以下几个图表实现的:⛽️
- 内层背景的body(bar)
- 内层背景的顶部圆圈 (pictorialBar)
- 外层绿色的实际值柱形图 (bar)
- 外层顶部的圆圈 (pictorialBar)
- 外层底部的圆圈 (pictorialBar)
以及底部的圆盘是一个切图🥺
技术栈
vue3 TypeScript echarts
准备:
需要安装echarts和echarts-gl
yarn add echarts
yarn add echarts-gl
代码:
template:
<div class="bottom-bar">
<div v-for="item, index in barList" :key="index" class="bottom-item">
<img class="bar-bottom" src="@/assets/images/fiveWater/bar-bottom.png" alt="">
<div class="top-rate num-18 mgb12">
{
{
item.rate }}%
</div>
<div :ref="ref => item.dom = ref" class="bar-box mgb12" />
<div class="bottom-name pang-18">
{
{
item.name }}
</div>
</div>
</div>
javascript:
import 'echarts-gl'
import * as echarts from 'echarts'
const barList = reactive([
{
name: '基本能力', rate: 98, total: 100, done: 98, dom: ref() },
{
name: '考核情况', rate: 100, total: 100, done: 100, dom: ref() },
{
name: '推进情况', rate: 90, total: 100, done: 90, dom: ref() },
])
onMounted(() => {
initBar()
})
const initBar = () => {
data.barList.forEach((item) => {
const series = [item.done]
const staticData = toRaw(item)
const output_3DBarCharts = echarts.init(item.dom)
const options = get3DOptions(staticData, series)
output_3DBarCharts.setOption(options)
window.addEventListener('resize', () => {
output_3DBarCharts.