1. 柱状图（柱体顶部使用外部图片

相关代码

<template><div class="out-bg"><div class="container" ref="warnChartRef"></div></div>
</template><script>
import * as echarts from 'echarts'
export default {data() {return {jqrwChart: null,active: 0,xData: ['公交车', '卡车', '小客车', '工程车', '挖掘机', '未带安全帽', '烟雾', '货车', '轿车'], // 赋值x轴的数据seriesData: [147, 244, 2, 2, 174, 1, 1, 897, 1628],// 赋值Y轴的数据barTopImg: require('@/assets/images/bigScreen/bar-top.png'),symbolData: [],timer: null,}},mounted() {this.initData()},methods: {//echarts自适应fontSize(res) {let clientWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;if (!clientWidth) return;let fontSize = clientWidth / 1920;return res * fontSize;},initData() {this.xData.forEach((item, index) => {// 设置markPoint数据this.symbolData.push({symbol: 'image://' + this.barTopImg,symbolSize: [this.fontSize(20), this.fontSize(18)],xAxis: item,yAxis: this.seriesData[index], // 对应每列基础bar的值});});this.intChart();},intChart() {this.$nextTick(() => {this.jqrwChart = echarts.init(this.$refs.warnChartRef);this.jqrwChart.clear();this.jqrwChart.resize();let option = {grid: {containLabel: true,// width: '70%',// height: '68%',top: 20,right: 15,bottom: 0,left: 10,},tooltip: {trigger: "axis",axisPointer: {type: "shadow",},},xAxis: {// 类目轴type: "category",data: this.xData,axisTick: {show: false, //隐藏X轴刻度},axisLine: {lineStyle: {color: "rgba(57, 70, 89, 1)",},},axisLabel: {show: true,rotate: 25, // 轴转动textStyle: {color: "#fff",fontSize: this.fontSize(10),fontFamily: "Source Han Sans CN-Regular",},},},yAxis: {type: "value",name: "",nameTextStyle: { // 坐标轴名称的样式color: "rgba(255,255,255,1)",fontSize: this.fontSize(14),fontFamily: "Source Han Sans CN-Regular",align: "left",verticalAlign: "center",},axisLabel: { // 刻度标签show: true,color: "rgba(255,255,255,1)",textStyle: {fontSize: this.fontSize(14),},},axisLine: { // 刻度线show: false,lineStyle: {color: "rgba(57, 70, 89, 1)",},},axisTick: {show: false,},splitLine: { // 分隔线lineStyle: {color: "rgba(57, 70, 89, 1)",type: "dashed",},},},series: [{name: "数据",type: "bar",barWidth: this.fontSize(20),showBackground: true,backgroundStyle: {color: "transparent",},label: {show: true,position: 'top',color: '#fff',fontSize: this.fontSize(14),fontFamily: "DingTalkJinBuTi",padding: [0, 0, this.fontSize(4), 0]},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(0, 123, 232, 0.61)" },{ offset: 1, color: "rgba(24, 126, 171, 0)" },]),},data: this.seriesData,markPoint: {data: this.symbolData,}},],};this.jqrwChart.setOption(option, true);// 监听窗口变化window.addEventListener('resize', this.setSize)});},setSize() {if (this.timer) {clearTimeout(this.timer)}this.timer = setTimeout(() => {this.jqrwChart.resize();}, 500);},},destroyed() {window.removeEventListener('resize', this.setSize)}
}
</script><style lang="less" scoped>.out-bg{width: 100%;height: 100%;.container{width: 100%;height: 16.25rem;}}
</style>