前言:由于公司可视化数字大屏项目需要用到了象形柱状图,所以在博客里记录一下!如果能帮到你,那么点个赞吧,哈哈哈
话不多说,直接先上效果图:
创建一个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>