Echarts柱状图修改柱子颜色渐变及柱子圆角展示
柱状图渐变及圆角代码如下：<script setup lang="ts">
import * as echarts from 'echarts'
const echartsDom = ref(null)
let chartInstance = null
const initChart = () => {
chartInstance = echarts.init(echartsDom.value)
var option = {
title: {
text: 'IT设备',
textStyle: {
color: '#ffffff',
fontSize: '12px'
}
},
tooltip: {
show: 'true',
trigger: 'item',
padding: , //内边距
formatter: function (params) {
if (params.seriesName != '') {
return params.name + '年总耗电量:' + params.value
}
}
},
legend: {
data: ['单位:台'],
textStyle: {
color: '#09cfff',
fontSize: '12px'
},
top: '0',
right: '3%'
},
grid: {
borderWidth: 0,
top: 30,
bottom: 25,
left: 25,
right: 10,
textStyle: {
color: '#fff'
}
},
xAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
},
axisLabel: {
inside: false,
textStyle: {
color: '#bac0c0',
fontWeight: 'normal',
fontSize: '12'
}
},
data: ['服务器', '存储', '网络', '安全']
}
],
yAxis: {
type: 'value',
//min: 1,
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
},
axisLabel: {
textStyle: {
color: '#bac0c0',
fontWeight: 'normal',
fontSize: '12'
},
formatter: '{value}'
}
},
series: [
{
name: '单位:台',
type: 'bar',
data: ['808', '795', '530', '151'],
barWidth: '35%',
itemStyle: {
color: '#27BFF6',
barBorderRadius: ,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#0784eb'
},
{
offset: 1,
color: '#09cfff'
}
])
},
label: {
show: true,
fontSize: 12,
color: '#ffffff',
position: 'top'
}
}
]
}
chartInstance5.setOption(option)
window.addEventListener('resize', function () {
chartInstance5.resize()
})
}
onMounted(async () => {
initChart()//初始化
window.addEventListener('resize', chartInstance.resize)//...窗口的缩放监听
})
onUnmounted(() => {
window.removeEventListener('resize', chartInstance.resize)//...移除窗口的缩放监听的事件
chartInstance.dispose()//销毁ECharts实例
})
</script>
<template>
<div ref="echartsDom"></div>
</template>
<style scoped lang="scss">
</style>
页:
[1]