dg-chart-options

功能：自定义图表选项，比如是否显示标题、是否显示图例、图例位置、坐标轴位置等等。

必填：否

元素：<body>、<div>图表元素。 当在<body>元素设置时，可定义全局图表选项；当在<div>图表元素设置时，仅定义单个图表选项，图表元素级设置将会继承全局设置。

格式：{ … }

系统内置的各类图表选项格式说明如下表所示：

图表类型选项说明
折线图、柱状图、饼图、仪表盘、
散点图、雷达图、漏斗图、地图、
K线图、热力图、树图、旭日图、
桑基图、关系图		ECharts官方图表，图表选项参考ECharts官方文档配置项手册
词云图ECharts扩展图表，图表选项参考echarts-wordcloud项目说明文档
水球图ECharts扩展图表，图表选项参考echarts-liquidfill项目说明文档
表格HTML图表，图表选项如下所示：
  1. {
  2.   title:  //标题
  3.   {
  4.     show: true,  //是否显示
  5.     text: “…”  //自定义标题文本
  6.     color: ‘…’,
  7.     backgroundColor: ‘…’”,
  8.     …  //其他CSS样式
  9.   },
  11.   table:
  12.   {
  13.     header:  //表头
  14.     {
  15.       color: ‘…’,
  16.       backgroundColor: ‘…’,
  17.       …  //其他CSS样式
  18.     },
  19.     row:  //行
  20.     {
  21.       color: ‘…’,
  22.       …  //其他CSS样式
  23.       odd:  //偶数行
  24.       {
  25.         color: ‘…’,
  26.         backgroundColor: ‘…’,
  27.         …  //其他CSS样式
  28.       },
  29.       even:  //奇数行
  30.       {
  31.         color: ‘…’,
  32.         backgroundColor: ‘…’,
  33.         …  //其他CSS样式
  34.       },
  35.       hover:  //鼠标悬浮行样式
  36.       {
  37.         color: ‘…’,
  38.         backgroundColor: ‘…’,
  39.         …  //其他CSS样式
  40.       },
  41.       selected:  //选中行样式
  42.       {
  43.         color: ‘…’,
  44.         backgroundColor: ‘…’,
  45.         …  //其他CSS样式
  46.       }
  47.     },
  48.     //自定义单元格渲染函数
  49.     //value 单元格值
  50.     //name 单元格列名
  51.     //rowIndex 单元格行索引
  52.     //columnIndex 单元格列索引
  53.     //row 单元格所在的行数据对象
  54.     renderValue: function(value, name,
  55.             rowIndex, columnIndex, row)
  56.     {
  57.         return “…”;
  58.     }
  59.   },
  61.   //表格轮播设置项
  62.   carousel:
  63.   //开启、禁用轮播
  64.   true、false、
  65.   //开启轮播，并设置滚动间隔毫秒数
  66.   数值、
  67.   //开启轮播，并设置返回滚动间隔毫秒数的函数
  68.   function(tr, visibleHeight, height){ return …; }、
  69.   //轮播详细设置
  70.   {
  71.     //是否开启
  72.     enable: false,
  73.     //滚动间隔毫秒数，或者返回滚动间隔毫秒数的函数：
  74.     //tr 当前顶部可见行DOM元素
  75.     //visibleHeight 当前顶部可见行的剩余可见高度
  76.     //height 当前顶部可见行总高度
  77.     //function(tr, visibleHeight, height){ return …; }
  78.     interval: 50,
  79.     //滚动跨度像素数，或者返回跨度像素数的函数：
  80.     //function(tr, visibleHeight, height){ return …; }
  81.     span: 1,
  82.     //是否在鼠标悬停时暂停轮播
  83.     pauseOnHover: true
  84.   },
  86.   //固定列配置项
  87.   fixedColumns:
  88.   {
  89.     //固定左侧列数
  90.     leftColumns: 1,
  91.     //固定右侧列数
  92.     rightColumns: 1
  93.   },
  95.   //客户端分页配置项：true 开始；false 禁用
  96.   paging: false
  97. }
表格图表底层采用了DataTable组件，更多配置项参考DataTable配置项说明文档
标签卡HTML图表，图表选项如下所示：
  1. {
  2.   label:
  3.   {
  4.     //标签名样式
  5.     name:
  6.     {
  7.       color: ‘…’,
  8.       backgroundColor: ‘…’,
  9.       …  //其他CSS样式
  10.     },
  11.     //标签值样式
  12.     value:
  13.     {
  14.       color: ‘…’,
  15.       backgroundColor: ‘…’,
  16.       …  //其他CSS样式
  17.     }
  18.   }
  19. }

示例：

  1. <head>
  2. <script type="text/javascript">
  3. var myChartOptions={ title: {show: false } };
  4. </script>
  5. </head>
  6. <body dg-chart-options="{legend:{left:0}}">
  7.   <div dg-chart-widget="..." dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:40}}"></div>
  8.   <div dg-chart-widget="..." dg-chart-options="myChartOptions"></div>
  9. </body>

另外，所有内置图表都支持如下配置项：

processRenderOptions: function(renderOptions, chart){ … }
用于在图表渲染前处理配置项。

processUpdateOptions: function(updateOptions, chart, results){ … }
用于在图表更新数据前处理配置项。

示例：

  1. <head>
  2. <script type="text/javascript">
  3. var myChartOptions=
  4. {
  5.   processRenderOptions: function(renderOptions, chart)
  6.   {
  7.     ...
  8.   },
  9.   processUpdateOptions: function(updateOptions, chart, results)
  10.   {
  11.     ...
  12.   }
  13. };
  14. </script>
  15. </head>
  16. <body>
  17.   <div dg-chart-widget="..." dg-chart-options="myChartOptions"></div>
  18. </body>

如果仅想设置图表配色，则可使用更便捷的dg-chart-theme属性。