echarts柱状图（带背景和上边框）

最新推荐文章于 2024-06-20 10:44:50 发布

苹果园dog

最新推荐文章于 2024-06-20 10:44:50 发布

阅读量2k

点赞数 1

分类专栏：前端文章标签： echarts 前端

本文链接：https://blog.csdn.net/u014556081/article/details/131829331

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body{
      margin:0;
      border:0;
    }
    #container {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    }
  </style>
</head>
<body>
<div id="container"></div>
</body>
<script type='text/javascript' src='https://obs-helf.woyun.cn/anov-resources/anov-echarts/5.2.2/echarts.min.js'></script>

<script>
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('container'));
  // 指定图表的配置项和数据
 const barColors = ['#2aa7ff', '#fde943', '#33ffbb', '#FF7D34', '#ec6565']

option = {
    backgroundColor: '#0E1327',
    tooltip: {
        trigger: 'axis',
        textStyle: {
            align: 'left',
            color: '#fff',
            textStyle: {
                align: 'left',
                color: '#fff'
            },
            backgroundColor: 'rgba(16, 32, 40, 0.88)',
            borderRadius: 4,
            borderColor: '#20749e'
        },
        axisPointer: {
            type: 'shadow'
        },
        formatter: params => {
            return params[0].marker + params[0].name + ': ' + params[0].value
        }
    },
    grid: {
        left: '5%',
        right: '0%',
        top: '20%',
        bottom: '5%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        //boundaryGap: true,
        //坐标轴文字
        axisLabel: {
            color: 'rgba(230, 246, 255, 0.6)',
            fontSize: 14,
            interval: 0,
            width: 60,
            overflow: 'truncate'
        },

        //坐标轴
        axisLine: {
            width: 1,
            type: 'solid',
            color: 'rgba(230, 246, 255, 0.49)'
        },
        //刻度
        axisTick: null,
        data: ['党委', '工委']
    },
            {
        type: 'category',
              show:false,
        boundaryGap: true,
        //坐标轴文字
        axisLabel: {
           show:false
        },

        //坐标轴
        axisLine: {
          show:false,
            width: 1,
            type: 'solid',
            color: 'rgba(230, 246, 255, 0.49)'
        },
        //刻度
        axisTick: null,
        data: ['党委', '工委']
    }],
    yAxis: [
        {
            splitNumber: 3,
            name: '个',
            nameTextStyle: {
                color: 'rgba(230, 246, 255, 0.8)',
                fontSize: 14,
                padding: [0, 40, 0, 0]
            },
            axisTick: {
                show: true,
                inside: true
            },
            axisLine: {
                show: true
            },
            minorTick: {
                show: true
            },
            // axisLabel: {
            //     show: false
            // },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(230, 246, 255, 0.3)'
                }
            },
            axisLabel: {
                color: 'rgba(230, 246, 255, 0.6)',
                fontSize: 14
            }
        }
    ],
    series: [       
        {
            type: 'bar',
           id:1,
            itemStyle: {
                color: function(params) {
                    return barColors[params.dataIndex]
                },
                opacity: 1.0
            },
            label: {
                show: true,
                position: 'insideBottom',
                distance: 20,
                fontSize: 14,
                color: 'inherit'
            },
            z: 12,
            silent: true,
            barWidth: '49%',
            data: [130, 120]
        }
    ]
}

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option,{
    
  });
  var yMax = myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
  console.log(yMax)
 myChart.setOption({
   series:[
      {
        id:2,
            type: 'pictorialBar',
      
            symbol: 'rect',
         barWidth:'80%',
            symbolSize: ['100%', 2],
            // symbolSize: '100%',
            symbolOffset: [0, -0],
           symbolPosition: 'end',
            z: 10,
            itemStyle: {
                color: function(params) {
                    return barColors[params.dataIndex]
                },
                opacity: 0.5
            },
            data: [yMax, yMax]
        },
           {
             id:3,
		name: "",	
		 xAxisIndex:1,
        type: 'bar',
        z:0,
        data: [yMax, yMax],
        barWidth: '80%',
        itemStyle: {
            normal: {
                 color: 'rgba(41,22,34,0.8)' // 0% 处的颜色
            }
        },
   
    },
   ]
 })
</script>
</html>