echarts饼图、环形图

最新推荐文章于 2024-04-26 15:39:36 发布

misstianyun

最新推荐文章于 2024-04-26 15:39:36 发布

阅读量444

点赞数

分类专栏： echarts 文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/misstianyun/article/details/124630604

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、饼图

const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: 10,
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 30,
            textStyle: {
              color: '#405B84'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          color: ['#68A0F7', '#64DEF3', '#40CE66', '#F87F4C'],
          series: [
            {
              name: '总数',
              type: 'pie',
              label: {
                color: '#405B84',
                formatter: '{b}: {d}%'
              },
              data: [
                {
                  value: 335,
                  name: '40分钟以上'
                },
                {
                  value: 234,
                  name: '35-40分钟'
                },
                {
                  value: 335,
                  name: '30-35分钟'
                },
                {
                  value: 1234,
                  name: '30分钟以下'
                }
              ],
              radius: '65%'
            }
          ]
        };

二、环形图

const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: 10,
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 30,
                textStyle: {
                    color: '#405B84'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            color: ['#68A0F7', '#64DEF3', '#40CE66', '#F87F4C'],
            series: [
                {
                    name: '总数',
                    type: 'pie',
                    label: {
                        color: '#405B84',
                        formatter: '{b}: {d}%'
                    },
                    data: [
                        {
                            value: 335,
                            name: '优秀'
                        },
                        {
                            value: 234,
                            name: '良好'
                        },
                        {
                            value: 335,
                            name: '合格'
                        },
                        {
                            value: 1234,
                            name: '较差'
                        }
                    ],
                    radius: ['50%', '70%']
                }
            ]
        };