var option = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'xxxx一二三四五'],
[57.1, 78254, 'xxx一二四'],
[74.4, 41032, 'xxxx一三四'],
[50.1, 12755, 'xxxx二三四'],
[89.7, 20145, 'xxx一二'],
[68.1, 79146, 'xxx一四'],
[19.6, 91852, 'xxx三四'],
[10.6, 101852, 'xx二三'],
[32.7, 20112, 'x四']
]
},
tooltip: {
trigger: 'axis',
// 重写提示框内容样式
formatter: function (params, ticket, callback) {
var showHtm=params[0].data[2]+'<br>';
showHtm+= '断点率: ' + params[0].data[0] + '%<br>'
showHtm+= '断点次数: ' + params[0].data[1] + '<br>'
return showHtm;
}
},
grid: {containLabel: true},
xAxis: {
show:false,
axisLine:{
show:false
},
axisTick:{
show:false
},
splitLine:{
show:false
}
},
yAxis: {
type: 'category',
axisLine:{
show:false
},
axisTick:{
show:false
},
splitLine:{
shwo:false
},
axisLabel :
{
// 刻度标签的内容格式器
formatter : function (value)
{
let valueTxt = '';
if (value.length > 7) {
valueTxt = value.substring(0, 7) + '...';
}
else {
valueTxt = value;
}
return valueTxt ;
}
}
},
visualMap: {
orient: 'horizontal',
left: 'center',
min: 10,
max: 100,
show:false,
// text: ['High Score', 'Low Score'],
// Map the score column to color
dimension: 0,
inRange: {
color: ['#bbb', '#000']
}
},
series: [
{
type: 'bar',
label:{
show:true,
position:'insideRight',
formatter:function(params) {
return params.value[0]+"%";
}
},
encode: {
// Map the "amount" column to X axis.
x: 'amount',
// Map the "product" column to Y axis
y: 'product'
}
}
]
};
Echarts - 柱状图(Simple Encode) 样式修改
于 2019-08-23 23:21:05 首次发布