1

Echarts の作業を開始し、いくつかのチャートを実装しました。クライアントの Web サイトにグラフを実装する必要があります。私が遭遇している問題は、バーが次々と後ろに移動していて、値が小さい場合、後ろにあるバーが見えないことです。

これが私のコードです：

var provider = ['JD','JR'];
option = {
    title:{


  },
    tooltip : {
        trigger: 'axis'
    },
    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 : true,
    legend: {
        data:['2012','2013','Baseline']
    },
    xAxis : [
        {
            type : 'value',
          min :0,
          max: provider.length,
          scale: true,
          splitNumber: provider.length,
          axisLabel:{
          	formatter: function(v){
              if(v!=0)
            	return provider[v-1];
            else 
              return ;}
          } 

        }
    ],
    yAxis : [
        {
            type : 'value',
            name : '',
             scale:true,
  			min: 0,
          max:100,
          splitNumber:10,
            axisLabel : {
                formatter: '{value}%'
            }
        },

    ],
    series : [

        {
            name:'Baseline',
            type:'line',
            data:[ [1,30],[2,10],[1,20],[2,33.33]
                    ] 
        },
       {
            name:'2012',
            type:'bar',
          barWidth: 30,
            data:[[1,35],[2,50]],

        }, 
               {
    name:'2013',
            type:'bar',
          barWidth: 30,
            data:[[1,30],[2,33.33]],
        }

    ]
};

画像

上の画像でわかるように、バーは同じ xaxis ポイント上で前後に移動しています。分けて示したいと思います。助けてください

皆さん、ありがとうございました

4

2 に答える 2

1

stackまたは、シリーズ内でset プロパティを使用できます。スタックが 2 つのシリーズで同じ値を持っている場合、それらは互いの上に表示され、チャートがよりコンパクトになり、読みやすくなります。

series : [
    {
        name:'Baseline',
        type:'line',
        stack: 'total',
        data:[ [1,30],[2,10],[1,20],[2,33.33] ]
    },
    {
        name:'2012',
        type:'bar',
        stack: 'total',
        barWidth: 30,
        data:[[1,35],[2,50]],
    },
    {
        name:'2013',
        type:'bar',
        stack: 'total',
        barWidth: 30,
        data:[[1,30],[2,33.33]],
    }
]
于 2018-04-13T11:17:58.203 に答える