【Echarts】象形图

效果

代码

<!-- 业务类型 -->
<template><div class="ywlx" :style="{ '--height': height }"><div class="header_count count_linear_bg"><div>当月业务总量<span class="common_count text_shadow">{{ countInfo.ywzl | thousandthFilter }}</span></div><div>当月预警率<span class="common_count lightblue1">{{ countInfo.yjv }}%</span></div></div><div class="echarts" :id="domId" /></div>
</template><script>
import { queryYwfxMonthByParam } from '@/api/screen-zhidu.js'export default {name: 'Ywlx',components: {},props: {height: {type: String,default: '100%'},echartsStyle: {type: Object,default: () => {return {xAxisColor: '#fff',yAxisColor: '#a3bfed',legendTextColor: '#88a5cb',xAxis: {axisLabel: { color: '#fff' },axisLine: { show: false },axisTick: { show: false }},toolTip: {backgroundColor: '#000000c2',borderColor: '#00000052',textStyle: { color: '#a3bfed' }}}}}},data() {return {Echarts: null,domId: 'YwlxEcharts',dataList: [],countInfo: {}}},computed: {options() {let xAxisData = ['', ''] // X轴左右要空出一部分，所以第一个和最后一个都为空let topData = [] // 峰值datathis.dataList.forEach((item, index) => {xAxisData.splice(index + 1, 0, this.$common.filter_dic('dp_lszx_zd_ywlx', item.zb_code))topData.push(item.value1)})return {tooltip: {show: false,trigger: 'axis',...this.echartsStyle.toolTip,formatter: (params) => {var info = params.find((item) => !!item.data && item.data !== '-')let html = '<span></span>'if (info) {html = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#1283ff"></span>${info.name}:${info.data}<br>`}return html}},xAxis: [{type: 'category',data: xAxisData,...this.echartsStyle.xAxis,axisLabel: {interval: 0,rotate: -45,textStyle: {color: '#fff'}}}],grid: {top: '30',left: '50',right: '20',bottom: '60'},yAxis: [{type: 'value',axisLabel: {color: this.echartsStyle.yAxisColor},splitLine: {lineStyle: {type: 'dashed',color: this.echartsStyle.yAxisColor},show: true}}],series: [{type: 'pictorialBar',barCategoryGap: '-60%', // 要有交叉的感觉，每个柱子宽度设置负数，就是100%+60%symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z', // 象形图形label: {show: true,formatter: '{c}',position: 'top',color: '#178dfa'},itemStyle: {borderColor: '#0acaff',borderWidth: 4,color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#1378e8' },{ offset: 1, color: '#06399ade' }])},data: ['-', ...topData, '-'] // X轴左右要空出一部分，所以第一个和最后一个都为空}]}}},watch: {},created() {},mounted() {window.addEventListener('resize', this.resizeFun)this.fetchData()},destroyed() {if (this.Echarts) {this.Echarts.dispose()window.removeEventListener('resize', this.resizeFun)}},methods: {resizeFun() {if (document.getElementById(this.domId)) {this.Echarts = this.$echarts.init(document.getElementById(this.domId))this.Echarts.resize()}},fetchData() {queryYwfxMonthByParam().then((res) => {this.$common.CheckCode(res, null, () => {res = {code: 200,msg: '',data: {yjv: 0.01,ywlxList: [{month_id: '202503',entry_code: '030104',zb_code: 'JYYW',value1: 100,value2: 0,value3: 0},{month_id: '202503',entry_code: '030104',zb_code: 'KSYW',value1: 200,value2: 0,value3: 0},{month_id: '202503',entry_code: '030104',zb_code: 'JSZYW',value1: 150,value2: 0,value3: 0},{month_id: '202503',entry_code: '030104',zb_code: 'JDCYW',value1: 300,value2: 0,value3: 0}],ywzl: 97049},timestamp: 1740998003314}const { ywlxList, ...info } = res.data || {}this.countInfo = infothis.dataList = (ywlxList || []).filter((item) => !!item.value1)this.init()})})},init() {if (this.Echarts) {this.Echarts.dispose()}const dom = document.getElementById(this.domId)this.Echarts = this.$echarts.init(dom)this.Echarts.setOption(this.options)}}
}
</script><style lang='scss' scoped>
@import '../index.scss';.ywlx {height: var(--height);display: flex;flex-direction: column;.echarts {flex: 1;}
}
</style>