当前位置:   article > 正文

echarts案例_earch示例

earch示例

1. echarts参考地址:http://echarts.baidu.com/echarts2/doc/doc.html#Toolbox   

2. 要显示如下所示的图:

3. 数据数组: 

4. 相应的js代码

  1. //季度保费统计
  2. var quarterPremium = function(){
  3. finder.post("queryOverByYear", {}).then(
  4. function (data) {
  5. var year = '';
  6. var arrAmount=[];
  7. angular.forEach(data,function(data1){
  8. if(year == data1.year){
  9. arrAmount[arrAmount.length - 1].data.push(Math.round(data1.amount/100)/100);
  10. }else{
  11. year = data1.year;
  12. var yearObj ={
  13. year:year,
  14. data:[]
  15. };
  16. //如果前几季度返回来空,就赋值为0
  17. for(var i = 1; i < data1.quarter; i++){
  18. yearObj.data.push(0);
  19. }
  20. yearObj.data.push(Math.round(data1.amount/100)/100);
  21. arrAmount.push(yearObj);
  22. }
  23. });
  24. initLineChart(arrAmount);
  25. },function (err) {
  26. //请求失败
  27. // console.log(err)
  28. layerMsg('查询失败请联系管理员');
  29. }
  30. );
  31. };
  32. //季度保费统计数据
  33. var initLineChart = function(data){
  34. var ele = document.getElementById('premium_income');
  35. lineChartObj = echarts.init(ele);
  36. // 指定图表的配置项和数据
  37. var option = {
  38. color: [ '#E98F6F','#6AB0B8', '#334B5C'],
  39. title: {
  40. text: '保费收入(万元)',
  41. textStyle:{
  42. fontSize : 14
  43. }
  44. },
  45. tooltip: {
  46. trigger: 'axis',
  47. //formatter: "{b} <br> 合格率: {c}%"
  48. },
  49. legend: {
  50. data:[ ]
  51. },
  52. grid: {
  53. top:'20%',
  54. left: '5%',
  55. right: '10%',
  56. bottom: '5%',
  57. containLabel: true
  58. },
  59. toolbox: {
  60. feature: {
  61. saveAsImage: {}
  62. }
  63. },
  64. xAxis: {
  65. type: 'category',
  66. name: '',
  67. boundaryGap: false,
  68. data: ['一季度','二季度','三季度','四季度']
  69. },
  70. yAxis: {
  71. type: 'value',
  72. },
  73. series: [
  74. {
  75. name:data[0].year + '年',
  76. type:'line',
  77. stack: '总量1',
  78. data:data[0].data
  79. },
  80. {
  81. name:data[1].year + '年',
  82. type:'line',
  83. stack: '总量2',
  84. data:data[1].data
  85. },
  86. {
  87. name:data[2].year + '年',
  88. type:'line',
  89. stack: '总量3',
  90. data:data[2].data
  91. },
  92. ]
  93. };
  94. // 使用刚指定的配置项和数据显示图表。
  95. lineChartObj.setOption(option);
  96. };
  97. quarterPremium();//调用方法

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/911596
推荐阅读
相关标签
  

闽ICP备14008679号