[]
基础图表组件提供ECharts深度定制功能，支持通过JS代码直接修改option对象，完全兼容ECharts官方配置规范。您可通过右上角查看配置项按钮快速获取当前图表默认配置，自定义内容将智能覆盖初始设置，满足企业级可视化定制需求。
本文将指导您在Wyn中使用自定义属性。
界面要求： 已进入仪表板设计界面，且仪表板至少已绑定一个基础图表组件（如柱状图）完成数据绑定（如“Excel数据-缓存数据集“）。
例如：使用JS 代码自定义属性修改了柱状图的显示样式，预览效果如下：
使用柱状图组件，绑定数据。
选中柱状图组件，将下面的js代码复制进自定义属性并保存。
具体代码如下，供您参考。
let datas = []
let cates = []
let comebineData = []
const total = 70000
option.xAxis.data.forEach(item => {
cates.push(item.value)
})
option.series[0].data.forEach(item => {
datas.push(item.value)
})
cates.forEach((item, index) => {
let tmp = { name: item, value: datas[index] }
comebineData.push(tmp)
})
option = {
backgroundColor: '#071347',
xAxis: {
max: total,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
}
},
grid: {
left: 80,
top: 20, // 设置条形图的边距
right: 80,
bottom: 20
},
yAxis: [{
type: "category",
inverse: false,
data: comebineData,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
}],
series: [{
// 内
type: "bar",
barWidth: 18,
legendHoverLink: false,
silent: true,
itemStyle: {
normal: {
color: function (params) {
var color;
console.log(params)
if (params.dataIndex == 0) {
color = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: "#EB5118" // 0% 处的颜色
},
{
offset: 1,
color: "#F21F02" // 100% 处的颜色
}
]
}
} else if (params.dataIndex == 1) {
color = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: "#FFA048" // 0% 处的颜色
},
{
offset: 1,
color: "#B25E14" // 100% 处的颜色
}
]
}
} else if (params.dataIndex == 2) {
color = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: "#F8E972" // 0% 处的颜色
},
{
offset: 1,
color: "#E5C206" // 100% 处的颜色
}
]
}
} else {
color = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: "#1588D1" // 0% 处的颜色
},
{
offset: 1,
color: "#0F4071" // 100% 处的颜色
}
]
}
}
return color;
},
}
},
label: {
normal: {
show: true,
position: "left",
formatter: "{b}",
textStyle: {
color: "#fff",
fontSize: 14
}
}
},
data: comebineData,
z: 1,
animationEasing: "elasticOut"
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#061348"
}
},
symbolRepeat: "fixed",
symbolMargin: 6,
symbol: "rect",
symbolClip: true,
symbolSize: [1, 21],
symbolPosition: "start",
symbolOffset: [1, -1],
symbolBoundingData: this.total,
data: comebineData,
z: 2,
animationEasing: "elasticOut"
},
{
// 外边框
type: "pictorialBar",
symbol: "rect",
symbolBoundingData: total,
itemStyle: {
normal: {
color: "none"
}
},
label: {
normal: {
formatter: (params) => {
var text;
if (params.dataIndex == 1) {
text = '{a| 100%}{g| ' + params.data + '}';
} else if (params.dataIndex == 2) {
text = '{b| 100%}{g| ' + params.data + '}';
} else if (params.dataIndex == 3) {
text = '{c| 100%}{g| ' + params.data + '}';
} else if (params.dataIndex == 4) {
text = '{d| 100%}{g| ' + params.data + '}';
} else if (params.dataIndex == 5) {
text = '{e| 100%}{g| ' + params.data + '}';
} else {
text = '{f| 100%}{g| ' + params.data + '}';
}
return text;
},
rich: {
a: {
color: 'red'
},
b: {
color: 'blue'
},
c: {
color: 'yellow'
},
d: {
color: "green"
},
e: {
color: "pink"
},
f: {
color: "purple"
},
g: {
color: "#ffffff"
}
},
position: 'right',
distance: 0, // 向右偏移位置
show: true
}
},
data: datas,
z: 0,
animationEasing: "elasticOut"
},
{
name: "外框",
type: "bar",
barGap: "-120%", // 设置外框粗细
data: [total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total],
barWidth: 25,
itemStyle: {
normal: {
color: "transparent", // 填充色
barBorderColor: "#1C4B8E", // 边框色
barBorderWidth: 1, // 边框宽度
// barBorderRadius: 0, //圆角半径
label: {
// 标签显示位置
show: false,
position: "top" // insideTop 或者横向的 insideLeft
}
}
},
z: 0
}
], dataZoom: [
{
type: "slider",
show: true,
xAxisIndex: [0],
endValue: 50000,
startValue: 0
}
]
};
return option预览查看效果。效果参考操作步骤开始部分的动图。