<!-- **************************************NO.14 泡沫液*************************************** -->
<template>
	<div class="chart-container">
		<div id="foam" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

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

		},

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


				var chartDom = document.getElementById('foam');
				var myChart = echarts.init(chartDom);
				var zdslColorList = ['#D0A00E', '#34DA62', '#00C0E9', '#0096F3', '#33CCFF'];
				var option;
				  option = {
				      grid: {
				          top: '5%',
				          left: '10%',
				          right: '12%',
				          bottom: '0',
				          containLabel: true
				      },
				      tooltip: {
				      },
				      xAxis: {
				          show: false,
				          type: 'value'
				      },
				      yAxis: [{
				              type: 'category',
							  inverse:true,
				              data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
				              axisLabel: {
				                  show: true,
				                  textStyle: {
				                      color: '#ADD6FF',
				                      fontSize: '12'
				                  }
				              },
				              splitLine: {
				                  show: false
				              },
				              axisTick: {
				                  show: false
				              },
				              axisLine: {
				                  show: false
				              },
				          },
				          {
				              splitLine: {
				                  show: false
				              },
				              axisTick: {
				                  show: false
				              },
				              axisLine: {
				                  show: false
				              },
				              axisLabel: {
				                  show: true,
				                  textStyle: {
				                      color: '#ADD6FF',
				                      fontSize: '12'
				                  }
				              },
				              data: [150, 298, 206, 75, 154]
				          }
				      ],
				 
				      series: [{
				              name: "受理数", // bar图的外边框
				              type: "bar",
				              barWidth: "20%",
				              yAxisIndex: 0,
				              data: [500, 500, 500, 500, 500].map((item, i) => {
				                  return {
				                      value: item,
				                      itemStyle: {
				                          color: "rgba(0,0,0,0)",
				                          barBorderColor: zdslColorList[i],
				                          borderWidth: 1,
				                          shadowColor: "#33CCFF",
				                          shadowBlur: 4
				                      }
				                  }
				              }),
				          },
				          {
				              name: "受理数", //这个是Bar图
				              type: 'bar',
				              yAxisIndex: 1,
				              barWidth: "10%",
				              data: [150, 298, 206, 75, 154]
				          }
				      ],
				      itemStyle: {
				          color: function(params) {
				              return zdslColorList[params.dataIndex]
				          }
				      }
				  }
				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>
