3、交互API

Qwe7

发布于 2022-06-18 08:20:37

7500

文章被收录于专栏：网络收集网络收集

3、交互API

1.全局echarts 对象

全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的

echarts.init

初始化ECharts实例对象

使用主题

echarts.registerTheme

注册主题

只有注册过的主题,才能在init方法中使用该主题

echarts.registerMap

注册地图数据

$.get('json/map/china.json', function (chinaJson) {

echarts.registerMap('china', chinaJson);

});

geo组件使用地图数据

  var option = {
  geo: {
    type: 'map',
    map: 'china',
  },
})

echarts.connect

一个页面中可以有多个独立的图表

每一个图表对应一个 ECharts 实例对象

connect 可以实现多图关联，传入联动目标为 EChart 实例，支持数组

保存图片的自动拼接

刷新按钮

重置按钮

提示框联动、图例选择、数据范围修改等。。。

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="js/echarts.min.js"></script>
  <script src="js/jquery.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px;border:1px solid red"></div>
  <div style="width: 600px;height:400px;border:1px solid green" id="div1"> </div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"), 'itcast') 
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明',
      '茅台', '二妞', '大 强'
    ]
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataAr
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'bar',
        data: yDataAr
      }]
    };
    mCharts.setOption(option) $.get('json/map/china.json', function (chinaJson) {
      echarts.registerMap('china', chinaJson) 
      var mCharts2 = echarts.init(document.querySelector('#div1'));
      var option2 = {
        geo: {
          type: 'map',
          map: 'china'
        }
      }
      mCharts2.setOption(option2) 
      echarts.connect([mCharts, mCharts2])
    })
  </script>
</body>
</html>

这样, 由于我们打开了toolbox中的saveAsImage, 所以会出现下载图片的按钮. 而通过echarts.connect([mCharts, mCharts2]) , 此时点击下载图片按钮, 保存下来的图片就是两个图表的图片了

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

编程算法