1.竖向双Y轴柱状图
核心代码:
var amOptions = { "type": "serial", "theme": "light", "legend": { "horizontalGap": 0, "maxColumns": 1, "position": "right", "useGraphSettings": true, "markerSize": 10, 'fontSize': 24, }, "dataProvider": data, "valueAxes": [ { "id":"v1", "stackType": "100%", "axisAlpha": 0.3, "gridAlpha": 0, 'fontSize': 24, 'autoGridCount': false, 'gridCount': 0, "guides": [ { "label": '0', "value": '0', "toValue": '0' }, { "label": '20%', "value": '20', "toValue": '20' }, { "label": '40%', "value": '40', "toValue": '40' }, { "label": '60%', "value": '60', "toValue": '60' }, { "label": '80%', "value": '80', "toValue": '80' }, { "label": '100%', "value": '100', "toValue": '100' } ] }, { "id":"v2", "stackType": "100%", "axisAlpha": 0.3, "gridAlpha": 0, 'fontSize': 24, 'autoGridCount': false, 'gridCount': 0 } ], "graphs": [ { "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.8, "labelText": "[[value]]%", "lineAlpha": 0.3, 'lineColor': '#f79646', "title": "A", "type": "column", "color": "#000000", 'fontSize': 16, 'valueAxis': 'v1', "valueField": "A" }, { "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.8, "labelText": "[[value]]%", "lineAlpha": 0.3, 'lineColor': '#ffcc00', "title": "B", "type": "column", "color": "#000000", 'fontSize': 16, 'valueAxis': 'v1', "valueField": "B" }, { "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.8, "labelText": "[[value]]%", "lineAlpha": 0.3, 'lineColor': '#4bacc6', "title": "C", "type": "column", "color": "#000000", 'fontSize': 16, 'valueAxis': 'v1', "valueField": "C" }, { "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.8, "labelText": "[[value]]%", "lineAlpha": 0.3, 'lineColor': '#558ed5', "title": "D", "type": "column", "color": "#000000", 'fontSize': 16, 'valueAxis': 'v1', "valueField": "D" }, { "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.5, "labelText": "[[value]]%", "lineAlpha": 0.3, 'lineColor': '#f79646', "title": "年级 A", "type": "column", "color": "#000000", 'fontSize': 16, 'valueAxis': 'v2', "valueField": "A2", "visibleInLegend":false }, { "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.5, "labelText": "[[value]]%", "lineAlpha": 0.3, 'lineColor': '#ffcc00', "title": "年级 B", "type": "column", "color": "#000000", 'fontSize': 16, 'valueAxis': 'v2', "valueField": "B2", "visibleInLegend":false }, { "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.5, "labelText": "[[value]]%", "lineAlpha": 0.3, 'lineColor': '#4bacc6', "title": "年级 C", "type": "column", "color": "#000000", 'fontSize': 16, 'valueAxis': 'v2', "valueField": "C2", "visibleInLegend":false }, { "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.5, "labelText": "[[value]]%", "lineAlpha": 0.3, 'lineColor': '#558ed5', "title": "年级 D", "type": "column", "color": "#000000", 'fontSize': 16, 'valueAxis': 'v2', "valueField": "D2", "visibleInLegend":false } ], "categoryField": "kemu", "categoryAxis": { "gridPosition": "start", "axisAlpha": 0, "gridAlpha": 0, "position": "left", 'fontSize': 24, }, "export": { "enabled": true } }
2.横向柱状叠加图
核心代码:
//叠加柱状图 var amOptions = { "type": "serial", "theme": "light", "legend": { "horizontalGap": 10, "maxColumns": 1, "position": "right", "useGraphSettings": true, "markerSize": 10, 'fontSize': 24, }, "dataProvider": data, "valueAxes": [{ "stackType": "100%", "axisAlpha": 0, "gridAlpha": 0.5, 'autoGridCount': false, 'gridCount': 0, 'fontSize': 24, }], "graphs": [{ "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.8, "labelText": "[[value]]%", "lineAlpha": 0.3, "title": "A水平", "type": "column", "color": "#000000", "valueField": "A", "fillColorsField": "Acolor", 'lineColor': '#548235', 'fontSize': 16, }, { "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.8, "labelText": "[[value]]%", "lineAlpha": 0.3, "title": "B水平", "type": "column", "color": "#000000", "valueField": "B", "fillColorsField": "Acolor", 'lineColor': '#a9d18e', 'fontSize': 16, }, { "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.8, "labelText": "[[value]]%", "lineAlpha": 0.3, "title": "C水平", "type": "column", "color": "#000000", "valueField": "C", "fillColorsField": "Acolor", 'lineColor': '#c5e0b4', 'fontSize': 16, }, { "balloonText": "<b>[[title]]</b><br><span style='font-size:24px'>[[category]]: <b>[[value]]</b></span>", "fillAlphas": 0.8, "labelText": "[[value]]%", "lineAlpha": 0.3, "title": "D水平", "type": "column", "color": "#000000", "valueField": "D", "fillColorsField": "Acolor", 'lineColor': '#e2f0d9', 'fontSize': 16, }], "rotate": true, "categoryField": "classname", "categoryAxis": { "gridPosition": "start", "axisAlpha": 0, "gridAlpha": 0, "position": "left", 'fontSize': 24, }, "export": { "enabled": true } }
3.一些重要的属性:
rotate:是否旋转(横向/竖向)
valueAxes:y轴的值
categoryAxis:x轴的值
"labelText": "[[value]]%",显示百分号
另外如果显示的字体大于一个柱子的宽度,就会消失,可以适当调小即可