jiangxiSZ/shuzhixiangzheng/src/components/OtherChilds/PopulationStructure.vue

<template>
    <div id="populationStructure">
        <div id="pop"></div>
    </div>
  </template>
  
  <script>
    import echarts from 'echarts'
    export default {
      name: 'populationStructure',
      components: {
      },
      data() {
        return {
         
        }
      },
      mounted() {
        this.init()
      },
      methods: {
        init(){
            var myChart = echarts.init(document.getElementById('pop'));
		var xData = ["18以下", "18-60","60-80","80以上"];
		var yData = [50, 87.3,30,70];
		var shadowYData=[100,100];
		var color="#19dfdd";
		var shadowColor="#0b5767";
		var barWidth=50;
		var option = {
			// backgroundColor: '#05233b',
			"grid": {
				"top": "25%",
				"left": "-5%",
				"bottom": "5%",
				"right": "5%",
				"containLabel": true
			},
			animation: false,
			"xAxis": [{
				"type": "category",
				"data": xData,
				"axisTick": {
					"alignWithLabel": true
				},
				"nameTextStyle": {
					"color": "#82b0ec"
				},
				"axisLine": {
					show: false,
					"lineStyle": {
						"color": "#82b0ec"
					}
				},
				"axisLabel": {
					"textStyle": {
						"color": color
					},
					margin: 30
				}
			}],
			"yAxis": [{
				show: false,
				"type": "value",
				"axisLabel": {
					"textStyle": {
						"color": "#fff"
					},
				},
				"splitLine": {
					"lineStyle": {
						"color": "#0c2c5a"
					}
				},
				"axisLine": {
					"show": false
				}
			}],
			"series": [
				{
					"name": "数据上椭圆",
					type: 'pictorialBar',
					symbolSize: [barWidth, 10],
					symbolOffset: [0, -6],
					symbolPosition: 'end',
					z: 12,
					"label": {
						"normal": {
							"show": true,
							"position": "top",
							fontSize: 14,
							color: color,
							formatter:function(params,index){
								return params.value+"%";
							}
						}
					},
					color: "#2DB1EF",
					data: yData
				},
				{
					name: '',
					type: 'pictorialBar',
					symbolSize: [barWidth, 10],
					symbolOffset: [0, 7],
					z: 12,
					"color": color,
					"data": yData
				},
				{
					name: '',
					type: 'pictorialBar',
					symbolSize: [barWidth+5, 15],
					symbolOffset: [0, 12],
					z: 10,
					itemStyle: {
						normal: {
							color: 'transparent',
							borderColor: color,
							borderType: 'solid',
							borderWidth: 1
						}
					},
					data: yData
				},
				{
					name: '',
					type: 'pictorialBar',
					symbolSize: [barWidth+10, 20],
					symbolOffset: [0, 18],
					z: 10,
					itemStyle: {
						normal: {
							color: 'transparent',
							borderColor: color,
							borderType: 'solid',
							borderWidth: 2
						}
					},
					data: yData
				},
				{
					type: 'bar',
					"barWidth": barWidth,
					barGap: '10%', // Make series be overlap
					barCateGoryGap: '10%',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
									offset: 0,
									color: "rgba(25,223,221,.7)"
								},
								{
									offset: 1,
									color: "rgba(25,223,221,.3)"
								}
							]),
						},
					},
					data: yData
				},
				{
					"name": "阴影椭圆",
					type: 'pictorialBar',
					symbolSize: [barWidth, 10],
					symbolOffset: [0, -6],
					symbolPosition: 'end',
					z: 12,
					"label": {
						"show": false,
					},
					color: shadowColor,
					data: shadowYData
				},
				{
					name:"阴影柱体",
					type: 'bar',
					"barWidth": barWidth,
					barCateGoryGap: '10%',
					"zlevel": -1,
					"barGap": "-100%",
					itemStyle: {
						color: shadowColor
					},
					data: shadowYData
				},
			]
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        }
      }
    }
  
  </script>
  
  
  <style scoped>
 
  #populationStructure{
      position: absolute;
      width: 100%;
      height: 25%;
      z-index: 2;
      top:75%;
    
  }
  #pop{
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: rgb(0, 0, 255,0.4); */
  }
  </style>