ECharts 如何实现如下图表?

范某某 发布于 2016/06/16 22:04
阅读 965
收藏 0
加载中
0
前世疯狂
前世疯狂
option = {
    title : {
        text: '温度计式图表',
        subtext: 'From ExcelHome',
    },
    tooltip : {
        show: false
    },
    legend: {
      selectedMode:false,
        data:['人数']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,
    xAxis : [
        {
            type : 'category',
            data : ['32%','20%','48%']
        },
        {
            type : 'category',
            axisLine: {show:false},
            axisTick: {show:false},
            axisLabel: {show:false},
            splitArea: {show:false},
            splitLine: {show:false},
            data : ['32%','20%','48%']
        }
    ],
    yAxis : [
        {
            type : 'value',
            boundaryGap: [0, 0.1]
        }
    ],
    series : [
        {
            name:'人数',
            type:'bar',
          barCategoryGap: '50%',
            itemStyle: {
                normal: {
                    color: 'tomato',
                    barBorderColor: 'tomato',
                    barBorderWidth: 6,
                    barBorderRadius:0,
                    label : {
                        show: true, 
                      position: 'insideTop',
                      formatter: function(params) {
                            var dataIndex = params.series.data.indexOf(params.value);
                            var labelStr;
                          if(dataIndex == 0) {
                              labelStr = '男人:';
                            }else if(dataIndex == 1) {
                              labelStr = '女人:';
                            }else if(dataIndex == 2) {
                              labelStr = '程序猿:';
                            }
                            return  labelStr + params.value;
                        }
                    }
                }
            },
          data:[160, 100, 240]
        },
        {
            name:'总数',
            type:'bar',
          barCategoryGap: '50%',
            xAxisIndex:1,
            itemStyle: {
                normal: {
                    color: '#fff',
                    barBorderColor: 'tomato',
                    barBorderWidth: 6,
                    barBorderRadius:0,
                    label : {
                        show: true, 
                        position: 'top',
                        formatter: function(params) {
                          if(params.name == option.xAxis[0].data[0]) {
                              return  '总人数:' + params.value;
                            }
                            return  params.value;
                        },
                        textStyle: {
                            color: 'tomato'
                        }
                    }
                }
            },
          data:[500, 500, 500]
        }
    ]

};

以上即为配置

效果图:

提示:看到原效果图上有个重复的标题,处理了下。如果不喜欢请自行微调下。

f
fengjidly
请问这个在 echarts 3有办法实现吗?我测试了下第一个数据会被500的挡住
范某某
范某某
太感谢了,好人
返回顶部
顶部