chartdate.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. // 路径配置
  2. require.config({
  3. paths:{
  4. 'echarts' : 'http://echarts.baidu.com/build/echarts'
  5. }
  6. });
  7. // 使用
  8. require(
  9. [
  10. 'echarts',
  11. 'echarts/chart/pie', // 使用柱状图就加载bar模块,按需加载
  12. 'echarts/chart/bar'
  13. ],
  14. function(ec) {
  15. // 基于准备好的dom,初始化echarts图表
  16. var myChart = ec.init(document.getElementById('chartContainer'));
  17. var option = {
  18. title : {
  19. text: '标段计量分布',
  20. x:'left'
  21. },
  22. tooltip : {
  23. trigger: 'item',
  24. formatter: "{a} <br/>{b}:{c} <br>占总项目:{d}%"
  25. },
  26. legend: {
  27. selectedMode:false,
  28. orient : 'vertical',
  29. x : 'left',
  30. y : 'center',
  31. data:['路基工程','桥涵工程','隧道工程','交叉工程']
  32. },
  33. calculable : true,
  34. series : [
  35. {
  36. name:'标段计量分布',
  37. type:'pie',
  38. radius : '60%',
  39. center: ['60%', 175],
  40. data:[
  41. {value:27814964.00, name:'路基工程'},
  42. {value:41043186.10, name:'桥涵工程'},
  43. {value:42917475.00, name:'隧道工程'},
  44. {value:27634982.00, name:'交叉工程'}
  45. ]
  46. }
  47. ]
  48. };
  49. // 为echarts对象加载数据
  50. myChart.setOption(option);
  51. var myChart = ec.init(document.getElementById('chartContainer2'));
  52. var option = {
  53. title : {
  54. text: '标段计量进度',
  55. },
  56. tooltip : {
  57. trigger: 'axis',
  58. formatter: "{b} <br/>{a}:{c}元 <br/>{a1}:{c1}元<br/>{a2}:{c2}%"
  59. },
  60. legend: {
  61. data:['累计合同计量','累计完成计量','完成进度百分比']
  62. },
  63. xAxis : [
  64. {
  65. type : 'category',
  66. data : ['路基工程','桥涵工程','隧道工程','交叉工程']
  67. }
  68. ],
  69. yAxis : [
  70. {
  71. type : 'value',
  72. name : '金额',
  73. position:'left',
  74. axisLabel : {
  75. formatter: '{value} 元'
  76. },
  77. splitArea : {show : true}
  78. },
  79. {
  80. type : 'value',
  81. name : '完成进度百分比',
  82. position:'right',
  83. max:'100',
  84. axisLabel : {
  85. formatter: '{value} %'
  86. },
  87. splitLine : {show : true}
  88. }
  89. ],
  90. series : [
  91. {
  92. name:'累计合同计量',
  93. type:'bar',
  94. data:[27814964.00,41043186.10, 42917475.00, 27634982.00],
  95. },
  96. {
  97. name:'累计完成计量',
  98. type:'bar',
  99. data:[20571481.02,28770211.71, 23427801.00, 1708798.00],
  100. },
  101. {
  102. name:'完成进度百分比',
  103. type:'line',
  104. yAxisIndex: 1,
  105. data:[73.95,70,54.58,6.18],
  106. }
  107. ]
  108. };
  109. // 为echarts对象加载数据
  110. myChart.setOption(option);
  111. }
  112. );