Echarts

胜杰720

已于 2024-04-23 16:23:24 修改

阅读量86

点赞数 1

文章标签： echarts 前端 javascript

于 2024-04-23 16:23:02 首次发布

本文链接：https://blog.csdn.net/weixin_71574589/article/details/138131038

版权

const seriesData = [     
    {
      name: "巡河事件",
      value: riverPatrolEventData.value.patrolNum,
      percent: riverPatrolEventData.value.patrolRate,
      itemStyle: { color: '#0094FF' }
    },
    {
      name: "公众上报",
      value: riverPatrolEventData.value.publicEventNum,
      percent: riverPatrolEventData.value.publicRate,
      itemStyle: { color: '#F9FF82' }
    },
    {
      name: "视频事件",
      value: riverPatrolEventData.value.videoEventNum,
      percent: riverPatrolEventData.value.videoEventRate,
      itemStyle: { color: '#82FFAC' }
    },
    {
      name: "其他事件",
      value: riverPatrolEventData.value.otherEventNum,
      percent: riverPatrolEventData.value.otherEventRate,
      itemStyle: { color: '#F3AB60' }
    },
  ];




legend: {
      itemHeight: 12,
      itemWidth: 12,
      icon: "rect",
      orient: "vertical",
      top: "center",
      right: "5%",
      itemGap: 20,
      itemStyle: {
        borderWidth: 0, 
      },
      textStyle: {
        color: "#fff",
        rich: {
          name: {
            width: 60,
            fontSize: 14,
          },
          value0: {
            width: 45,
            fontSize: 14,
            color:'#0094FF'
          }, 
          value1: {
            width: 45,
            fontSize: 14,
            color:'#F9FF82'
          }, 
          value2: {
            width: 45,
            fontSize: 14,
            color:'#82FFAC'
          }, 
          value3: {
            width: 45,
            fontSize: 14,
            color:'#F3AB60'
          }, 
          rate0: {
            width: 20,
            fontSize: 14,
            color: "#0094FF",
          },
          rate1: {
            width: 20,
            fontSize: 14,
            color: "#F9FF82",
          },
          rate2: {
            width: 20,
            fontSize: 14,
            color: "#82FFAC",
          },
          rate3: {
            width: 20,
            fontSize: 14,
            color: "#F3AB60",
          },
        },
      },
      data: seriesData,
      formatter: (name) => {
        if (seriesData.length) {
          for (let i = 0; i < seriesData.length; i++) {
            if (name == seriesData[i].name) {
               return `{name|${name}}{value${i}|${seriesData[i].value}}{rate${i}|${seriesData[i].percent*100}%}`
            }
         } 
        }
      },
    },