修改echarts饼状图位置

Dear 丶 2022-12-19 11:38 453阅读 0赞

### 目录 ###

*  一：修改方法
 *  二：效果
 *  三：参考

# 一：修改方法 #

1.  `属性`  
    **series-pie.center**
2.  **官方文档**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]
3.  **代码**

option = { 
      legend: { 
        orient: "vertical",
        left: "left",
        data: ["Apple", "Grapes", "Pineapples", "Oranges", "Bananas"]
      },
      series: [{ 
        type: "pie",
        data: [{ 
          value: 335,
          name: "Apple"
        }, { 
          value: 310,
          name: "Grapes"
        }, { 
          value: 234,
          name: "Pineapples"
        }, { 
          value: 135,
          name: "Oranges"
        }, { 
          value: 1548,
          name: "Bananas"
        }],
        center: ["19%", "50%"] // 这个属性调整图像的位置！！！！！
      }]
    }

# 二：效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]

# 三：参考 #

*  [echarts饼状图位置设置 - z\_xun - 博客园 https://www.cnblogs.com/xiaoxiaoxun/p/11295020.html][echarts_ - z_xun - _ https_www.cnblogs.com_xiaoxiaoxun_p_11295020.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/80d4c01a8b0f4873ae99e9f4b7bf055f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/950b46f25f4c45ea8aa04377764f015e.png
[echarts_ - z_xun - _ https_www.cnblogs.com_xiaoxiaoxun_p_11295020.html]: https://www.cnblogs.com/xiaoxiaoxun/p/11295020.html

发表评论取消回复

表情：

评论列表（有 0 条评论，453人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts的饼状图变成环形图

首先实现一个饼状图 <!DOCTYPE html> <html> <head> <met

末蓝、/ 2022年12月23日 00:49/ 0 赞/ 249 阅读

相关修改echarts饼状图位置

目录一：修改方法二：效果三：参考一：修改方法 1. `属性` series-pie.center 2. 官方文档

Dear 丶/ 2022年12月19日 11:38/ 0 赞/ 454 阅读

相关 echarts饼状图实战实例

基于echarts的饼状图 echarts本人也是用的很少的了，有缘碰到公司在用，于是便熟悉熟悉。这里就指出一些日常简单参数和图形做参考。来看看效果图吧！ !

谁借莪１个温暖的怀抱￠/ 2022年11月18日 13:47/ 0 赞/ 271 阅读

相关 echarts饼状图指定颜色

为每个饼图的扇面指定不同的颜色指定PIE饼图扇形每个扇面的颜指定PIE饼图扇形每个扇面的颜 > 指定PIE饼图扇形每个扇面的颜色，修改每个data

- 日理万妓/ 2022年11月07日 05:47/ 0 赞/ 323 阅读

相关 vue echarts饼状图百分比展示

设置label的formatter。 label: { show: true, formatter: '{b} : {d}%' }, 已

谁践踏了优雅/ 2022年10月13日 05:24/ 0 赞/ 574 阅读

相关 ECharts图表------饼状图

效果图: ![SouthEast][] <!DOCTYPE html> <html> <head> <meta charset=

谁借莪１个温暖的怀抱￠/ 2022年06月01日 01:14/ 0 赞/ 354 阅读

相关 echarts饼状图

使用echarts实现个人月消费统计，下面是我写的一个案例：效果图： ![70][] html代码： <html> <head> <me

川长思鸟来/ 2022年05月14日 01:41/ 0 赞/ 392 阅读

相关 Echarts使用笔记--饼图，柱状图

开始做前端了，感觉自己是要变成全栈工程师了。。。今天使用了echart，用之前觉得好高大上好厉害，肯定很复杂。用了以后才发现，使用起来超简单，当然，精通很难，里面的各种配

痛定思痛。/ 2022年01月26日 09:35/ 0 赞/ 402 阅读

相关 ECharts之饼状图

效果图 ![在这里插入图片描述][20190725130341211.gif] 背景图片 ![20190725170845879.png][] 下载EChar

╰+哭是因爲堅強的太久メ/ 2021年09月30日 05:32/ 0 赞/ 974 阅读

相关 echart生成饼状图

//绘制图表. echarts.init(document.getElementById('main')).setOption(\{ tooltip : \{ tr

女爷i/ 2021年09月29日 09:08/ 0 赞/ 501 阅读