amcharts示例

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]]%",显示百分号

另外如果显示的字体大于一个柱子的宽度，就会消失，可以适当调小即可