echarts 南丁格尔图表，玫瑰图，饼图tooltip设置，鼠标滑动展示效果，formatter处理

Mi Manchi

已于 2024-08-28 17:42:36 修改

阅读量192

点赞数 4

文章标签：前端 javascript html echarts

于 2024-08-28 17:32:59 首次发布

本文链接：https://blog.csdn.net/2302_77005870/article/details/141645879

版权

option = {
  title:{
    text:'玫瑰图',
    left:'center',
    top:'3%'
  },
  tooltip:{
    type:'item',
    // a:图标的名称，series里的name
    // b:每一项数据名称，data里的name
    // c:每一项的数据，data里的value
    // d:每一项的占比，图标自动计算的结果
    formatter:'<div><div>{b}</div><div>新增用户： {c}</div><div>占比{d}%</div></div>'
  },
  legend: {
    top: 'bottom',
    // show:false,
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 0
      },
      label: {
        position: 'top',
        show: true,
      },
      // emphasis: {
      //   focus: 'series',
      //   blurScope: 'coordinateSystem',
      //   fontSize: 40,
      //   fontWeight: 'bold'
      // },
      // labelLine: {
      //   show: false
      // },
      data: [
        { value: 20, name: 'rose 1' },
        { value: 30, name: 'rose 2' },
        { value: 40, name: 'rose 3' },
        { value: 50, name: 'rose 4' },
        { value: 60, name: 'rose 5' },
        { value: 70, name: 'rose 6' },
        { value: 80, name: 'rose 7' },
        { value: 90, name: 'rose 8' },
        { value: 100, name: 'rose 9' },
        { value: 110, name: 'rose 10' },
        { value: 120, name: 'rose 11' },
        { value: 130, name: 'rose 12' },
        { value: 140, name: 'rose 13' },
        { value: 150, name: 'rose 14' },
        { value: 160, name: 'rose 15' },
      ]
    },
  ]
};

效果图