利用echarts的pie实现特定的南格丁图

最新推荐文章于 2024-10-30 16:21:23 发布

原创最新推荐文章于 2024-10-30 16:21:23 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

本文介绍如何使用ECharts实现特殊的半径模式饼状图，并探讨了不同实现方式的优缺点。通过代码示例展示了如何手动创建这种图表，包括设置颜色、排序和特殊效果。

南格丁echarts图（半径模式）

if (this.myMiddleChart != null && this.myMiddleChart !== '' && this.myMiddleChart !== undefined) {
 this.myMiddleChart.clear()// 清除数据，图例
} else {
  var chartDom = this.$refs.pieChart
  this.myMiddleChart = this.$echarts.init(chartDom)
}
var option

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  color: ['#64D2FF', '#FFCC00', '#FF9500', '#FF5712', '#FF3B30'],
  series: [
    {
      name: '半径模式',
      type: 'pie',
      radius: [30, 140],
      center: ['50%', '50%'],
      roseType: 'radius',
      // itemStyle: {
      //   borderRadius: 5
      // },
      minAngle: 30,
      itemStyle: {
        normal: {
          borderWidth: 4,
          borderColor: '#010019'
        }
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: pieData
    }
  ]
}

option && this.myMiddleChart.setOption(option)

手动实现类似南格丁echarts
优点：每块占得角度一致，半径差距相同，颜色顺序排列
缺点：模块未按照从大到小顺序排列；为实现圆形剩余部分虚线，采用重叠放置，所以不可点击

if (this.myMiddleChart != null && this.myMiddleChart !== '' && this.myMiddleChart !== undefined) {
 this.myMiddleChart.clear()// 清除数据，图例
} else {
  var chartDom = this.$refs.pieChart
  this.myMiddleChart = this.$echarts.init(chartDom)
}
var option
let colorData = ['#64D2FF', '#FFCC00', '#FF9500', '#FF5712', '#FF3B30']
let dataArray = pieData.map((item, index) => {
  return {
    name: '半径模式',
    type: 'pie',
    radius: [20, 140 - 30 * index],
    center: ['50%', '50%'],
    startAngle: 90 - 72 * index,
    // roseType: 'false',
    // itemStyle: {
    //   borderRadius: 5
    // },
    z: pieData.length - index,
    minAngle: 30,
    itemStyle: {
      normal: {
        borderWidth: 4,
        borderColor: '#010019'
      }
    },
    label: {
      show: false
    },
    emphasis: {
      label: {
        show: true
      }
    },
    data: [
      {
        itemStyle: {
          color: colorData[index]
        },
        ...item
      },
      {
        name: '补充',
        value: 4 * item.value,
        itemStyle: {
          color: 'rgba(255,255,255, 0)',
          borderType: 'dashed',
          borderColor: '#272727',
          borderWidth: 1
        }
      }]
  }
})
// console.log(dataArray)
option = {
  // tooltip: {
  //   show: false,
  //   trigger: 'item',
  //   formatter: '{b} <br/> {c} ({d}%)'
  // },
  series: dataArray
}

option && this.myMiddleChart.setOption(option)

手动实现类似南格丁echarts
优点：每块占得角度一致，半径差距相同，排序前固定每个series的颜色，
缺点：为实现圆形剩余部分虚线，采用重叠放置，所以不可点击

// 1.给原始数组每项设置颜色
handleData(res){
	let getData = []
    let colorData = ['#64D2FF', '#FFCC00', '#FF9500', '#FF5712', '#FF3B30']
     getData = res.data.map((item, index) => {
       return {...item, color: colorData[index]}
     })
     this.initPie(getData)
}
initPie (pieData) {
  if (this.myMiddleChart != null && this.myMiddleChart !== '' && this.myMiddleChart !== undefined) {
    this.myMiddleChart.clear()// 清除数据，图例
  } else {
    var chartDom = this.$refs.pieChart
    this.myMiddleChart = this.$echarts.init(chartDom)
  }
  // 2.对已设置颜色数组进行从大到小排序
  let newData = JSON.parse(JSON.stringify(pieData))
  newData.sort((a, b) => {
    return b.value - a.value
  })
  var option
  let dataArray = newData.map((item, index) => {
    return {
      name: '半径模式',
      type: 'pie',
      radius: [20, 140 - 25 * index],
      center: ['50%', '50%'],
      startAngle: 90 - 72 * index,
      // roseType: 'false',
      // itemStyle: {
      //   borderRadius: 5
      // },
      silent: true,
      z: pieData.length - index,
      minAngle: 30,
      itemStyle: {
        normal: {
          borderWidth: 4,
          borderColor: '#010019'
        }
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: [
        {
          itemStyle: {
            color: item.color
          },
          ...item
        },
        {
          name: '补充',
          value: 4 * item.value,
          itemStyle: {
            color: 'rgba(255,255,255, 0)',
            borderType: 'dashed',
            borderColor: '#272727',
            borderWidth: 1
          }
        }]
    }
  })
  // console.log(dataArray)
  option = {
    series: dataArray
  }

  option && this.myMiddleChart.setOption(option)
},