vue3+ts+echarts实现渐变色间隔柱状图和渐变色仪表盘
-----------dom结构-------------
<div id="park-left"></div>
<style scoped>
#park-left {
width: 800px;
height: 500px;
}
</style>
-----------数据结构-------------
const res = [
{
"buildingName": "A1",
"pueValue": 1.6118
},
{
"buildingName": "A2",
"pueValue": 1.45
},
{
"buildingName": "A3",
"pueValue": 1.385
},
{
"buildingName": "A5",
"pueValue": 1.5443
},
{
"buildingName": "A6",
"pueValue": 1.3851
},
{
"buildingName": "A7",
"pueValue": 1.3556
},
{
"buildingName": "A8",
"pueValue": 1.3484
},
{
"buildingName": "A9",
"pueValue": 0
},
{
"buildingName": "A10",
"pueValue": 1.7925
},
{
"buildingName": "A11",
"pueValue": 1.1893
},
{
"buildingName": "A18",
"pueValue": 1.3365
}
];
---------------数据结构---------------
let chatLeft;
const initChartBar = ({ domId, list }) => {
console.log({ list });
const scale = window.innerWidth / 1600;
const xData = [];
const yData = [];
const maxData = [];
list.forEach((item) => {
xData.push(item.buildingName);
yData.push(item.pueValue);
maxData.push(2);
});
const option = {
grid: {
left: '1%',
right: '1%',
bottom: '3%',
top: '5%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#000',
fontSize: 16 * scale,
},
axisPointer: {
type: 'shadow',
},
formatter: function (params) {
console.log({ params });
let str = '';
for (let i = 0; i < params.length; i++) {
if (params[i].seriesName === '数据') {
str += params[i].name + ': ' + params[i].value + '<br/>';
}
}
return str;
},
},
xAxis: {
type: 'category',
data: xData,
axisLabel: {
color: '#B0B3C1',
fontSize: 14 * scale,
},
axisLine: {
show: true,
lineStyle: {
color: '#363B58',
shadowColor: '#000000',
},
},
axisTick: {
show: false,
},
},
yAxis: {
type: 'value',
axisLabel: {
color: '#B0B3C1',
fontSize: 12 * scale,
},
max: 1.6,
min: 0,
interval: 0.1,
axisLine: {
show: true,
lineStyle: {
color: '#363B58',
},
},
splitLine: {
show: true,
lineStyle: {
type: [10, 10], //y轴分割线类型
color: '#DCDCDC',
},
},
},
backgroundColor: 'transparent',
series: [
{
name: '数据',
type: 'bar',
barWidth: 20 ,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#ffff22',
},
{
offset: 1,
color: '#00ccff',
},
]),
},
},
data: yData,
zlevel: 0,
z: 6,
},
{
// 分隔
name: '数据分隔',
type: 'pictorialBar',
itemStyle: {
color: '#FFFFFF',
},
symbolRepeat: 'fixed',
symbolMargin: 2,
symbol: 'rect',
symbolClip: true,
symbolSize: [20, 5],
symbolPosition: 'start',
symbolOffset: [0, -5],
data: yData,
z: 4,
zlevel: 2,
},
{
name: '背景',
type: 'pictorialBar',
itemStyle: {
color: 'rgba(158,183,213,0.20)',
},
emphasis: {
disabled: true,
},
legendHoverLink: false,
barGap: '-100%',
symbolRepeat: 'fixed',
symbolMargin: 2,
symbol: 'rect',
symbolClip: true,
symbolSize: [20, 5],
symbolPosition: 'start',
symbolOffset: [0, 0],
data: maxData,
z: 4,
zlevel: 0,
animation: false,
},
],
};
const dom = document.getElementById(domId);
if (!chatLeft) {
chatLeft = echarts.init(dom!);
}
chatLeft.setOption(option);
};
// 调用 要在dom结构渲染完才能调用 比如在onmounted里面 或者 点击事件里
initChartBar({ 'park-left', res });