echarts饼图外部阴影设置

最新推荐文章于 2024-07-03 16:24:53 发布

看不见看不见看不见

最新推荐文章于 2024-07-03 16:24:53 发布

阅读量3.7k

点赞数 6

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

本文链接：https://blog.csdn.net/qq_49266680/article/details/128574834

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇文章展示了如何使用Echarts库创建具有外部阴影和内部饼图的可视化效果。配置包括颜色、阴影、边框宽度和百分比计算，以及图例和数据标签的显示。数据分为正常、停运+和停运-三个类别，显示了不同状态的比例。

摘要由CSDN通过智能技术生成

在这里插入图片描述

    var option = {
      color: ['rgba(91, 143, 249, 0.85)', 'rgba(90, 216, 166, 0.85)', 'rgba(255, 82, 77, 0.85)'],
      tooltip: {
        trigger: 'item'
      },
      legend: {
        type: 'plain',
        orient: 'vertical',
        right: '10%',
        top: 'center',
        align: 'left',
        itemWidth: 8, // 设置宽度
        itemHeight: 8, // 设置高度
        itemGap: 16, // 设置间距，
        symbolKeepAspect: false,
        formatter: function (name) {
          let data = option.series[1].data
          console.log(data, 'data')
          let total = 0
          let tarValue
          for (let i = 0; i < data.length; i++) {
            total += data[i].value
            if (data[i].name == name) {
              tarValue = data[i].value
            }
          }
          //计算出百分比
          let p = Math.round((tarValue / total) * 100) + '%'
          return `${name}      ${tarValue}  ${p}`
          //name是名称，tarValue是数值
        },
      },
      series: [
          // 设置外部阴影
      {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: '80%', //边框大小
          color: '#fff',
          center: ['30%', '50%'],
          data: [{
            value: 10,
            itemStyle: {
              // borderColor: '#fff',
              borderWidth: 1,
              shadowBlur: 9, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
              shadowOffsetX: 5, // 阴影水平方向上的偏移距离
              shadowOffsetY: 4,
              shadowColor: '#5B8FF9' // 阴影颜色

            }
          }]
        },
        //内部饼图
        {
          type: 'pie',
          radius: '80%',
          center: ['30%', '50%'], //调整echarts的位置，第一个值调整左右，第二个值调整上下，也可以设置具体数字像素值，center: [200, 300],
          label: { //echarts内部显示数字
            color: '#fff',
            show: true,
            formatter: '{d}',
            position: 'inside',
          },
          data: [{
              value: 85,
              name: '正常',
            },
            {
              value: 7,
              name: '停运+'
            },
            {
              value: 8,
              name: '停运-'
            },

          ],
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2,

          },

        },

      ]
    };