Echars常见图形

weixin_39030846

已于 2023-12-19 17:04:50 修改

阅读量412

点赞数 6

分类专栏：易视界文章标签： javascript

于 2023-12-12 16:48:27 首次发布

本文链接：https://blog.csdn.net/weixin_39030846/article/details/134953505

版权

易视界专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、锥型图

在这里插入图片描述

let datearr = ['20年以上', '16-20年', '11-15年', '5-10年', '5年以下']

let option = {
  xAxis: {
    data: datearr,
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    // 将分割段数改为 10 段（默认为 5 段）
    splitNumber: 4,
    axisTick: {
      show: false,
    },
    axisLabel: {
      textStyle: {
        color: "rgba(255, 255, 255, 0.8)",
        fontWeight: "bold",
      },
    },
  },
  legend: {
    data: ["数据一", "数据二"],
    textStyle: {
      color: "rgba(255, 255, 255, 0.8)",
      fontWeight: "bold",
    },
  },
  animationDurationUpdate: 100,
  series: [{
    type: "pictorialBar",
    name: "数据一",
    symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
    symbolSize: ["50%", "100%"],
    itemStyle: {
      normal: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.6,
              color: `rgba(255,220,113,0.91)`,
            },
            {
              offset: 1,
              color: `rgba(255,255,255,0.1)`,
            }
          ],
          global: false
        }
      },
    },
    label: {
      normal: {
        show: true,
        position: "top",
        textStyle: {
          color: "rgba(255, 255, 255, 1)",
          textShadow: {
            // 添加阴影效果
            color: "rgba(0, 0, 0, 0.5)",
            blur: 4,
            offsetX: 2,
            offsetY: 2,
          },
        },
      }
    },
    data: [
      {
        value: Math.floor(Math.random() * 100),
        symbolPatternSize: 100
      },
      {
        value: Math.floor(Math.random() * 100),
        symbolPatternSize: 800,
      },
      {
        value: Math.floor(Math.random() * 100),
        symbolPatternSize: 100,
      },
      {
        value: Math.floor(Math.random() * 100),
        symbolPatternSize: 100,
      },
      {
        value: Math.floor(Math.random() * 100),
        symbolPatternSize: 100,
      },
      {
        value: Math.floor(Math.random() * 100),
        symbolPatternSize: 100,
      }
    ],
  }],
};
return {
  "option": option
}

对冲进度图
在这里插入图片描述

let datas = []
let title = ["申请人数", "授信人数", "贷款金额", "利息收入", "逾期金额","违约金额"]
let img_fen = this.$utils.getServerImageSrc('files/e/e4f43d0b1a4ab29928f21763d4808cf8-3632.png')
for (let i = 0; i < title.length; i++) {
let bbValue = Math.round(Math.random()*1000)
let yybValue = Math.round(Math.random()*1000)
  let sumValue = bbValue + yybValue
  let bbzb = Math.round( bbValue/sumValue * 100 )
  let yybzb = Math.round( yybValue/sumValue * 100 )
  // 
  // 
  datas.push({
    "name": `
    <span style='position:absolute;top:40px;left:0px;'>${title[i]}</span>
    <div style="position:absolute;top:40px;left:100px;width:${bbzb*2.5}px;height:24px;background: linear-gradient(90deg, #3888FF 0%, #05B7F8 100%);clip-path: polygon(0 0, 100% 0, ${bbzb*2.5-7.5}px 100%, 0 100%)"></div>
    <span style='position:absolute;top:42px;left:${bbzb *2.5 / 2 + 73}px;font-size: 18px;font-family: Source Han Sans CN;font-weight: bold;'>${bbValue}</span>
    <img src=${img_fen} style="position:absolute;top:16px;left:${bbzb*2.5 + 74}px;z-index:990;">
    <div style="position:absolute;top:40px;right:40px;width:${yybzb*2.5}px;height:24px;background: linear-gradient(90deg, #C56D1C 0%, #E6D755 100%);clip-path: polygon(7.5px 0, 100% 0, 100% 100%, 0 100%)"></div>
    <span style='position:absolute;top:42px;right:${ yybzb*2.5 / 2 + 15}px;font-size: 18px;font-family: Source Han Sans CN;font-weight: bold;'>${yybValue}</span>
    `
  })
}

return {
  "data": datas,
  "rows": [
    {
      "fieldName": "name"
    }
  ]
}