Echarts一个柱状图包含多个信息

Echarts 相关操作

• 一个柱状图包含多个信息
• • 数据
  • 提示
  • 效果图
  • 完整代码

一个柱状图包含多个信息

数据

这里的statisticData 类型为：List<Map<Object,Object>>

series: [{name: '统计信息',type: 'bar',data: statisticData,}]

提示

tooltip:{trigger:'axis',axisPointer:{type:'shadow',},formatter:function(params) {return params[0].data.value + "<br>"+ params[0].data.test;}},

效果图

完整代码

var chartDom = document.getElementById('chartMain');
var myChart = echarts.init(chartDom);
var option;
option = {tooltip:{trigger:'axis',axisPointer:{type:'shadow',},formatter:function(params) {console.log(params);return  "<b>"+params[0].axisValue+":</b><br>"+"<div style='display: flex;justify-content: space-between;width: 300px'><span>常住农户加入合作经济组织比率(%):</span><span>"+params[0].data.value+"%</span></div>"+"<div style='display: flex;justify-content: space-between;width: 300px'><span>入社入会农户数:</span><span>"+params[0].data.test+"</span></div>";}},legend: {data: ['统计信息'],},xAxis: {type: 'category',data: [1,2,3]},yAxis: {type: 'value',axisLabel: {show: true,interval: 'auto',formatter: '{value}%'},},series: [{name: '统计信息',type: 'bar',data: [{value:1,test:23},{value:1,test:23},{value:1,test:23}],}]};
myChart.setOption(option);