Echarts之饼图

以官网案例中的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