当前位置:   article > 正文

echarts 柱状图 折线图 饼图_mychart.getzr().on('finished

mychart.getzr().on('finished

  1. getEchart2(year, count) {
  2. var myChart = echarts.init(document.getElementById("mychart2"))
  3. var option = {
  4. tooltip: {
  5. trigger: 'item',
  6. formatter: (params) => {
  7. return '简易清洁生产企业' + '<br/>' +
  8. params.marker + ' ' + params.name + ': ' + params.value + '家'
  9. }
  10. },
  11. xAxis: {
  12. type: 'category',
  13. data: year,
  14. axisTick: {
  15. show: false //去除刻度线
  16. },
  17. axisLine: {
  18. show: true,
  19. lineStyle: {
  20. color: '#ccc'
  21. }
  22. },
  23. axisLabel: {
  24. show: true,
  25. textStyle: {
  26. color: '#000'
  27. }
  28. }
  29. },
  30. yAxis: {
  31. type: 'value',
  32. name: '企业数量:家',
  33. splitLine: {
  34. lineStyle: {
  35. type: 'dashed'
  36. },
  37. show: true
  38. },
  39. axisTick: {
  40. show: false //去除刻度线
  41. },
  42. axisLine: {
  43. show: false,
  44. },
  45. axisLabel: {
  46. show: true,
  47. textStyle: {
  48. color: '#000'
  49. }
  50. }
  51. },
  52. grid: {
  53. top: 30,
  54. left: 50,
  55. right: 20,
  56. bottom: 30
  57. },
  58. series: [
  59. {
  60. data: count,
  61. type: 'bar',
  62. barWidth: 30,
  63. color: '#5BC6FF',
  64. itemStyle: {
  65. normal: {
  66. //这里设置柱形图圆角 [左上角,右上角,右下角,左下角]
  67. barBorderRadius: [4, 4, 0, 0]
  68. }
  69. }
  70. }
  71. ]
  72. }
  73. myChart.setOption(option, true);
  74. window.addEventListener("resize", () => {
  75. myChart.resize();
  76. });
  77. },

  1. // 配置项
  2. var option = {
  3. color: ['#1890FF','#00AF91','#DF9C14'],
  4. tooltip: {
  5. trigger: 'axis',
  6. axisPointer: {
  7. type: 'cross',
  8. crossStyle: {
  9. color: '#999'
  10. }
  11. }
  12. },
  13. legend: {
  14. data: ['投入资金', '经济效益','投入产出比'],
  15. top: 10
  16. },
  17. xAxis: {
  18. type: 'category',
  19. data: year,
  20. axisTick: {
  21. show: false //去除刻度线
  22. },
  23. axisLine: {
  24. show: true,
  25. lineStyle: {
  26. color: '#ccc'
  27. }
  28. },
  29. axisLabel: {
  30. show: true,
  31. textStyle: {
  32. color: '#000'
  33. }
  34. }
  35. },
  36. yAxis: [
  37. {
  38. type: 'value',
  39. name: '资金:万元',
  40. splitLine: {
  41. lineStyle: {
  42. type: 'dashed'
  43. },
  44. show: true
  45. },
  46. axisTick: {
  47. show: false //去除刻度线
  48. },
  49. axisLine: {
  50. show: false,
  51. },
  52. axisLabel: {
  53. show: true,
  54. textStyle: {
  55. color: '#000'
  56. }
  57. },
  58. // min: 0,
  59. // max: LeftMax,
  60. // interval: LeftMax / spaceNum,
  61. },
  62. {
  63. type: 'value',
  64. name: '投入产出比',
  65. axisTick: {
  66. show: false //去除刻度线
  67. },
  68. axisLine: {
  69. show: false,
  70. },
  71. axisLabel: {
  72. show: true,
  73. textStyle: {
  74. color: '#000'
  75. },
  76. formatter: '{value} %'
  77. },
  78. min: 0,
  79. max: 100,
  80. interval: 10
  81. // min: 0,
  82. // max: RightMax,
  83. // interval: RightMax / spaceNum,
  84. }
  85. ],
  86. grid: {
  87. left: 50,
  88. right: 50,
  89. bottom: 30
  90. },
  91. series: [
  92. {
  93. name: '投入资金',
  94. type: 'bar',
  95. yAxisIndex: 0,
  96. barWidth: 30,
  97. itemStyle: {
  98. normal: {
  99. //这里设置柱形图圆角 [左上角,右上角,右下角,左下角]
  100. barBorderRadius: [4, 4, 0, 0]
  101. }
  102. },
  103. tooltip: {
  104. valueFormatter: function (value) {
  105. return value + ' 万元';
  106. }
  107. },
  108. data: arr1
  109. },
  110. {
  111. name: '经济效益',
  112. type: 'bar',
  113. yAxisIndex: 0,
  114. barWidth: 30,
  115. itemStyle: {
  116. normal: {
  117. //这里设置柱形图圆角 [左上角,右上角,右下角,左下角]
  118. barBorderRadius: [4, 4, 0, 0]
  119. }
  120. },
  121. tooltip: {
  122. valueFormatter: function (value) {
  123. return value + ' 万元';
  124. }
  125. },
  126. data: arr2
  127. },
  128. {
  129. name: '投入产出比',
  130. type: 'line',
  131. yAxisIndex: 1,
  132. tooltip: {
  133. valueFormatter: function (value) {
  134. return value + ' %';
  135. }
  136. },
  137. data: arr3
  138. }
  139. ]
  140. }

 

  1. var option = {
  2. color: ['#409EFF','#00AF91'],
  3. tooltip: {
  4. trigger: 'item'
  5. },
  6. legend: {
  7. data: ['国际先进', '国内先进'],
  8. },
  9. grid: {
  10. top: 30,
  11. left: 50,
  12. right: 20,
  13. bottom: 30
  14. },
  15. series: [
  16. {
  17. name: '企业清洁生产水平评价',
  18. type: 'pie',
  19. radius: '70%',
  20. label: {
  21. // 图形的文字标签
  22. show: false,
  23. // position: "center",
  24. // 当指示文字超出区域 使用
  25. formatter: function (param) {
  26. console.log("text", param)
  27. let text = param.data.name;
  28. if (text.length < 15) {
  29. return text + ':' + param.data.value
  30. } else {
  31. return text.substring(0, 15) + '...' + '\n' + param.data.value
  32. }
  33. },
  34. rich: { value: { fontSize: 12, color: '#999999', 'max-width': '100px' } },
  35. },
  36. labelLine: {
  37. // 连接图形和文字的线条
  38. show: false,
  39. },
  40. data: [
  41. { value: 1048, name: '国际先进' },
  42. { value: 735, name: '国内先进' }
  43. ]
  44. }
  45. ]
  46. }

 

  1. var option = {
  2. color: ['#00AC11','#1890FF'],
  3. tooltip: {
  4. trigger: 'axis'
  5. },
  6. legend: {
  7. data: ['方案平均投入', '方案平均产出效益'],
  8. },
  9. xAxis: {
  10. type: 'category',
  11. data: year,
  12. axisTick: {
  13. show: false //去除刻度线
  14. },
  15. axisLine: {
  16. show: true,
  17. lineStyle: {
  18. color: '#ccc'
  19. }
  20. },
  21. axisLabel: {
  22. show: true,
  23. textStyle: {
  24. color: '#000'
  25. }
  26. }
  27. },
  28. yAxis: {
  29. type: 'value',
  30. name: '单位:万元',
  31. splitLine: {
  32. lineStyle: {
  33. type: 'dashed'
  34. },
  35. show: true
  36. },
  37. axisTick: {
  38. show: false //去除刻度线
  39. },
  40. axisLine: {
  41. show: false,
  42. },
  43. axisLabel: {
  44. show: true,
  45. textStyle: {
  46. color: '#000'
  47. }
  48. }
  49. },
  50. grid: {
  51. top: 30,
  52. left: 50,
  53. right: 20,
  54. bottom: 30
  55. },
  56. series: [
  57. {
  58. name: '方案平均投入',
  59. data: averageInput,
  60. type: 'line',
  61. stack: 'Total',
  62. areaStyle: {
  63. normal : {color : '#ccffd1'}
  64. },
  65. },
  66. {
  67. name: '方案平均产出效益',
  68. data: benefit,
  69. type: 'line',
  70. stack: 'Total',
  71. areaStyle: {
  72. normal : {color : '#cce6ff'}
  73. },
  74. }
  75. ]
  76. }

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

闽ICP备14008679号