<!-- **************************************NO.5 林场*************************************** -->
<template>
	<div class="chart-container">
		<div id="forestfarm" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

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

		},

		methods: {
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=2nuQSYycLWN0P_EG

			myEcharts() {


				var chartDom = document.getElementById('forestfarm');
				var myChart = echarts.init(chartDom);
				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
				var option;
				option = {
				        tooltip: {
				          trigger: 'axis',
				          axisPointer: { // 坐标轴指示器，坐标轴触发有效
				            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				          }
				        },
				        grid: {
				          left: '10%',
				          right: '10%',
				          bottom: '10%',
				          top:'16%',
				          containLabel: true
				        },
				        
				        xAxis: {
				          type: 'category',
				          data: ['双辽市','梨树县','伊通县','铁东区','铁西区'],
				          axisLine: {
				            lineStyle: {
				              color: '#1cc6a1'
				
				            }
				          },
				          axisLabel: {
				            // interval: 0,
				            // rotate: 40,
				            textStyle: {
				              fontFamily: 'Microsoft YaHei'
				            }
				          },
				        },
				
				        yAxis: {
				          type: 'value',
				          max:'500',
				          axisLine: {
				            show: false,
				            lineStyle: {
				              color: '#19b1e8'
				            }
				          },
				          splitLine: {
				            show: true,
				            lineStyle: {
				              color: 'rgba(255,255,255,0.1)'
				            }
				          },
				          axisLabel: {}
				        },
				        
				        series: [{
				          type: 'bar',
				          barWidth: '15%',
				          itemStyle: {
				            normal: {
				                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                    offset: 0,
				                    color: '#fccb05'
				                }, {
				                    offset: 1,
				                    color: '#1689f5'
				                }]),
				                barBorderRadius: 12,
				            },
				          },
				          data: [400, 400, 300, 300, 300]
				        }]
				      };
				
				      var app = {
				        currentIndex: -1,
				      };
				      setInterval(function () {
				        var dataLen = option.series[0].data.length;
				
				        // 取消之前高亮的图形
				        myChart.dispatchAction({
				          type: 'downplay',
				          seriesIndex: 0,
				          dataIndex: app.currentIndex
				        });
				        app.currentIndex = (app.currentIndex + 1) % dataLen;
				        //console.log(app.currentIndex);
				        // 高亮当前图形
				        myChart.dispatchAction({
				          type: 'highlight',
				          seriesIndex: 0,
				          dataIndex: app.currentIndex,
				        });
				        // 显示 tooltip
				        myChart.dispatchAction({
				          type: 'showTip',
				          seriesIndex: 0,
				          dataIndex: app.currentIndex
				        });
				
				
				      }, 1000);
				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>
