echarts常用例图之《环形饼图》

今天不要写bug

已于 2023-01-19 10:15:55 修改

阅读量490

点赞数

CC 4.0 BY-SA版权

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

于 2023-01-19 10:08:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52443895/article/details/128732797

echarts 专栏收录该内容

7 篇文章

订阅专栏

博客介绍了使用ECharts实现常用例图，省略了引入ECharts的步骤，还表示此系列为开发常用图，相似的可直接粘贴代码以节省时间。

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

环形饼图

使用echarts，实现如上常用例图，代码如下：（ps:如何引入echarts等这里就略过啦~）

<div id="main"></div>
...
import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
// 提示
  tooltip: {
    trigger: 'item'
  },
  // 图例
  legend: {
    orient: 'vertical',
    right: 10,
    top: '50%'
  },
  // 图色块颜色
  color: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14'],
  //环形图中间添加文字
  graphic: [
    {
      type: 'text', //通过不同top值可以设置上下显示
      left: 'center',
      top: '50%',
      style: {
        text: '200个', //（自己设置显示内容）,
        textAlign: 'center',
        fill: '#000', //文字的颜色
        width: 30,
        height: 30,
        fontSize: 24,
        fontWeight: 500,
        color: '#000',
        fontFamily: 'Microsoft YaHei'
      }
    },
    {
      type: 'text',
      left: 'center',
      top: '45%',
      style: {
        text: '缺陷',
        textAlign: 'center',
        fill: '#797979',
        width: 30,
        height: 30,
        fontSize: 20
      }
    }
  ],
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      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: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);