1.没有百分比的源码:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '堆叠条形图';
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['周一','周二','周三','周四','周五']
},
series: [
{
name: '直接访问',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [1, 20, 3, 30, 40]
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [99, 80, 97, 70, 60]
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
myChart.on('click', function (params) {
console.log(params);
});
</script>
</body>
</html>
注意如果上面的js失效了。自己改下啊。或者用本地的,或者用其他cdn的。
可以看到并没有百分比,如下图:
2.修改format带百分比:
1.柱状图里面的format,关键代码如下:
{
name: '直接访问',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: '{c}%'
}
},
data: [1, 20, 3, 30, 40]
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: '{c}%'
}
},
data: [99, 80, 97, 70, 60]
}
其实就是增加了两行 formatter: '{c}%',
看下,柱状图就会显示百分比了:
但是可以看到,弹框里面“直接访问:30” 依然不是百分比。所以这个也要改下。
3.修改tooltip下面的format,实现百分比,核心代码如下:
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'
},
其实就是增加了:formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'
看下效果
可以看到有百分比了。
那么上面format中的a,b,c什么意思呢,参考官方文档:
模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:
折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。
上面用的“字符串模板”方式。
还可以使用“回调函数”方式,具体如下
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (datas) {
var res = datas[0].name + '<br/>'
for (var i = 0, length = datas.length; i < length; i++) {
res +=datas[i].componentType + ' ';
res +=datas[i].seriesType + ' ';
res +=datas[i].seriesIndex + ' ';
res +=datas[i].seriesName + ' ';
res +=datas[i].dataIndex + ' ';
res +=datas[i].data + '% ';
res +=datas[i].value + '% ';
res +=datas[i].color + '<br/>';
}
return res
}
},
效果如下:
可以看到值依然可以百分比显示,当然多了很多不需要的内容,你们可以自行调整,我是为全一点,让你看到每个字段的意思。
具体这些字段的意思,其实官方也有说明:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}
参考官方api地址: