返回

echarts的常用方法有哪些？解析echarts对象的常规操作

前端

1. 初始化方法

init方法用于初始化echarts实例对象。它接受一个DOM元素或元素的ID作为参数，并返回一个echarts实例对象。

var myChart = echarts.init(document.getElementById('myChart'));

2. 注册主题方法

registerTheme方法用于注册主题。只有注册过的主题，才能在init方法中使用该主题。

echarts.registerTheme('myTheme', {
  color: ['#ff0000', '#00ff00', '#0000ff'],
  backgroundColor: '#ffffff'
});

3. 注册地图方法

registerMap方法用于注册地图数据。geo组件使我们能够在地图上展示数据。

echarts.registerMap('china', {
  paths: {
    '北京': [
      ['M', 116.46, 39.92],
      ['L', 116.46, 40.48],
      ['L', 117.24, 40.48],
      ['L', 117.24, 39.92],
      ['Z']
    ]
  }
});

4. setOption方法

setOption方法用于设置图表选项。图表选项是一个对象，它包含了图表的所有配置信息。

myChart.setOption({
  title: {
    text: '某地区月降水量'
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [12.0, 21.5, 25.0, 23.4, 18.2, 15.0, 9.3, 5.9, 2.9, 3.9, 10.8, 17.0],
    type: 'bar'
  }]
});

5. 提示框

提示框用于显示数据信息。当鼠标悬停在图表元素上时，提示框就会出现。

myChart.on('mousemove', function (params) {
  var value = params.value;
  var name = params.name;
  var tip = name + '：' + value;
  myChart.setOption({
    tooltip: {
      formatter: tip
    }
  });
});

以上是echarts的一些常用方法。通过这些方法，我们可以轻松创建各种各样的图表。