echarts 小技巧积累

1、极坐标系柱状图调整 图形的位置,可通过设置polar属性的center参数来设置

option = {
  angleAxis: {
    max: 2,
    startAngle: 30,
    splitLine: {
      show: false
    }
  },
  radiusAxis: {
    type: 'category',
    data: ['v', 'w', 'x', 'y', 'z'],
    z: 10
  },
  polar: {
    center: ['35%', '50%'] // 调整位置，第一个参数是水平方向，第二个参数是垂直方向
  },
  series: [
    {
      type: 'bar',
      data: [4, 3, 2, 1, 0],
      coordinateSystem: 'polar',
      name: 'Without Round Cap',
      itemStyle: {
        borderColor: 'red',
        opacity: 0.8,
        borderWidth: 1
      }
    },
    {
      type: 'bar',
      data: [4, 3, 2, 1, 0],
      coordinateSystem: 'polar',
      name: 'With Round Cap',
      roundCap: true,
      itemStyle: {
        borderColor: 'green',
        opacity: 0.8,
        borderWidth: 1
      }
    }
  ],
  legend: {
    show: true,
    data: ['Without Round Cap', 'With Round Cap']
  }
};

2、lenged 超出显示...., 鼠标hover上去显示全部内容，通过设置legend 中的formatter设置 ...

再利用tooltip 实现鼠标hover 上去显示全部内容

legend: {
                show: true,
                right: -20,
                top: 12,
                orient: 'vertical',
                icon: 'circle',
                formatter: function(name){
                    　　　　return name.length>10?name.substr(0,10)+"...":name;
                },
                tooltip: {
                    show: true,
                    trigger: 'item',
                },
                textStyle:{
                    color:'#FFFFFF',
                },
            },