echarts饼图美化

最新推荐文章于 2024-09-09 17:43:53 发布

liuxiaochang_2011

最新推荐文章于 2024-09-09 17:43:53 发布

阅读量433

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/liuxiaochang_2011/article/details/131569129

版权

文章提供了一段Echarts的代码示例，用于创建一个包含多个层次的饼图以及仪表盘的组合图表。代码详细定义了各个组件的样式和交互，包括不同环形区域的颜色渐变、标签布局和动画效果。要求Echarts版本在5以上，且提到了分辨率适应性设置。

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

先上一张效果图

上代码

option = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
            name: '文件分类',
            type: 'pie',
            radius: ['36%', '49%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            animation: false,
            label: {
                fontSize: 16,
                formatter: '{d}%',
                color: 'black',
                padding: [-15, -24, 0, -30],
                position: 'outer',
                alignTo: 'labelLine',
                bleedMargin: 5,
                margin: 20
            },
            labelLine: {
                normal: {
                    length: 35,
                    length2: 75
                }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 25,
                fontWeight: 'bold'
              }
            },
            data: [{ value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }]
          },
    {// 下面几部分属于样式 
              name: '内圈',
              type: 'pie',
              radius: ['0%', '28%'],
              center: ['50%', '45%'],
              avoidLabelOverlap: false,
              minShow