echats柱状图分组显示不同的标签
2018-11-15 21:38:40 JS 被浏览次
平常我们应用多的场景是,按照一定分组显示,如下图。
但是现在如果每年的柱子的名字不一样,可以参考下面的代码,在label的formatter中进行处理。
<div style="text-align:center; font-size: 24px; padding: 20px;"> 近三年金额排在前5位的单位 </div> <div style="text-align:center;width:800px;height:500px;margin-left:auto;margin-right:auto;" id="sta_container"> </div> <script type="text/javascript"> var resultRes = {}; resultRes._DATA_ = {}; resultRes._DATA_.unitMoney1 = '[{"value":91, "name":"name1"},{"value":89, "name":"name2"},{"value":85, "name":"name3"}]'; resultRes._DATA_.unitMoney2 = '[{"value":153, "name":"XXXX1"},{"value":120, "name":"XXXX2"},{"value":76, "name":"XXXX3"}]'; resultRes._DATA_.unitMoney3 = '[{"value":76, "name":"随心所欲"},{"value":97, "name":"任性"},{"value":132, "name":"YYYYY3"}]'; resultRes._DATA_.unitMoney4 = '[{"value":167, "name":"ZZZZZ1"},{"value":123, "name":"ZZZZZ2"},{"value":176, "name":"就是这么拽"}]'; resultRes._DATA_.unitMoney5 = '[{"value":189, "name":"OOOOO1"},{"value":112, "name":"OOOOO2"},{"value":83, "name":"OOOOO3"}]'; var dom = document.getElementById("sta_container"); var myChart = echarts.init(dom); var labelOption = { normal: { show: true, rotate: 90, align: 'left', verticalAlign: 'middle', position: 'insideBottom', distance: 15, formatter:function(params){ str = params.data.name + " " + params.data.value return str }, fontSize: 16, rich: { name: { textBorderColor: '#fff' } } } }; var option = { color: ['#857ac6', '#113ace', '#49da47', '#79e229', '#068e23'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['单位一', '单位二', '单位三', '单位四', '单位五'] }, calculable: true, xAxis: [ { type: 'category', axisTick: {show: false}, data: ['2016', '2017', '2018'] } ], yAxis: [ { type: 'value' } ], series: [ { name: '单位一', type: 'bar', label: labelOption, data: JSON.parse(resultRes._DATA_.unitMoney1) }, { name: '单位二', type: 'bar', label: labelOption, data: JSON.parse(resultRes._DATA_.unitMoney2) }, { name: '单位三', type: 'bar', label: labelOption, data: JSON.parse(resultRes._DATA_.unitMoney3) }, { name: '单位四', type: 'bar', label: labelOption, data: JSON.parse(resultRes._DATA_.unitMoney4) }, { name: '单位五', type: 'bar', label: labelOption, data: JSON.parse(resultRes._DATA_.unitMoney3) /* data: [ {value:335, name:'NAME1'}, {value:310, name:'NAME2'}, {value:234, name:'NAME3'} ] */ } ] }; myChart.setOption(option, true); </script>
效果图如下: