首页 前端知识 eChars横向柱状图配置背景色配置信息

eChars横向柱状图配置背景色配置信息

2024-04-12 20:04:52 前端知识 前端哥 666 195 我要收藏

公司的原型图如下:
在这里插入图片描述

这里需要实现横向柱状图的背景阴影圆角,查了之后才知道柱状图背景属性,记录一下

实现方案

下面展示option的 代码片

      const option = {
        // backgroundColor: 'rgba(128, 128, 128, 0.1)',
        grid: {//echars位置属性
          top: "5%",
          left: "3%",
          right: "10%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          splitLine: { show: false },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: { show: false },
        },
        yAxis: {
          type: "category",
          //y轴lable升序
          // inverse: true,
          data: [],
          splitLine: { show: false },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: "13",
            },
          },
          axisTick: {
            show: false,
          },
          splitArea: { show: false },
          nameTextStyle: {
            fontSize: "100%",
            color: "black",
          },
        },
        series: [
          {
            type: "bar",
            data: this.callPoliceHistogramData.dataAxis,
            name: "X",
            label: {
              show: true,
              position: "right",
              fontSize: "100%",
              valueAnimation: true,
            },
            barWidth: "40%", //柱图宽度
            //关键代码
            showBackground: true,//开启背景
            backgroundStyle: {//设置背景样式
              color: "rgba(14, 53, 98, 1)",
              barBorderRadius: 10,
            },
            itemStyle: {
              emphasis: {//鼠标经过柱状图的样式
              },
              normal: {//设置柱图的渐变
                barBorderRadius: 10,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#83bff6" },
                  { offset: 1, color: "#8800FF" },
                ]),
              },
            },
          },
        ],
      };
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4785.html
标签
评论
发布的文章

HTML5学习笔记(二)

2024-04-21 10:04:45

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!