chart-pit.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!-- **************************************NO.6 矿坑*************************************** -->
  2. <template>
  3. <div class="chart-container">
  4. <div id="pitG1" style="width: 100%; height:23vh;">
  5. </div>
  6. </div>
  7. </template>
  8. <script>
  9. import * as echarts from 'echarts';
  10. import {getG1} from '@/api/bigdata'
  11. export default {
  12. name: 'pitG1',
  13. data() {
  14. return {
  15. source: [],
  16. count: 0
  17. }
  18. },
  19. mounted() {
  20. // this.myEcharts()
  21. this.getG1()
  22. },
  23. methods: {
  24. getG1() {
  25. let that = this
  26. getG1().then(res => {
  27. let name=[]
  28. let value=[]
  29. res.data.forEach(item=>
  30. {
  31. name.push(item.name)
  32. value.push(item.value)
  33. })
  34. res.data.name=name
  35. res.data.value=value
  36. this.source = res.data
  37. console.log("联动车辆统计", res.data)
  38. that.myEcharts()
  39. })
  40. },
  41. // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
  42. myEcharts() {
  43. var chartDom = document.getElementById('pitG1');
  44. var myChart = echarts.init(chartDom);
  45. var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
  46. var option;
  47. option = {
  48. color:color,
  49. tooltip : {
  50. trigger: 'item',
  51. formatter: "{b}: {c}"
  52. },
  53. toolbox: {
  54. show : true,
  55. },
  56. series : [
  57. {
  58. name:'业务警种',
  59. type:'pie',
  60. roseType: true,
  61. radius : ['50%', '70%'],
  62. label: {
  63. show: true,
  64. formatter: "{b} {c}",
  65. textStyle: {
  66. fontSize: 10 ,
  67. }
  68. },
  69. data:this.source
  70. }
  71. ]
  72. };
  73. option && myChart.setOption(option);
  74. },
  75. },
  76. }
  77. </script>
  78. <style rel="stylesheet/scss" lang="scss" scoped>
  79. .chart-container {
  80. width: 100%;
  81. height: auto;
  82. position: relative;
  83. padding-bottom: 10px;
  84. display: flex;
  85. }
  86. </style>