How to use echarts

Comprehensive echarts code examples:

How to use echarts.List:

11
12
13
14
15
16
17
18
19
    option.gridSize = Math.max(Math.floor(option.gridSize), 4);
},

getInitialData: function (option, ecModel) {
    var dimensions = completeDimensions(['value'], option.data);
    var list = new echarts.List(dimensions, this);
    list.initData(option.data);
    return list;
},

How to use echarts.number:

94
95
96
97
98
99
100
101
102
103
list: data.mapArray('value', function (value, idx) {
    var itemModel = data.getItemModel(idx);
    return [
        data.getName(idx),
        itemModel.get('textStyle.normal.textSize', true)
            || echarts.number.linearMap(value, valueExtent, sizeRange),
        idx
    ];
}).sort(function (a, b) {
    // Sort from large to small in case there is no more room for more words

How to use echarts.matrix:

45
46
47
48
49
50
51
52
53
  var api = this._api;
  return new echarts.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight());
};

AMapCoordSys.prototype.getRoamTransform = function () {
  return echarts.matrix.create();
};

var Overlay;

How to use echarts.registerTheme:

155
156
157
158
159
160
161
162
163
164
if (this.page.theme.list && this.page.theme.list.length) {
  this.page.theme.list.map((item, index) => {
    if (item.id === this.page.params.theme) {
      let json = JSON.parse(item.json)
      theme = item.name
      echarts.registerTheme(theme, json)
    }
  })
}
var myChart = echarts.init(this.$refs[item1.id][0], theme)

How to use echarts.getInstanceById:

55
56
57
58
59
60
61
62
63
        }

        chart.setOption(options, true);

        setTimeout(() => {
            echarts.getInstanceById(container.getAttribute('_echarts_instance_')).resize();
        }, 0);
    }
}

How to use echarts.SeriesModel:

18
19
20
21
22
23
24
25
26
27
this.dataTimer = -1; // set to -1 if update at begin is needed
this.movieType = movieType;
this.color = colors || COLORS;

echarts.Model.prototype.isAnimationEnabled = () => ani;
echarts.SeriesModel.prototype.isAnimationEnabled = () => ani;

if (option) {
  try {
    if (typeof(option) === 'object' && option.innerHTML) {

How to use echarts.Model:

17
18
19
20
21
22
23
24
25
26
this.resize(width, height);
this.dataTimer = -1; // set to -1 if update at begin is needed
this.movieType = movieType;
this.color = colors || COLORS;

echarts.Model.prototype.isAnimationEnabled = () => ani;
echarts.SeriesModel.prototype.isAnimationEnabled = () => ani;

if (option) {
  try {

How to use echarts.registerMap:

49
50
51
52
53
54
55
56
57
58
this.echarts = Echarts.init(this.canvas);
let option = this.setSeriesCallBack();
//为地图图表注册地图geo json数据
if (this.props.onChangeRegion && this.props.onChangeRegion instanceof Function) {
    const callback = (regionName: string, mapJson: any) => {
        Echarts.registerMap(regionName, mapJson);
        //设置加载地图后的个性化回调方法
        if (this.props.setOptionAfterLoadMap && this.props.setOptionAfterLoadMap instanceof Function) {
            option = this.props.setOptionAfterLoadMap(option, mapJson);
        }

How to use echarts.dispose:

148
149
150
151
152
153
154
155
156
157
item.legend_info.map((item1, index1) => {
  if (this.$refs[item1.id] && item1.options) {
    if (item1.type === 'timestamp' && isResize) {
      this.showTime(item1.id)// 时间戳组件
    } else {
      echarts.dispose(this.$refs[item1.id][0])
      let theme = ''
      if (this.page.theme.list && this.page.theme.list.length) {
        this.page.theme.list.map((item, index) => {
          if (item.id === this.page.params.theme) {

How to use echarts.setCanvasCreator:

75
76
77
78
79
80
81
82
83
84
  ...option
};
this.aniDuration = option.animationDurationUpdate;

const canvasCreator = this.createCanvas(128, 128);
echarts.setCanvasCreator(() => canvasCreator);

this.option = option;
this.chart = echarts.init(this.canvas, theme);
this.fixZRender(); // 必须放在setOption之前

How to use echarts.getInstanceByDom:

68
69
70
71
72
73
74
75
76
77
      type: 'amapRoam'
  });
}

function resizeHandler(e) {
  echarts.getInstanceByDom(api.getDom()).resize();
  moveHandler.call(this, e)
}

var throttledResizeHandler = throttle(resizeHandler, 300, amap);

How to use echarts.util:

84
85
86
87
88
89
90
91
92
93
// Not support IE8
amapRoot.classList.add('ec-extension-amap');
root.appendChild(amapRoot);

var options = amapModel.get() || {};
options = amapModel.__options = echarts.util.clone(options);
var amap = amapModel.__amap = new AMap.Map(amapRoot, options);

var layer = amapModel.__layer = new AMap.CustomLayer(viewportRoot);
layer.setMap(amap);

How to use echarts.graphic:

41
42
43
44
45
46
47
48
49
50
  return [pt.lng, pt.lat];
};

AMapCoordSys.prototype.getViewRect = function () {
  var api = this._api;
  return new echarts.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight());
};

AMapCoordSys.prototype.getRoamTransform = function () {
  return echarts.matrix.create();

How to use echarts.getMap:

How to use echarts.getEchartsContainer:

How to use echarts.init:

78
79
80
81
82
83
84
85
86
87

const canvasCreator = this.createCanvas(128, 128);
echarts.setCanvasCreator(() => canvasCreator);

this.option = option;
this.chart = echarts.init(this.canvas, theme);
this.fixZRender(); // 必须放在setOption之前
this.chart.setOption(option);
this.updateData(0); // 数据归零
const animation = this.chart._zr.animation;