白色背景，顶部白色大圆点的柱状图

 

 

<template>
	<div id="energyEcharts" style="width: 100%; height: 100%;"></div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.myecharts();
			this.WidthAdaptive();
		},
		watch: {

		},
		methods: {
			WidthAdaptive(res) {
				var windth = window.innerWidth;
				let fontSize = windth / 5280;
				return fontSize * res;
			},
			myecharts() {
				let myChart = this.$echarts.init(document.getElementById('energyEcharts'));

				// x轴数据
				let xData = ['03/11', '01/12', '03/13', '03/14', '03/15', '03/16', '03/17'];

				// y轴数据
				let yData = [7, 6, 6, 8, 5, 5, 7];

				//绘制图表
				var option = {
					tooltip: {
						show: true,
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							lineStyle: {
								type: 'solid',
								color: 'rgba(255, 255, 255, 0.4)',
							},
						},
						formatter: '{b}<br/> {c} 件',
						backgroundColor: 'rgba(6,19,40,0.8)',
						borderColor: 'transparent',
						padding: [10],
						textStyle: {
							fontSize: this.WidthAdaptive(30),
							fontFamily: 'PingFang SC',
							fontWeight: 400,
							lineHeight: this.WidthAdaptive(33),
							color: '#ffffff',
						},
					},
					grid: {
						left: '8%',
						top: '14%',
						width: '90%',
						height: '75%',
					},
					xAxis: {
						type: 'category',
						data: xData,
						boundaryGap: true,
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: 'rgba(77, 101, 129, 0.8)'
							},
							symbol: ['none', 'arrow'],
							symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],
							symbolOffset: this.WidthAdaptive(10)
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							fontSize: this.WidthAdaptive(34),
							fontFamily: 'Source Han Sans CN',
							fontWeight: 400,
							lineHeight: this.WidthAdaptive(54),
							color: '#cccccc'
						},
					},
					yAxis: {
						name: '单位: 件',
						type: 'value',
						splitLine: {
							lineStyle: {
								type: 'dashed',
								color: 'rgba(105, 119, 135, 0.6)',
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								type: 'solid',
								color: 'rgba(77, 101, 129, 0.8)'
							},
							symbol: ['none', 'arrow'],
							symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],
							symbolOffset: this.WidthAdaptive(10)

						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							fontSize: this.WidthAdaptive(32),
							fontFamily: 'Source Han Sans CN',
							fontWeight: 400,
							lineHeight: this.WidthAdaptive(54),
							color: '#cccccc',
							margin: this.WidthAdaptive(18)
						},
						nameGap: this.WidthAdaptive(30),
						nameTextStyle: {
							fontSize: this.WidthAdaptive(32),
							fontFamily: 'Source Han Sans CN',
							fontWeight: 400,
							lineHeight: this.WidthAdaptive(54),
							color: '#cccccc',
						},
					},
					series: [{
							type: 'bar',
							data: yData,
							barWidth: this.WidthAdaptive(22),
							color: '#1677FF',
							z: 1,
							markPoint: {
								symbolSize: this.WidthAdaptive(1),
								symbol: "circle",
								itemStyle: {
									color: "#ffffff",
									borderColor: "#ffffff",
									borderWidth: this.WidthAdaptive(33)
								},
								data: [{
										// 与xAxis和yAxis等价
										coord: [0, yData[0]]
									},
									{
										coord: [1, yData[1]]
									},
									{
										coord: [2, yData[2]]
									},
									{
										coord: [3, yData[3]]
									},
									{
										coord: [4, yData[4]]
									},
									{
										coord: [5, yData[5]]
									},
									{
										coord: [6, yData[6]]
									}
								]
							}
						},
						{
							type: 'scatter',
							data: yData,
							symbolSize: this.WidthAdaptive(16),
							itemStyle: {
								color: '#ffffff',
								opacity: 1,
							},
							hoverAnimation: false,
							z: 2
						}
					]
				}
				myChart.setOption(option);
				window.onresize = myChart.resize;
			}
		},
	}
</script>

<style scoped>
</style>