m

shuzhixiangzheng/src/components/OtherChilds/PopulationStructure.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="populationStructure">
-        <div ></div>
+        <div id="pop"></div>
     </div>
   </template>
   
@@ -19,7 +19,177 @@
         
       },
       methods: {
-        
+        init(){
+            var myChart = echarts.init(document.getElementById('pop'));
+		var xData = ["优良率", "达标率"];
+		var yData = [50, 87.3];
+		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);
+
+        }
       }
     }