前言：由于公司可视化数字大屏项目需要用到了象形柱状图，所以在博客里记录一下！如果能帮到你，那么点个赞吧，哈哈哈
话不多说，直接先上效果图：
创建一个vue组件，我这里由于项目取名为：departmentsTop5.vue
HTML：
<template><div class="absolute-left-right-top-bottom charts-main"><div class="map-bottom"><div ref="main" class="charts-item"/></div></div></template>
JS：
<script>import * as echarts from 'echarts';export default {name: 'departmentsTop5',components: {},data() {return {adapters: [{name: '妇科',count: 5,rate: 87,index: 0},{name: '产科',count: 5,rate: 61,index: 1},{name: '内分泌科',count: 25,rate: 50,index: 2},{name: '计划生育科',count: 15,rate: 32,index: 3},{name: '麻醉科',count: 35,rate: 24,index: 4}],option5: {xAxis: {max: 100,splitLine: {show: false},axisLine: {show: false},axisLabel: {show: false},axisTick: {show: false}},grid: {left: 123,top: 20, // 设置条形图的边距right: 80,bottom: 20},yAxis: [{type: 'category',inverse: false,data: ['麻醉科', '计划生育科', '内分泌科', '产科', '妇科'],axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false}}],series: [{// 内-值// type: 'bar',type: 'pictorialBar',symbol: 'roundRect',symbolRepeat: true,animationDuration: 0,// 宽度-高度symbolSize: [6, 12],// 间隙symbolMargin: '32%',legendHoverLink: true,silent: true,itemStyle: {normal: {color: function(params) {var color;if (params.dataIndex === 4) {color = {type: 'linear',x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: '#FF0066' // 0% 处的颜色},{offset: 1,color: '#FF5AAC' // 100% 处的颜色}]}} else if (params.dataIndex === 3) {color = {type: 'linear',x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: '#FF5400' // 0% 处的颜色},{offset: 1,color: '#FFC75A' // 100% 处的颜色}]}} else if (params.dataIndex === 2) {color = {type: 'linear',x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: '#02B317' // 0% 处的颜色},{offset: 1,color: '#37E08B' // 100% 处的颜色}]}} else {color = {type: 'linear',x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: '#16D8E9' // 0% 处的颜色},{offset: 1,color: '#2357EB' // 100% 处的颜色}]}}return color;}}},label: {// 左字normal: {show: true,position: 'left',formatter: '{b}',textStyle: {color: '#E9F4FF',fontSize: 16,fontWeight: 'bold',padding: [0, 17, 0, 0]}}},data: ['11', '23', '23', '33', '55'],z: 1,animationEasing: 'elasticOut'},{// 内-背景// type: 'bar',type: 'pictorialBar',symbol: 'roundRect',animationDuration: 0,symbolRepeat: true,// 宽度-高度symbolSize: [6, 12],// 间隙symbolMargin: '32%',legendHoverLink: true,silent: true,itemStyle: {normal: {color: 'rgba(50,71,179,0.4)'}},data: ['100', '100', '100', '100', '100'],z: -100,animationEasing: 'elasticOut'},{// 外边框type: 'pictorialBar',symbol: 'rect',symbolBoundingData: 100,itemStyle: {normal: {// color: 'rgba(50,71,179,0.4)'color: 'none'}},label: {normal: {formatter: (params) => {var text;if (params.dataIndex === 4) {text = '{d| ' + params.data + '%' + '}';} else if (params.dataIndex === 3) {text = '{c| ' + params.data + '%' + '}';} else if (params.dataIndex === 2) {text = '{b| ' + params.data + '%' + '}';} else {text = '{a| ' + params.data + '%' + '}';}return text;},rich: {a: {color: '#E9F4FF',fontSize: 16,fontWeight: 'bold'},b: {color: '#37E08B',fontSize: 16,fontWeight: 'bold'},c: {color: '#FFC75A',fontSize: 16,fontWeight: 'bold'},d: {color: '#FF0066',fontSize: 16,fontWeight: 'bold'}},position: 'right',distance: 2, // 向右偏移位置show: true}},data: ['11', '23', '23', '33', '55'],z: 0,animationEasing: 'elasticOut'},// { //可以根据自己需求选用//name: '外框',//type: 'bar',//barGap: '-120%', // 设置外框粗细//data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],//barWidth: 25,//itemStyle: {// normal: {// color: 'transparent', // 填充色// barBorderColor: '#1C4B8E', // 边框色// barBorderWidth: 1, // 边框宽度// // barBorderRadius: 0, //圆角半径// label: {// // 标签显示位置// show: false,// position: 'top' // insideTop 或者横向的 insideLeft// }// }//},//z: 0// }]}};},mounted() {const me = this;me.initMyChart();},methods: {initMyChart() {const me = this;const chartDom = me.$refs.main;const myChart = echarts.init(chartDom);myChart.setOption(me.option5);}}};</script>
