信游平台登陆

注册 | 登录 | 网址 接待拜候八百站长

Echarts饼状图属性设置大全

2019/10/17 7:19:00 作者:站长日志 来历:http://blog.csdn.net/ 浏览:1912次

1、标题设置

  title: {
    text: '先生生源地来历散布图',
    subtext: '摹拟数据',
    // x 设置程度安顿地位,默许左对齐,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单元px)
    x: 'center',
    // y 设置垂直安顿地位,默许全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单元px)
    y: 'top',
    // itemGap设置主副标题纵向距离,单元px,默许为10,
    itemGap: 30,
    backgroundColor: '#EEE',
    // 主标题文本款式设置
    textStyle: {
      fontSize: 26,
      fontWeight: 'bolder',
      color: '#000080'
    },
    // 副标题文本款式设置
    subtextStyle: {
      fontSize: 18,
      color: '#8B2323'
    }
  },

2、图例设置

  legend: {
    // orient 设置规划体例,默许程度规划,可选值:'horizontal'(程度) ¦ 'vertical'(垂直)
    orient: 'vertical',
    // x 设置程度安顿地位,默许全图居中,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单元px)
    x: 'left',
    // y 设置垂直安顿地位,默许全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单元px)
    y: 'center',
    itemWidth: 24,   // 设置图例图形的宽
    itemHeight: 18,  // 设置图例图形的高
    textStyle: {
      color: '#666'  // 图例笔墨色彩
    },
    // itemGap设置各个item之间的距离,单元px,默许为10,横向规划时为程度距离,纵向规划时为纵向距离
    itemGap: 30,
    backgroundColor: '#eee',  // 设置全部图例地区背景色彩
    data: ['北京','上海','广州','深圳','郑州']
  },

3、值域设置

  series: [
    {
      name: '生源地',
      type: 'pie',
      // radius: '50%',  // 设置饼状图巨细,100%时,最大直径=全部图形的min(宽,高)
      radius: ['30%', '60%'],  // 设置环形饼状图, 第一个百分数设置内圈巨细,第二个百分数设置外圈巨细
      center: ['50%', '50%'],  // 设置饼状图地位,第一个百分数调程度地位,第二个百分数调垂直地位
      data: [
        {value:335, name:'北京'},
        {value:310, name:'上海'},
        {value:234, name:'广州'},
        {value:135, name:'深圳'},
        {value:148, name:'郑州'}
      ],
      // itemStyle 设置饼状图扇形地区款式
      itemStyle: {
        // emphasis:英文意义是 夸大;侧重;(表面、图形等的)光鲜;凸起,重读
        // emphasis:设置鼠标放到哪一块扇形下面的时辰,扇形款式、暗影
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(30, 144, 255,0.5)'
        }
      },
      // 设置值域的那指向线
      labelLine: {
        normal: {
          show: false   // show设置线是不是显现,默许为true,可选值:true ¦ false
        }
      },
      // 设置值域的标签
      label: {
        normal: {
          position: 'inner',  // 设置标签地位,默许在饼状图外 可选值:'outer' ¦ 'inner(饼状图上)'
          // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显现内容 ,默许显现{b}
          // {a}指series.name  {b}指series.data的name
          // {c}指series.data的value  {d}%指这一局部占总数的百分比
          formatter: '{c}'
        }
      }
    }
  ],

radius: '50%',  的时辰:

20180909195348617.png

radius: ['30%', '60%'],  的时辰:

2018090919531773.png

4、提醒框设置

  tooltip: {
    // trigger 设置触发范例,默许数据触发,可选值:'item' ¦ 'axis'
    trigger: 'item',
    showDelay: 20,   // 显现提早,增加显现提早能够防止频仍切换,单元ms
    hideDelay: 20,   // 埋没提早,单元ms
    backgroundColor: 'rgba(255,0,0,0.7)',  // 提醒框背景色彩
    textStyle: {
      fontSize: '16px',
      color: '#000'  // 设置文本色彩 默许#FFF
    },
    // formatter设置提醒框显现内容
    // {a}指series.name  {b}指series.data的name
    // {c}指series.data的value  {d}%指这一局部占总数的百分比
    formatter: '{a} <br/>{b} : {c}个 ({d}%)'
  },

20180909195443971.png

5、默许色板

color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E']

6、全部图形背景色彩设置

backgroundColor: 'pink',

或是间接给Echarts地点的DOM元素设置背景色彩也能够。


注重:若何两种体例都设置的有,backgroundColor: 'pink', 失效

上一篇: 图片不中断转动DIV+CSS+JS代码 下一篇: 不了