admin管理员组

文章数量:821221

echarts圆柱形带背景图

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

先给大家看看效果

 

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圆柱形带背景图