echarts 柱状图加背景加渐变

背景加渐变"/>

echarts 柱状图加背景加渐变

// 对上一篇的柱状图功能升级一下，不仅又背景色，还要根据百分比控制柱子的颜色，还要是渐变色，开整
// 主要代码itemStyle: {normal: {barBorderRadius: 30,color: (param) => {// 判断返回值，然后再不同的值显示不同的颜色if (param.value <= 30) {// 渐变色return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgb(46,200,207,1)'}, {offset: 1,color: 'rgb(57,89,255,1)'}])} else if (param.value >= 30 && param.value <= 50) {return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#33FFE5'}, {offset: 1,color: '#FFB264'}])} else {return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#33FFE5'}, {offset: 1,color: '#FF0033'}])}console.log(param)}},},// 全部代码import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'const Echarts = (props) => {const chartRef = useRef()console.log(props)useEffect(() => {console.log(props)var salvProName = [];var salvProValue = [];if (props?.info?.length) {salvProName = props?.info[0];salvProValue = props?.info[1];}var salvProMax = [100, 100, 100, 100, 100, 100, 100];//背景按最大值let bigNum = 0// props?.info[1].map((res)=>{// })bigNum = Math.max.apply(null, props?.info[1])for (let i = 0; i < salvProValue.length; i++) {salvProMax.push(bigNum)}const options = {grid: {left: '2%',right: '5%',bottom: '2%',top: '2%',containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: 'none'},backgroundColor: "rgba(0,123,177,0.2)",textStyle: {color: 'rgba(255,255,255)',},borderColor: '#02E7BC',formatter: function (params) {return params[0].name + ' : ' + params[0].value + '%'}},xAxis: {show: true,type: 'value',axisLabel: {show: true,textStyle: {color: '#fff',},formatter: '{value} %'},splitLine: {show: false},axisTick: {show: false},axisLine: {show: false},},yAxis: [{type: 'category',inverse: true,axisLabel: {show: true,textStyle: {color: '#fff'},},splitLine: {show: false},axisTick: {show: false},axisLine: {show: true},data: salvProName},],series: [{name: '值',type: 'bar',zlevel: 1,itemStyle: {normal: {barBorderRadius: 30,color: (param) => {if (param.value <= 30) {return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgb(46,200,207,1)'}, {offset: 1,color: 'rgb(57,89,255,1)'}])} else if (param.value >= 30 && param.value <= 50) {return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#33FFE5'}, {offset: 1,color: '#FFB264'}])} else {return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#33FFE5'}, {offset: 1,color: '#FF0033'}])}console.log(param)}},},label: {show: true, // 开启显示position: 'right', // 在上方显示distance: 5, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。verticalAlign: 'middle',textStyle: { // 数值样式color: '#fff',fontSize: 12},formatter: '{c}%'},barWidth: 20,data: [22.1, 34.5, 45, 90, 33, 25, 15],// data: salvProValue},{name: '背景',type: 'bar',barWidth: 20,barGap: '-100%',data: salvProMax,itemStyle: {normal: {color: 'rgba(0, 123, 177, 0.2)',barBorderRadius: 30,}},},]};// 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例const chart = echarts.init(chartRef.current)// 设置图表实例的配置项和数据chart.setOption(options)// 组件卸载return () => {// myChart.dispose() 销毁实例。实例销毁后无法再被使用chart.dispose()}}, [props])return (// 把图表封装单独放入一个组件中<div style={{ width: "100%", height: "90%" }} ref={chartRef}></div>)
}
export default Echarts