首页 前端知识 Echarts之饼图

Echarts之饼图

2024-07-22 01:07:23 前端知识 前端哥 355 358 我要收藏

以官网案例中的Examples - Apache ECharts为例。配置文档Documentation - Apache ECharts

折线图的学习请看Echarts之折线图_W_小T的博客-CSDN博客

一、图例

控制图例的属性是:legend

 (一)图例的方位

left:图例组件离容器左侧的距离

bottom:图例组件离容器底部的距离

right:图例组件离容器右侧的距离

top:图例组件离容器顶部的距离

如下图,想让图例在右下方,通过方位bottom和right就能来控制

 //图例所处方位
 bottom: '5%',
 right: '5%',

(二)图例列表的布局朝向-orient

可选:默认是水平方向

  • 'horizontal'
  • 'vertical'

如下图,图例是纵向排列

 orient: 'vertical',

(三)图例列表之间的间距-itemGap

图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。

 //图例之间的距离
itemGap: 10,

(四)图例图形的宽高

如下图,将图例的形状更改为正方形

 itemWidth: 12,// 设置图例图形的宽
 itemHeight: 12,

(五)图例文字颜色

如下图,文字颜色根据图例的颜色自动配置

 // 图例的文字颜色
 textStyle: {
    color: 'auto'
 }

二、环形图

文档中的案例一般给出的已经很完美了,按照自己所需可以细节性的调整,我调整的样子如下:

 radius: ['40%', '47%'],//环形图的大小
   

鼠标移向饼环之上,不会提示
      emphasis: {
        label: {
          show: false,//是否显示标签。
          fontSize: '40',
          fontWeight: 'bold'
        }
      },

series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '47%'],//环形图的大小
      avoidLabelOverlap: false,
      // 饼图位置参数
      // center: ["26%", "40%"], // 这个属性调整图像的位置!!!!!
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,//是否显示标签。
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: 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' }
      ]
    }
  ]

三、环条

如下图,修改环条的样子和环条与环条之间的间距(一般有底色的时候要按照底色来设置边框颜色)

在series里面添加

 itemStyle: {//环形状和环之间的间距
    borderRadius: 10,
    borderColor: '#fff',//边框颜色
    // borderWidth: 20//边框宽
 },

四、开启延长线

series里面的 label和labelLine都需要开启(或者都不写,默认为true)

单独个环条显示延长线或者某条不显示,就在sweies下的data里面对应下添加 label和labelLine属性,如我的是绿色环条不显示延长线和提示词:

labelLine: {
     show: false,
},
label: {
     show: false,
},

 

 data: [
        { value: 1048, name: 'Search Engine' ,},
        { value: 735, name: 'Direct',
          labelLine: {
              show: false,
             
          },
          label: {
            show: false,
          },
        },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]

若想改变环条颜色,在对应的下面添加itemStyle和textStyle,这样环条和图例颜色会发生变化

 itemStyle: {//环条颜色
    color: '#47B5FF',
  },

  textStyle: {//图例颜色
        color: '#47B5FF'
   },

 

 data: [
        { value: 1048, name: 'Search Engine' ,},
        { value: 735, name: 'Direct',
          labelLine: {
              show: false,
             
          },
          label: {
            show: false,
          },
          itemStyle: {//环条颜色
              color: '#47B5FF',
          },

          textStyle: {//图例颜色
              color: '#47B5FF'
          },
        },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]

今日的学习到此结束,最后提一嘴,修改提示词可以用formatter

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14193.html
标签
评论
发布的文章

TEGG学习总结

2024-08-07 00:08:45

ajax笔记二

2024-03-12 01:03:25

jQuery 密码验证

2024-08-07 00:08:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!