鍍金池/ 問答/HTML/ echarts有沒有辦法為折線設(shè)置這種注釋

echarts有沒有辦法為折線設(shè)置這種注釋

clipboard.png

回答
編輯回答
乞許

app.title = '坐標(biāo)軸刻度與標(biāo)簽對齊';

option = {

xAxis: {
      data: ['流入','流出'],
      axisTick: {
        show: false
      },
      axisLabel: {
        // formatter: '流入'
        margin: 8,
        color: "#5F6370",
        fontSize: 14,
        fontFamily: "MicrosoftYaHei"
      },
      axisLine: {
        lineStyle: {
          color: "#BABABA"
        }
      }
    },
    yAxis: {
      show: false,
      splitLine: { show: false },
      axisLine: {
        show: false
      }
    },
    grid: {
      y: 0,
      backgroundColor: "#fff"
    },
    // animation:false,
    animationDurationUpdate: 300,
    series: [
      {
        name: ['計劃'],
        type: "bar",
        silent: true,
        barWidth: 40,
        barGap: "-88%",
        data: ['174.11','160.5'],
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            barBorderColor: "#6B98D3",
            barBorderWidth: 1,
            color: "transparent",
            barBorderRadius: [3, 3, 0, 0]
          }
        },markLine: {
            symbol: ['none', 'none'],
            symbolRotate:300,
            
            lineStyle:{
                 normal : {
                        color : 'rgba(44,38,21,0.3)',
                        width : '1',
                        type : 'solid', //線的類型 'solid'(實線)'dashed'(虛線)'dotted'(點線)
                        curveness : 0.3, //線條的曲線程度,從0到1
                        opacity : 1
                    // 圖形透明度。支持從 0 到 1 的數(shù)字,為 0 時不繪制該圖形。默認(rèn)0.5
                    },
            },
            data:[[
                {
                    coord:['流入','80'],
                    
                },
                {
                    coord:['1','80'],
                    x:'40%',
                    
                    value:'實際:144.11',
                    label:{
                        show:true,
                        formatter:'11'
                    }
                }
            ],
            [
                {
                    coord:['流出','160'],
                    x:'32.2%'
                },
                {
                    coord:['1','160'],
                    x:'40%',
                    value:'計劃:164.11',
                }
            ],
            
            [
                {
                    coord:['流出','111.11'],
                    x:'72.2%'
                },
                {
                    coord:['1','80'],
                    x:'80%',
                    
                    value:'實際:111.11',
                    label:{
                        show:true,
                        formatter:'11'
                    }
                }
            ],
            [
                {
                    coord:['流入','160'],
                    x:'32.2%'
                },
                {
                    coord:['1','160'],
                    x:'50%',
                    value:'計劃:164.11',
                }
            ]]
        }
      },
      {
        name: '實際',
        yAxisIndex: 0,
        type: "bar",
        barWidth: 30,
        z: 10,
        data: ['144.11','110.5'],
        itemStyle: {
          normal: {
            color: "#6B98D3",
            barBorderRadius: [3, 3, 0, 0]
          },
          emphasis: {
            color: "#6B98D3"
          }
        }
      },
    ]

};

2017年2月18日 12:05
編輯回答
刮刮樂

試試markLine這個配置項

2017年9月20日 22:46