echarts2饼图标签含义及使用技巧(润乾报表引入第三方图形)

  Echarts2——饼图


1.参数:

title:字符串(主标题)
seriesName:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎',...]
category:['英文网站','中文网站',...](种类)
datavalue:[621,999,700,387,400,234,135,1548,310,335,...]
subtitle:字符串(需要添加"")(副标题)
x 设置水平安放位置,默认左对齐,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单位px)
y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单位px)


2.变量

变量a、b、c在不同图表类型下代表数据含义为:
折线(区域)图、柱状(条形)图: a(系列名称),b(类目值),c(数值), d(无)
散点图(气泡)图 : a(系列名称),b(数据名称),c(数值数组), d(无)
饼图、雷达图 : a(系列名称),b(数据项名称),c(数值), d(百分比)
弦图 : a(系列名称),b(项1名称),c(项1-项2值),d(项2名称), e(项2-项1值)
力导向图 :节点 : a(类目名称),b(节点名称),c(节点值)
边 : a(系列名称),b(源名称-目标名称),c(边权重), d(如果为true的话则数据来源是边)
{Function},传递参数列表如下:
params : 数组内容同模板变量,[[a, b, c, d], [a1, b1, c1, d1], ...]
ticket : 异步回调标识
callback : 异步回调,回调时需要两个参数,第一个为前面提到的ticket,第二个为填充内容html 


3.标题设置

         

          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'
            }
          },

4.图例设置

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: ['北京','上海','广州','深圳','郑州']
          },

5.值域设置

          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}'
                }
              }
            }
          ],

 


6.提示框设置

          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} 
{b} : {c}个 ({d}%)' },

7.具体实现代码


   
    

 

你可能感兴趣的:(编程语言)