饼状图echarts使用

最新推荐文章于 2024-07-31 00:25:36 发布

温柔的二斤半

最新推荐文章于 2024-07-31 00:25:36 发布

阅读量212

点赞数 1

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

本文链接：https://blog.csdn.net/m0_67388537/article/details/131857382

版权

echarts 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

1. 效果图

2. 在官方找类似的图

3. 配置项

var option = {
  title: {
      text: '购买终端',
      // 标题字体样式
      textStyle: {
          color: '#9AA8D4',
          fontSize: 22,
          fontWeight: 'normal'
      }
  },
  // hover扇面时候显示的内容 b是data的name  c是data的value
  tooltip: {
      trigger: 'item',
      formatter: '{b}数量 : {c}个;占比 ({d}%)'
  },
  // legend: {
  //     left: 'center',
  //     top: 'bottom',
  //     data: ['ios', 'PC Web', 'Android', 'Wap Web']
  // },
  // toolbox: {
  //     show: true,
  //     feature: {
  //         mark: { show: true },
  //         dataView: { show: true, readOnly: false },
  //         magicType: {
  //             show: true,
  //             type: ['pie', 'funnel']
  //         },
  //         restore: { show: true },
  //         saveAsImage: { show: true }
  //     }
  // },
  series: [
      {
          name: '面积模式',
          type: 'pie',
          // 最外圈和最内圈的比例大小
          radius: ['25%', '50%'],

          roseType: 'area',
          data: [
              {
                  value: 25,
                  name: 'Android',
                  label: {
                      normal: {
                          textStyle: {
                              // 字体颜色渐变  扇颜色保持一致
                              color: '#4B4CDC',
                              fontSize: 12
                          }
                      }
                  },
                  itemStyle: {
                      normal: {
                          // 渐变柱状图
                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              { offset: 0, color: '#6D48DC' }, // 柱图渐变色
                              { offset: 0.5, color: '#6D48DC' }, // 柱图渐变色
                              { offset: 1, color: '#4B4CDC' } // 柱图渐变色
                          ])
                      }
                  }
              },
              {
                  value: 20,
                  name: 'ios',
                  label: {
                      normal: {
                          // 字体颜色
                          textStyle: {
                              color: '#248DFF',
                              fontSize: 12
                          }
                      }
                  },
                  itemStyle: {
                      normal: {
                          // 渐变柱状图
                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              { offset: 0, color: '#24C9FF' }, // 柱图渐变色
                              { offset: 0.5, color: '#24ABFF' }, // 柱图渐变色
                              { offset: 1, color: '#248DFF' } // 柱图渐变色
                          ])
                      }
                  }
              },
              {
                  value: 15,
                  name: 'PC Web',
                  label: {
                      normal: {
                          textStyle: {
                              color: '#BD00FF',
                              fontSize: 12
                          }
                      }
                  },
                  itemStyle: {
                      normal: {
                          // 渐变柱状图
                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              { offset: 0, color: '#D200FF' }, // 柱图渐变色
                              { offset: 0.5, color: '#BD00FF' }, // 柱图渐变色
                              { offset: 1, color: '#BD00FF' } // 柱图渐变色
                          ])
                      }
                  }
              },

              {
                  value: 5,
                  name: 'Wap Web',
                  label: {
                      normal: {
                          textStyle: {
                              color: '#70218F',
                              fontSize: 12
                          }
                      }
                  },
                  itemStyle: {
                      normal: {
                          // 渐变柱状图
                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              { offset: 0, color: '#8A1D89' }, // 柱图渐变色
                              { offset: 0.5, color: '#7C1D8C' }, // 柱图渐变色
                              { offset: 1, color: '#70218F' } // 柱图渐变色
                          ])
                      }
                  }
              }
          ]
      }
  ]
}