echarts图表饼图配置

最新推荐文章于 2022-07-29 16:41:08 发布

rgsg212

最新推荐文章于 2022-07-29 16:41:08 发布

阅读量1.2k

点赞数

分类专栏： echarts 文章标签： echarts javascript

本文链接：https://blog.youkuaiyun.com/weixin_51689252/article/details/120549697

版权

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何配置Echarts饼图，包括设置每个部分的颜色、显示浮框、调整图表大小，以及设定标题和左侧模块标题。同时，还详细讲解了鼠标悬停时的高亮效果和标签样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.设置饼图每一部分的颜色

鼠标放上去有浮框

设置饼图大小

 option: {
                            // 设置饼图每一部分的颜色
                            color: ['RGB(91,155,213)','RGB(165,165,165)','RGB(237,125,49)'],
                            // 鼠标放上去有浮框
                            // trigger:'item' 显示下面name中的值和该部分名称和对应值
                            // formatter: '{b}<br/>{d}%' 显示该部分名称和对应百分比
                            tooltip: {
                                // trigger: 'item',
                                formatter: '{b}<br/>{d}%'
                            },
                            series: [
                                {   
                                    // 浮框上面的值，在使用item时候
                                    name: '评估等级111',
                                    // pie代表饼图
                                    type: 'pie',
                                    // 设置饼图大小
                                    radius: '50%',
                                    data: djData
                                }
                            ]
                        },

2.设置标题

设置左侧对应模块标题

option = {
  // 设置标题
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  // 设置左侧对应模块标题
  legend: {
    // 垂直，水平
    orient: 'vertical',
    // orient:'horizontal',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

3.鼠标放上去设置高亮状态的扇区和标签样式

Examples - Apache ECharts

option = {
  title: {
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      // 鼠标放上去设置高亮状态的扇区和标签样式
      emphasis: {
        // 是否开启高亮后的扇区效果
        // focus: 'self',
        // 设置高亮部分四周的阴影和模糊情况
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};