echarts踩坑记录---仪表盘设置仪表盘的位置

问题描述

 工作中遇到了需要展示比值的图表需求，由于其他位置使用了echarts的图表，遂打消了使用el-progress 进度条模拟仪表盘的想法，毕竟直接使用还是香的啊
  先看下官方示例的效果：

  使用了echarts的仪表盘以后，一切似乎向着预期的方向在发展，但是突然发现一个问题，相比其他echarts图表可以通过设置 gird 属性来设置图表组件的容器位置，例如与left、top等的偏移量。但是仪表盘并不支持此属性（设置后无效），看着仪表盘比其他的echarts图表高了一头，就像 ‘土猪进了羊圈’，一点都不和谐，毕竟一家人就要整整齐齐啊！

解决方法

  查阅官方文档，并没有找到设置仪表盘位置的方法，倒是找到了设置title 标题等的方法，但显然不是需要的，通过观察，以及文档阅读的推断，发现仪表盘是从给定容器的中心点作为圆心来绘制的，可以通过radius 来指定仪表盘的大小。
 既然是以容器的中心点为圆心，那么是否可以改变该圆心的位置呢？以这个为方向，最后找到了解决的方法，可以在series 设置 center 来指定圆心的位置，此属性的值为一个数组，内部元素为字符串，可以取相对容器大小的百分比，也可以使用固定的值。
以官方示例为例：

添加center 属性后：

示例代码

 tips：此代码为官方示例的代码，只是在代码中增加了center属性~~~

option = {
    tooltip: {
        formatter: '{a} 
{b} : {c}%'
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: '业务指标',
            type: 'gauge',
            radius: '70%',
            center:['10%','20%'],
            detail: {formatter: '{value}%'},
            data: [{value: 66, name: '完成率'}]
        }
    ]
};

setInterval(function () {
    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChart.setOption(option, true);
},2000);

  至此使用echarts仪表盘是设置仪表盘的位置就实现了，由于时间关系不确定是否还存在其他的方式来解决此问题。如有更好的方法，欢迎评论告知！
 (tips：期初由于各种属性设置均不能实现效果，故想通过页面布局的调整来实现，大致思路为在目标容器中添加一个div最为仪表盘的实际渲染容器，然后如果定位的方式将仪表盘的图移动到视觉上比较舒服的位置，但此时可能存在一个问题，随着页面的缩放，容器大小改变后仪表盘是否会跟随容器改变大小，执行resize()。好了，本篇结束，如果对此方法有兴趣的同学，欢迎告知可行性呢~~~)