项目有时需要我们将二维的柱状图做出立体的感觉出来,这里是将一个数据柱形放在了后面当背景图使用

先给大家看看效果

1. 引入echarts

yarn add echaets
// 也可以npm下载,看个人喜好
npm i echarts

2 按需导入echarts

import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'echarts.use([GridComponent, BarChart, CanvasRenderer])
import { dataScreenMonthEntrustQuantity } from '@/api/dashboard.js'

3. 这里就是optin的配置了

 option = {xAxis: {type: 'category',data: this.mon,axisLine: {lineStyle: {color: 'rgba(0,0,0,0)',},},axisTick: {show: false,},axisLabel: {color: '#EFF2F9',fontSize: 10,},},yAxis: {type: 'value',show: false,},grid: {left: '23%',right: '4%',bottom: '3%',containLabel: true,},series: [// 主体柱形{data: this.bgData,type: 'bar',barWidth: 10,barGap: '100%' /*多个并排柱子设置柱子之间的间距*/,barCategoryGap: '-100%' /*多个并排柱子设置柱子之间的间距*/,// 柱形颜色渐变color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#001a4a ', // 0% 处的颜色},{offset: 1,color: '#0c2f8b', // 100% 处的颜色},],global: false, // 缺省为 false},itemStyle: {// 让柱形上下变成圆角borderRadius: 10,},},{data: this.barData,type: 'bar',barWidth: 10,barGap: '-100%' /*多个并排柱子设置柱子之间的间距*/,barCategoryGap: '0%' /*多个并排柱子设置柱子之间的间距*/,// 柱形颜色渐变color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#15acfd ', // 0% 处的颜色},{offset: 1,color: '#135cff', // 100% 处的颜色},],global: false, // 缺省为 false},label: {show: true,position: 'top',color: '#09b5b5',},itemStyle: {// 让柱形上下变成圆角borderRadius: 10,},},// 顶部小椭圆{color: '#021d54',type: 'pictorialBar',symbol: 'circle',symbolSize: ['10', '11'],symbolPosition: 'end',symbolOffset: [0, -2],data: this.bgData, // 我这里是写了接口的数据z: 3,},{color: '#1ec5ff',type: 'pictorialBar',symbol: 'circle',symbolSize: ['10', '11'],symbolPosition: 'end', // 图形边缘与柱子结束的地方内切。symbolOffset: [0, -2], // 椭圆水平偏移,垂直偏移. 因为不一定正好盖住柱形,所以可能要移动一点点data: this.barData, // 数据要跟主体柱形一致z: 3, // 数值越大,层级越高,可以盖住下面的图形},],}

这里还有的一点就是动态的对背景柱赋值,将获取到的数据进行一个循环,找到里面最大的那个值,然后push到背景数组中

 await dataScreenMonthEntrustQuantity({ ...sublist }).then((result) => {if (result.code === 200) {let max = 0 //打擂台的形式找到最大值this.option = result.result.optionalYearlet list = result.result.monthlyTotalListfor (let index = 0; index < list.length; index++) {if (list[index].value > max) {max = list[index].value}this.barData.push(list[index].value)this.mon.push(list[index].moon)}
// 循环push到背景数组中for (let index = 0; index < list.length; index++) {this.bgData.push(max + 20)}}}).catch((err) => {console.log(err)})

4. 再给大家放一下自适应吧

 resetChart() {this.chart.resize()},// 监听窗口变化自适应window.addEventListener('resize', this.resetChart, false)beforeDestroy() {// 当前组件销毁必须释放echartthis.chart.dispose()// 移除监听window.removeEventListener('resize', this.resetChart)},

echarts圆柱形带背景图相关推荐

.Net C# 发送带背景图html邮件（解决Outlook不显示背景图问题）
发送带背景图html邮件(解决Outlook不显示背景图问题) (二)示例背景图 (三)示例定义好的html邮件图 (四)html代码 (五)C#邮件发送代码(示例:控制台应用程序) 1.考虑兼容性问 ...
QT绘图常用功能 Trick: QT带背景图和文字的QPushButton制作
文章目录绘图 QPixmap类:绘图 QPixmap::scaled(): 根据给定的尺寸来放大缩小QPixmap QPixmap为QLabel设置背景图片 QLineEdit的样式只能通过QPal ...
svg去掉黑色自带背景图
从网页中打开背景图,找到黑色背景块的dom元素,如下这样: rect就是黑色背景图的元素然后从代码中找到这一行元素,推荐使用sublime_text3,如果没有可以打开的程序的话,使用记事本也可以打 ...
HTML打印一首诗（带背景图）
今天小编就来教大家怎么用html打印一首诗,代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...
红楼梦词云制作（带背景）
初学望批评指正. 红楼词云带背景图的那种. 原始图像: 原始图像原始的扣下来的林妹妹最终用ps合成的图.其实挺唏嘘的,一般人认为黛玉是绝对的女主,但是黛玉只出现了900多次,不及贾母3000次.凤 ...
TF之DD：利用Inception模型+GD算法生成带背景的大尺寸、高质量的Deep Dream图片——五个架构设计思维导图
TF之DD:利用Inception模型+GD算法生成带背景的大尺寸.高质量的Deep Dream图片--五个架构设计思维导图目录 TF中的Deep Dream实践:利用Inception模型+GD算 ...
Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图(带炫光特效)
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
echarts热力背景图_Echarts 图表中设置背景图片
在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. image 在Echarts的实例中,找到一个实 ...
echarts （二）之canvas设置地图背景图
实现效果如下: echarts效果实现参考:echarts地图连线动效之(一) 接下来说这个背景图是如何利用canvas实现的: 首先在初始化echarts后增加下面代码: `` var chart ...

echarts圆柱形带背景图

项目有时需要我们将二维的柱状图做出立体的感觉出来,这里是将一个数据柱形放在了后面当背景图使用

1. 引入echarts

echarts圆柱形带背景图相关推荐

最新文章

热门文章