5.10. 设置图表主题

在body元素上定义dg-chart-theme属性， 即可设置图表主题。例如：

  1. ...
  2. <body dg-chart-theme="{
  3.       //前景颜色
  4.       color:'#FFF',
  5.       //背景颜色
  6.       backgroundColor:'#000',
  7.       //边框颜色
  8.       borderColor:'#333',
  9.       //标题颜色
  10.       titleColor:'#FFF',
  11.       //图例颜色
  12.       legendColor:'#BBB',
  13.       //坐标轴颜色
  14.       axisColor:'#AAA',
  15.       //坐标轴刻度分隔线颜色
  16.       axisScaleLineColor:'#555',
  17.       //图形条目颜色
  18.       graphColors:['#5EF6FE','#91CA8C','#EA7E53'],
  19.       //值域图形条目颜色
  20.       graphRangeColors:['#00FF00','#0000FF'],
  21.       //提示框主题
  22.       tooltipTheme:{color:'#FFF',backgroundColor:'#000',borderColor:'#333'},
  23.       //高亮块主题
  24.       highlightTheme:{color:'#FFF',backgroundColor:'#000',borderColor:'#333'}
  25.     }">
  26. ...

也可以使用echarts主题更精细地定义图表主题，在body元素上定义dg-echarts-theme属性， 并将其值设置为一个已注册至echarts的主题名即可。例如：

  1. ...
  2. <script type="text/javascript">
  3. echarts.registerTheme("myTheme", {...});
  4. </script>
  5. ...
  6. <body dg-echarts-theme="myTheme">
  7. ...