板块收支占比分析echarts category配置项内容和展示

      var yData1 = [100, 90,80,110];
var yData2 = [150,160,120,150];
var name1 = "XX";
var name2 = "XXX";
option = {
    backgroundColor:'#101736',
    tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            label:{
            }
          },
          formatter: function(params) {
            var tipString = params[0].axisValue + "<br />";
            var key = "value";
            params.sort(function(obj1, obj2) {
                var val1 = obj1[key];
                var val2 = obj2[key];
                if (val1 < val2) {
                    return 1;
                } else if (val1 > val2) {
                    return -1;
                } else {
                    return 0;
                }
            })
            var indexColor;
            for (var i = 0, length = params.length; i < length; i++) {
                if (params[i].componentSubType == 'bar') {
                    indexColor = params[i + 1].color;
                    tipString += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' + indexColor + '"></span>';
                    tipString += '<span data-type ="lineTip" data-val=' + params[i].value + '>' + params[i].seriesName + '：' + params[i].value + '</span><br />';
                }
            }
            return tipString;
        }
    },
    title: {
            text: "板块收支占比分析",
            x: "4%",
            width: 173,
            height: 163,
            fontSize: 22,
            textStyle: {
                color: '#fff',
                fontSize: '22'
            },
            subtextStyle: {
                color: '#90979c',
                fontSize: '16',
    
            },
        },
    legend: {
            orient:'horizontal',
            icon: 'squareRatio', //图例形状
            selectedMode: false,
            bottom:'90%',
            right:'30%',
            itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
            itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
            itemGap: 80, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
            textStyle: {
                fontSize: 14,
                color: '#fff',
            }
        },
    grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top:'16%',
          containLabel: true
        },
    animation: false,
    xAxis: {
          type: 'category',
          data: ['总公司','一分','二分','三分'],
          axisLine: {
            lineStyle: {
              color: 'white'

            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei'
            }
          },
        },
    yAxis: {
          type: 'value',
          max:'200',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type:'dashed',
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {}
        },
    series: [{
            name: name1,
            type: 'bar',
            itemStyle: {
                normal: {
                    opacity: .9,
                    
                }
            },
            barWidth: "30",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(192,0,255,0.6)'
                }, {
                    offset: 1,
                    color: 'rgba(192,0,255,0.2)'
                }]),
            data: yData1
        },
        {
            name: name1,
            type: 'pictorialBar',
            symbol: "diamond",
            symbolSize: [30, 8],
            symbolOffset: [-20, 0],
            z: 12,
            color: "rgba(192,0,255,0.6)",
            data: yData1
        },
        {
            name: name1,
            type: 'pictorialBar',
            symbol: "diamond",
            symbolSize: [30, 8],
            symbolOffset: [-20, -3],
            symbolPosition: 'end',
            z: 12,
            color: "rgba(192,0,255,1)",
            data: yData1
        },
        {
            name: name2,
            type: 'bar',
            itemStyle: {
                normal: {
                    opacity: .9,
                    
                }
            },
            barWidth: "30",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,215,255,0.6)'
                }, {
                    offset: 1,
                    color: 'rgba(0,215,255,0.2)'
                }]),
            data: yData2
        },
        {
            name: name2,
            type: 'pictorialBar',
            symbol: "diamond",
            symbolSize: [30, 8],
            symbolOffset: [20, 0],
            color: "rgba(0,215,255,0.6)",
            z: 12,
            data: yData2
        },
        {
            name: name2,
            type: 'pictorialBar',
            symbol: "diamond",
            symbolSize: [30, 8],
            symbolOffset: [20, -3],
            symbolPosition: 'end',
            z: 12,
            color: "rgba(0,215,255,0.6)",
            data: yData2
        }
    ]
}