DTU.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. $(function() {
  2. var dom = document.getElementById("container");
  3. var myChart = echarts.init(dom);
  4. var app = {};
  5. option = null;
  6. app.title = '环形图';
  7. option = {
  8. tooltip: {
  9. trigger: 'item',
  10. formatter: "{a} <br/>{b}: {c} ({d}%)"
  11. },
  12. legend: {
  13. orient: 'horizontal',
  14. x: 'left',
  15. data:['在线','离线'],
  16. itemWidth: 8,
  17. itemHeight: 8,
  18. textStyle:{//图例文字的样式
  19. color:'#fff',
  20. fontSize:12
  21. }
  22. },
  23. color:['#37a2da','#ffd85c'],
  24. series: [
  25. {
  26. name:'DTU',
  27. type:'pie',
  28. radius: ['50%', '70%'],
  29. avoidLabelOverlap: false,
  30. label: {
  31. normal: {
  32. show: false,
  33. position: 'center'
  34. },
  35. emphasis: {
  36. show: true,
  37. textStyle: {
  38. fontSize: '24',
  39. color:'#00fcff',
  40. fontWeight: 'bold'
  41. }
  42. }
  43. },
  44. labelLine: {
  45. normal: {
  46. show: false,
  47. }
  48. },
  49. data:[
  50. {value:vm.dtu.on, name:'在线'},
  51. {value:vm.dtu.off, name:'离线'}
  52. ]
  53. }
  54. ]
  55. };
  56. if (option && typeof option === "object") {
  57. myChart.setOption(option, true);
  58. }
  59. });