eChars横向柱状图配置背景色配置信息-Toy模板网

这篇具有很好参考价值的文章主要介绍了eChars横向柱状图配置背景色配置信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

公司的原型图如下：
echarts 柱状图背景,echarts,前端,javascript

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

实现方案

下面展示option的 代码片。文章来源地址https://www.toymoban.com/news/detail-620626.html

      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" },
                ]),
              },
            },
          },
        ],
      };