Project_yhfu/src/views/bigdata/chart-gridStaff.vue

<!-- **************************************NO.13 消火栓*************************************** -->
<template>
	<div class="chart-container">
		<div id="hydrant" style="width: 100%; height:55vh;">
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: 'hydrant',
		data() {
			return {
				count: 0
			}
		},
		mounted() {
			this.myEcharts()

		},

		methods: {
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=Ve9zCnhVwZvXTdD0
			myEcharts() {


				var chartDom = document.getElementById('hydrant');
				var myChart = echarts.init(chartDom);
        function rand(m, n) {
          if (!n) {
            return Math.floor(Math.random() * m);
          } else {
            var c = n - m + 1;
            return Math.floor(Math.random() * c + m);
          }
        }

        function getMax(arr, key) {
          var max = 0,
            len = arr.length;
          for (var i = 0; i < len; i++) {
            var item = arr[i][key];
            if (max < item) max = item;
          }
          return max;
        }

        function getValArr(arr, key) {
          var val = [],
            len = arr.length;
          for (var i = 0; i < len; i++) {
            val.push(arr[i][key]);
          }
          return val;
        }

        var arr = [];
        for (var i = 0; i < 10; i++) {
          arr.push({
            name: '类目名称' + rand(99),
            amount: rand(99999) / 100 // 采购金额
          });
        }

        var max = getMax(arr, 'amount'),
          angleAxisData = getValArr(arr, 'name');
        $.each(arr, function(i, e) {
          e.value = (e.amount / max * 100).toFixed(2);
        });
        var option = {
          backgroundColor: '#222',
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 16,
              color: '#fff',
              fontFamily: 'Microsoft YaHei'
            }
          },
          angleAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#6d8a92'
              }
            },
            axisLabel: {
              interval: 0,
              fontSize: 14,
              color: '#fff',
              fontFamily: 'Microsoft YaHei'
            },
            axisTick: {
              show: false
            },
            data: angleAxisData,
            z: 10
          },
          radiusAxis: {
            max: 100,
            min: 0,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#6d8a92'
              }
            },
            axisLabel: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 11,
                color: '#61d9fb',
                fontFamily: 'Microsoft YaHei'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#6d8a92'
              }
            },
            splitArea: {
              areaStyle: {
                color: 'transparent'
              }
            }
          },
          polar: {
            center: ['50%', '50%'],
            radius: '74%',
          },
          series: [{
            type: 'bar',
            data: arr,
            itemStyle: {
              color: function(params) {
                var colorList = ['#5cc6ca', '#d87a7f', '#f5b97f', '#5ab1ef', '#b6a2de', '#8d98b3', '#e5d02d', '#97b552', '#956f6d', '#d0579c'];
                return colorList[params.dataIndex];
              }
            },
            coordinateSystem: 'polar',
          }]
        };
				option && myChart.setOption(option);
			},

		},


	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.chart-container {
		width: 100%;
		height: auto;
		position: relative;
		padding-bottom: 10px;
		display: flex;
	}
</style>