Vue项目 echarts 柱状图（含修改样式说明 简单版）

这几天在接了一个数据大屏，由于背景图和echarts存在一定的式样重叠，故此将此次echarts柱状图修改在此记录分享，废话不多说，直接上图先看效果。

 

 修改：背景转换为虚线、柱状图颜色、柱状图头部文字及背景、柱状图底部文字式样、头部过滤条件。   下面上代码（组件内引入的方式，没抽全局共同）

<div class="table">
  <!-- echarts 盒子 -->
  <div id="progress"></div>
</div>


// 在组件内<script>中引入
import * as echarts from "echarts";

// 在methods中定义方法
async getData() {
   // let res = await axios  // 取得返回数据渲染柱状图
	this.$nextTick(() => {
	  if (document.getElementById("progress")) {
		this.myChart = echarts && echarts.init(document.getElementById("progress"));
		this.myChart.setOption({
		  grid: {  // 设置柱状图整体偏移量
			x: '9%',
			y: '20%',
			x2: '1%',
			y2: '17%'
		  },
		  legend: { // 设置头部图例过滤
			data: ['内部', '机构'],  // 图例的名称
			textStyle: {  // 图例的字体样式
			  color: '#fff'
			},
			right: 10, // 图例居右位置
			top: 6  // 图例居上位置
		  },
		  xAxis: { // 直角坐标系 grid 中的 x 轴
			type: 'category', // 坐标轴类型。
			//optionXData中单个对象 { value: '在谈项目', textStyle: { // 设置类目标签的文字样式。  color: "#fff" // 文字的颜色。}}
			data: optionXData, // 类目数据，在类目轴（type: 'category'）中有效。
			textStyle: {
			  color: '#fff'
			},
			axisLabel: { // 坐标轴刻度标签的相关设置
			  interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效。 设置成 0 强制显示所有标签 
			  // rotate: 12 // 刻度标签旋转的角度，防止标签之间重叠 角度从 -90 度到 90 度。
			}
		  },
		  yAxis: {
			type: 'value', // 坐标轴类型
			splitLine:{ // 设置坐标轴在 grid 区域中的分隔线。
			  show:true, // 是否显示分隔线。默认数值轴显示，类目轴不显示。
			  lineStyle:{ // 设置分割线式样
				// color: ['#aaa', '#ddd']   分隔线颜色，可以设置成单个颜色  Array || string
				type: [5], // 线的类型。 string: 'solid' 'dashed' 'dotted' || number || Array
				opacity: 0.1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
			  }
			},
			axisLabel: { // 坐标轴刻度标签的相关设置。
			  color: "#8A9EBE" // 纵轴文字颜色
			}
		  },
		  series: [ // yAxis 没有设置 data 会自动从 series.data 中获取
			{
			  name: '内部', // 坐标轴名称。
			  type: 'bar', // 指定当前数据为 柱状图（或称条形图）
			  color: '#09A4F7',  // 柱状图背景颜色
			  data: optionYData1, // 数据
			  label: { // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
				show: true, // 开启显示
				color: '#F5E424', // 文字的颜色。
				width: 30, // 文本显示宽度。
				height: 20, // 文本显示高度。
				position: 'top', // 标签的位置。
				offset: [0, -6], // 是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
				verticalAlign : 'middle', // 文字垂直对齐方式，默认自动。
				backgroundColor: { // 文字块背景色
				  image: require('@/assets/images/attractMaxScreen/echartsIcon.png') // 使用图片
				}
			  },
			},
			{
			  name: '机构',
			  type: 'bar',
			  color: '#3ECC96',
			  data: optionYData2,
			  label: {
				show: true, // 开启显示
				color: '#F5E424',
				width: 30,
				height: 20,
				position: 'top',
				offset: [0, -6],
				verticalAlign : 'middle',
				backgroundColor: {
				  image: require('@/assets/images/attractMaxScreen/echartsIcon.png')
				}
			  },
			}
		  ]
		})
	  }
	})
}

window.addEventListener('resize', ()=> {  // 监听页面变化
    this.myChart.resize() // 重新刷新echarts
})


beforeDestroy() {
    this.myChart && this.myChart.dispose() // 结束销毁echarts
}