1 つのグローバル echarts オブジェクト

グローバル echarts オブジェクトは、echarts.js の導入後に直接使用できます。

1.1 初期化メソッド

ECharts インスタンスオブジェクトを初期化する

テーマを使用する

1.2 registerThemeメソッド

件名を登録する

登録されたテーマのみが init メソッドでテーマを使用できます

1.3 registerMap メソッド

マップデータを登録する

//记得在上面引入JQuery
$.get('json/map/china.json',function(chinaJson){
    echarts.registerMap('China',chinaJson)
});

地理コンポーネントは地図データを使用します

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

1.4 接続方法

1. ページには複数の独立したグラフを含めることができます

2. 各チャートは ECharts インスタンスオブジェクトに対応します

3.接続はマルチグラフ関連付けを実現でき、受信リンケージターゲットは配列をサポートするEChartsインスタンスオブジェクトです。

写真を保存し、自動的にステッチします

更新ボタン

リセットボタン

プロンプトボックスの連携、凡例の選択、データ範囲の変更など。

2 echartInstance オブジェクト

echarts.init メソッドを呼び出した後に echartInstance オブジェクトが取得されます

2.1 setOptionメソッド

1. チャートインスタンスの構成項目やデータを設定または変更する

2. setOption メソッドを複数回呼び出す

(1) 新構成と旧構成をマージする

(2) インクリメンタルアニメーション

2.2 リサイズ方法

1. 再計算してグラフを描画する

2. 通常、ウィンドウオブジェクトのサイズ変更イベントと組み合わせて使用されます。

window.onresize = function() {
    mycharts.resize();
}

2.3 on\off方法

1. イベントハンドラーのバインドまたはバインド解除

2. マウスイベント

一般的なイベント: 'click'、'dbclick'、'mousedown'、'mousemove'、'mouseup'

イベントパラメータ arg: イベントに関連するデータ情報

3.EChartsイベント

一般的なイベント: lengendaselectchanged、'datazoom'、'pieselectchanged'、'mapselectchanged' など。

click と lengendaelectchanged の例:

コード

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>饼状图的基本实现</title>
  <script src="../lib/echarts.min.js"></script>
</head>

<body>
  <div id="app" style="width: 600px;height: 400px;"></div>
  <script>
    // 1.Echarts 基本结构的创建
    // 引入js文件---创建容器---初始化对象---配置配置项---
    // 2.准备数据[{name;???, value:???},{}]
    // 运动与健康：1100，餐饮：2800，外出与旅行：4500，衣物：2202，电子游戏：2421，医药：800
    // 3.将type设置为pie
    var myCharts = echarts.init(document.querySelector('#app'))
    // 需要设置给饼图的数据
    var pieData = [
      {
        name: '运动与健康',
        value: '1100'
      },
      {
        name: '餐饮',
        value: '2800'
      },
      {
        name: '外出与旅行',
        value: '4500'
      },
      {
        name: '衣物',
        value: '2202'
      },
      {
        name: '电子游戏',
        value: '2421'
      },
      {
        name: '医药',
        value: '800'
      }

    ]
    var option = {
      // 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
      legend: {
        data: ['运动与健康', '餐饮', '外出与旅行', '衣物', '电子游戏', '医药']
      },
      series: [
        {
          type: 'pie',
          data: pieData
        }
      ]
    }
    myCharts.setOption(option)
    myCharts.on('click', function (arg) {
      console.log(arg)
    })
    myCharts.on('legendselectchanged', function (arg) {
      console.log(arg)
    })
  </script>
</body>

</html>

2.4 dispatchAction方法

1. 特定の行動を引き起こす

2. コードを使用してユーザーの動作をシミュレートする

mChart.dispatchAction({
    type: '',
    seriesIndex: 0, //系列的索引
    dataIndex: 1 //数据的索引
})

2.5 クリアメソッド

1. 現在のインスタンスをクリアするには、インスタンス内のすべてのコンポーネントとチャートが削除されます。

2. クリア後、再度 setOption を実行できます

2.6 廃棄方法

破壊されたインスタンスは、破壊後に再度使用することはできません

echarts アドバンスト - インタラクティブ API