实现echarts图表、图例自适应

3,314 阅读2分钟

现象

在移动端开发的过程中使用了echarts,因为要涉及到移动端的适配,所以要实现根据窗口的大小来改变echarts的图表、图例

但是我发现echarts提供的myCharts()只能使得图表自适应,不能使得图例自适应

需求

这个时候就出现了一个问题,我应该如何延伸这个问题,有两个思路:

一般移动端开发的时候,因为我现在的是微信公众号的开发,所以不存在页面放大缩小的问题

  1. 简单的操作就是加载页面时候获取图表盒子的大小动态计算并设置一下legend的相关图例参数,这个参数就是根据设备做好的适配,因为每个页面加载出来的时候页面的大小已经固定了,所以只要在这个时候显示正确就行
  2. 另一种复杂点的操作就是实现页面缩放时候对图标、图例进行自适应的适配

实现

实现的是上述的第2种需求

var myChart = echarts.init(dom)

console.log(myChart.getOption())

window.onresize = resize

var option

// 初始化加载时候执行

resize()

// 窗口大小变化的时候执行

function resize () {

//   获取盒子的高度

const legendHeight = dom.offsetHeight

// 计算缩放倍数

const multiple = (dom.offsetHeight / 156).toFixed(4)

//   设置需要的参数

const legendItemGap = 20 * multiple

const legendItemWidth = 4 * multiple

const legendItemHeight = 15 * multiple



option = {

  color: ['#3299fb', '#f8c34a', '#badcfa', '#d6548f', '#fa9414'],

  tooltip: {

    trigger: 'item'

  },

  legend: {

    padding: 0,

    height: legendHeight, // 图例的盒子的高度

    selectedMode: false, // 控制是否可以通过点击图例改变系列的显示状态

    orient: legendOrient, // 图例列表的布局朝向。

    top: 0, // 图例列表的位置

    left: legendLeft,

    itemGap: legendItemGap, // 图例间隔

    itemWidth: legendItemWidth, // 图例的宽度

    itemHeight: legendItemHeight,

    formatter: function (name) {

      return '111' + name

    }

  },

  series: [

    {

      center: ['25%', '50%'], // 圆心的位置控制

      type: 'pie',

      startAngle: 0, // 开始的角度

      radius: ['55%', '95%'], // 饼图的半径

      avoidLabelOverlap: false,

      label: {

        show: true,

        position: 'left',

        overflow: 'breakAll',

        formatter: '{b}: {c}:{d}%'

      },

      emphasis: {

        label: {

          show: true,

          fontSize: '40',

          fontWeight: 'bold'

        }

      },

      labelLine: {

        show: false

      },

      data: simulationData

    }

  ]

}

// 监听图表容器的大小并改变图表大小

myChart.resize()

// 使用刚指定的配置项和数据显示图表

option && myChart.setOption(option)

}