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

<!-- **************************************NO.18 消防*************************************** -->
<template>
	<div class="chart-container">
		<div id="chartPitG2" style="width: 100%; height:25vh; ">
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
  import {getG2} from '@/api/bigdata'
	export default {
		name: 'chartPitG2',
		data() {
			return {
        source: [],
				count: 0
			}
		},
		mounted() {
			// this.myEcharts1();
      this.getG2()
		},

		methods: {
      getG2() {
        let that = this
        getG2().then(res => {
          this.source = res.data
          console.log("水利工程资源统计", res.data)
          that.myEcharts1()
        })
      },
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=f46x0t0c7883X-D6
			myEcharts1() {
				var chartDom = document.getElementById('chartPitG2');
				var myChart = echarts.init(chartDom);
				var option;
				 option = {
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    },
				    grid:{
				        top:'15%',
				        left:'10%',
				        right:'10%',
				        buttom:'15%',
				    },
				     xAxis: {
				        type: 'category',
				        axisLine: {
				            lineStyle: {
				                color: 'rgba(255,255,255,0.12)',
				            },
				        },
				        axisLabel: {
				            margin: 10,
				            color: '#e2e9ff',
				            textStyle: {
				                fontSize: 10
				            },
				        },
				        axisTick:{
				            show:false,
				        },
				         // data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区']
				         data: this.source.name
				    },
				    yAxis: {
				        nameTextStyle:{
				            color:'#fff',
				        },
				        type: 'value',
				         axisLine: {
				             show:false,
				            lineStyle: {
				                color: 'rgba(255,255,255,0.12)'
				            },
				        },
				        axisLabel: {
							 show:false,
				            formatter: '{value}',
				            color: '#e2e9ff',
				        },
				         splitLine: {
				            lineStyle: {
				                color: 'rgba(255,255,255,0.12)'
				            }
				        },
				        axisTick:{
				            show:true,

				            lineStyle:{
				                color:'#fff',
				            },
				        },
				    },
				    series: [{
				        itemStyle:{
				            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                    offset: 0,
				                    color: 'rgba(0,244,255,1)'
				                }, {
				                    offset: 1,
				                    color: 'rgba(0,77,167,1)'
				                }], false),
				                barBorderRadius: 10,
				                opacity:0.8
				        },
				        barWidth:10,
				        label:{
				            show:true,
				            position:['0','-20'],
				            color:'#fff',
				        },
				        // data: [120, 200, 150, 80, 70],
				        data: this.source.value,
				        type: 'bar',
				    }]
				};
				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;
		flex-direction: column;
	}
</style>