【组件模板】扩展条形图

收藏

显示效果：

实现步骤：
1.使用Echarts图表
image.png499259643.png

2.绑定数据

3.属性中调整自定义属性
image.png470920409.png

代码内容：

const x1=option.xAxis.data.map(x=>{
return x.value;
})
const data=option.series[0].data.map(x=>{
return x.value;
})
const payload = {
data: {
unit: [''],
x: x1,
data1: data,
},
};
const unit = payload.data.unit || [];
const x = payload.data.x || [];
const data1 = payload.data.data1 || [];
const title = payload.data.title || [];
const max = Math.max(...data1)
const maxData = data1.map((item, index) => {
return {
value: [max, index],
name: x[index],
};
});
const barData = data1.map((item, index) => {
return {
value: [item, index],
name: x[index],
};
});
const _option = {
grid:{
top:option.grid.top,
left: option.grid.left,
right: option.grid.right,
bottom:option.grid.bottom-30,
containLabel: true,
},
legend: option.legend,
tooltip: option.tooltip,
xAxis: {
show: false,
},
yAxis: [
{
name: '',
type: 'category',
inverse: true,
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: x,
},
{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: option.yAxis.axisLabel,
data: data1,
},
],
series: [
{
name: '值',
type: 'bar',
zlevel: 1,
itemStyle: {
barBorderRadius: 0,
color: '#26a69a',
},
barWidth: 20,
data: barData,
label: {
...option.xAxis.axisLabel,
position: [0, -16],
align: 'left',
show: true,
formatter: (params) => {
return params.name;
},
},
barMaxWidth: 40,
markLine: {
label: {
color: '#26a69a',
},
},
},
{
name: '背景',
type: 'bar',
barWidth: 20,
barGap: '-100%',
data: maxData,
itemStyle: {
normal: {
color: 'rgba(105,131,242,.3)',
barBorderRadius: 30,
},
borderRadius: [5, 5, 0, 0],
},
label: {
show: false,
},
barMaxWidth: 40,
markLine: {
label: {
color: '#26a69a',
},
},
},
{
name: '内圆',
type: 'scatter',
hoverAnimation: false,
data: barData,
yAxisIndex: 0,
symbolSize: 22,
itemStyle: {
normal: {
color: '#26a69a',
opacity: 1,
},
},
zlevel: 2,
label: {
show: false,
},
},
{
name: '外圆',
type: 'scatter',
hoverAnimation: false,
data: barData,
yAxisIndex: 0,
symbolSize: 28,
symbol:
'path://M512 960C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z m0-268.8a179.2 179.2 0 1 0 0-358.4 179.2 179.2 0 0 0 0 358.4z',
itemStyle: {
color: 'rgb(255, 255, 255)',
opacity: 1,
borderColor: 'rgba(44, 111, 226, 0.2)',
borderWidth: 2,
},
zlevel: 3,
label: {
show: false,
},
},
],
};
return _option;

复制代码

运行，浏览效果。
示例案例：

wyn-export-20240204153116.zip (398.79 KB, 下载次数: 16)

		自动登录	找回密码
密码			立即注册

[仪表板] 【组件模板】扩展条形图

0 个回复