Home

Index

How to use the init function from echarts

Find comprehensive JavaScript echarts.init code examples handpicked from public code repositorys.

echarts.init initializes an ECharts instance on a specified DOM element.

echart.js

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;

320

100

personalInfo.vue

GitHub: lss5270/vue-admin-spa

136
137
138
139
140
141
142
143
144
145
var vm = this;

vm.resetForm();

// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('income'));
var myChart2 = echarts.init(document.getElementById('interest'));
// 绘制收入图表
myChart1.setOption({
    title: { text: '最近收入' },

233

809

+ 7 other calls in file

How does echarts.init work?

The echarts.init method creates a new ECharts instance and returns a chart object that can be used to manipulate and render the chart on the page. The method creates a new HTML element to host the chart, initializes the chart with the provided configuration options, and returns the chart instance.

server.md?plain=1

GitHub: apache/echarts-handbook

21
22
23
24
25
26
27
28
29
30

```ts
const echarts = require('echarts');

// In SSR mode the first container parameter is not required
const chart = echarts.init(null, null, {
  renderer: 'svg', // must use SVG rendering mode
  ssr: true, // enable SSR
  width: 400, // need to specify height and width
  height: 300

126

+ 3 other calls in file

content.vue

GitHub: wanzizi/BIsystem

281
282
283
284
285
286
287
288
289
290
let thisLayer = thisVessel.legend_info[this.page.layerI]
if (layer && this.$refs[layer] && thisLayer.options) {
  echarts.dispose(this.$refs[layer][0])
  this.$refs[layer][0].style.width = ((this.singleWidth * thisVessel.col_num) / thisVessel.inner_col) * thisLayer.z_col + 'px'
  this.$refs[layer][0].style.height = ((this.singleheight * thisVessel.row_num) / thisVessel.inner_row) * thisLayer.z_row - (thisVessel.title_show ? thisVessel.title_height : 0) - (thisVessel.date_selector ? 40 : 0) + 'px'
  var myChart = echarts.init(this.$refs[layer][0], theme || '')
  if (this.$refs[layer][0].style.width && this.$refs[layer][0].style.height) {
    setTimeout(() => {
      myChart.setOption(thisLayer.options)
      myChart.resize()

+ 5 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Get the container element for the chart
var chartContainer = document.getElementById("myChart");

// Initialize the ECharts instance
var myChart = echarts.init(chartContainer);

// Set options for the chart
myChart.setOption({
  title: {
    text: "My Chart",
  },
  xAxis: {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  },
  yAxis: {},
  series: [
    {
      name: "Sales",
      type: "bar",
      data: [10, 20, 30, 40, 50, 60],
    },
  ],
});

// Render the chart
myChart.render();

In this example, echarts.init is used to create a new ECharts instance that is associated with a specified container element. The instance is then used to set options for the chart and render it.

thumb.js

GitHub: mindskip/xzs

46
47
48
49
50
51
52
53
54
55
var themeName = path.basename(themePath, '.js');
var canvasList = [];
require(themePath);
echarts.util.each(options, function (option) {
    var canvas = createCanvas();
    var chart = echarts.init(canvas, themeName);
    var optionNeedFix = option;
    if (option.options) {
        optionNeedFix = option.options[0];
    }

619

chartUtil.js

GitHub: dream-num/chartMix

49
50
51
52
53
54
55
56
57
if (chartPro === 'echarts') {
    const options = echartsEngine(chartOptions);

    let chart = echarts.getInstanceByDom(container);
    if (chart == null) {
        chart = echarts.init(container)
    }

    chart.setOption(options, true);

+ 3 other calls in file

preview.vue

GitHub: wanzizi/BIsystem

159
160
161
162
163
164
165
166
167
168
      theme = item.name
      echarts.registerTheme(theme, json)
    }
  })
}
var myChart = echarts.init(this.$refs[item1.id][0], theme)
if (this.$refs[item1.id][0].offsetWidth && this.$refs[item1.id][0].offsetHeight) {
  this.isInit = false
  setTimeout(() => {
    myChart.setOption(item1.options)

+ 3 other calls in file

base.tsx

GitHub: liuyuqin1991/react-echarts

44
45
46
47
48
49
50
51
52
53
    window.removeEventListener('resize', this.listenerFunc);
}

//创建图表
createEcharts() {
    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) => {

Content-event-dist-chart.vue

GitHub: yzcode/BEvent-detection-FE

192
193
194
195
196
197
198
199
200
201
    option.series[0].data = convertData(data)
    option.series[1].data = convertData(data.sort(function (a, b) {
      return b.value - a.value
    }).slice(0, 6))
    // console.log(data)
    var myChart = echarts.init(document.getElementById('chart-dist'))
    setTimeout(() => {myChart.setOption(option)}, 1500)
  })
  console.log('dist-char-load')
}

vDirecharts.js

GitHub: xcqweb/pujiang

16
17
18
19
20
21
22
23
24
25
},
bind: function () {
    var _this = this;
    Vue.nextTick(function () {
        // init echarts instance
        _this.instance = echarts.init(_this.el);

        // show loading animation
        if (_this.params.loading === true) {
            _this.instance.showLoading();

Donut.js

GitHub: Zoomdata/sample-app-acmelending

47
48
49
50
51
52
53
54
55
56
 * ECharts with it.
 */
createChart: function() {
    // Initialize after dom ready
    domElement = ReactDOM.findDOMNode(this);
    this.chart = echarts.init(domElement);
    this.updateChart(this.props);
},

updateChart: function(props) {

chart.js

GitHub: ChronSyn/FFCreator

112
113
114
115
116
117
118
119
120
121
const ctx = createCanvas(128, 128);
echarts.setCanvasCreator(() => ctx);

const { theme, option } = this;
const canvas = createCanvas(width, height);
const chart = echarts.init(canvas, theme);
chart.setOption(option);
this.fixZrender(chart);

this.ctx = ctx;

320

getImage.js

GitHub: ioBroker/ioBroker.iot

29
30
31
32
33
34
35
36
37
38
global.document = window.document;

const root = document.createElement('div');
root.style.cssText = `width: ${WIDTH}px; height: ${HEIGHT}px;`;

const chart = echarts.init(root, null, {renderer: 'svg'});
chart.setOption(options);

const svg = root.querySelector('svg').outerHTML;
chart.dispose();

+ 3 other calls in file

README.md?plain=1

GitHub: dfEric/echarts-amap

81
82
83
84
85
86
87
88
89
90

```javascript
var echarts = require('echarts')
require('echarts-amap')

var echart = echarts.init(document.getElementById('map'))
echart.setOption({
  ... // see the example above
})
```

+ 7 other calls in file

WordChart.jsx

GitHub: biubiubiu01/react-antd-admin

14
15
16
17
18
19
20
21
22
23

colorList = ['#4FD8FF', '#C15FFF', '#FF5F55', '#FFC935', '#767BFB']

async componentDidMount() {
  this.initResizeEvent()
  this.myChart = echarts.init(this.WordChart)
  this.setOption()
}

componentWillUnmount() {

+ 3 other calls in file

framework-construction-new.vue

GitHub: kubesys/frontend

202
203
204
205
206
207
208
209
210
211
    this.refreashLeft()
    this.treeIndex++
  }, this.leftInterval)
},
refreashLeft() {
  const myChart = echarts.init(document.getElementById('myChart'))
  myChart.setOption({
    tooltip: {},
    animationDurationUpdate: 300,
    animationEasingUpdate: 'quadraticOut',

+ 3 other calls in file

index.vue

GitHub: pegasus-1998/vue3-setup-admin

27
28
29
30
31
32
33
34
35
36
    '#0780cf', '#765005', '#e75840', '#26ccd8', '#3685fe',
    '#9977ef', '#f5616f', '#f7b13f', '#f9e264', '#50c48f'
]][2];

onMounted(() => {
    myChart = echarts.init(ec.value)
    myChart.on('click', function () {
        window.open('https://www.baidu.com')
    });
    const option = {

optionKeywords.js

GitHub: ecomfe/echarts-boilerplate

-2

+ 3 other calls in file

StatementRefundAmount.vue

GitHub: bellmit/vue-with-typescript

174
175
176
177
178
179
180
181
182
183
      type: 'value'
    },
    series: Content
  };
  this.$nextTick(()=>{
    this.MyChart = Echarts.init((this.$refs["ChartsDom"] as any),'macarons',{width:window.innerWidth,height:this.Height});
    this.MyChart.setOption(Option);
  })
}

+ 3 other calls in file

visual.ts

GitHub: xiaoyao-xiaolv/dashboard

10
11
12
13
14
15
16
17
18
19

static mockItems = [{ "name": "山西省", "value": 2201 }, { "name": "江苏省", "value": 1251 }, { "name": "西藏自治区", "value": 1104 }, { "name": "陕西省", "value": 1529 }, { "name": "四川省", "value": 2771 }, { "name": "江西省", "value": 1649 }, { "name": "河南省", "value": 2566 }, { "name": "河北省", "value": 2256 }, { "name": "新疆维吾尔自治区", "value": 1332 }, { "name": "福建省", "value": 1077 }, { "name": "吉林省", "value": 814 }, { "name": "安徽省", "value": 1290 }, { "name": "重庆市", "value": 748 }, { "name": "云南省", "value": 1770 }, { "name": "甘肃省", "value": 971 }, { "name": "广西壮族自治区", "value": 1338 }, { "name": "广东省", "value": 1677 }, { "name": "黑龙江省", "value": 1884 }, { "name": "山东省", "value": 1908 }, { "name": "湖南省", "value": 1338 }, { "name": "海南省", "value": 504 }, { "name": "内蒙古自治区", "value": 1087 }, { "name": "上海市", "value": 140 }, { "name": "辽宁省", "value": 1513 }, { "name": "青海省", "value": 980 }, { "name": "宁夏回族自治区", "value": 354 }, { "name": "湖北省", "value": 1204 }, { "name": "北京市", "value": 184 }, { "name": "浙江省", "value": 1262 }, { "name": "贵州省", "value": 914 }, { "name": "澳门特别行政区", "value": 190 }, { "name": "香港特别行政区", "value": 104 }, { "name": "天津市", "value": 176 }];
constructor(dom: HTMLDivElement, host: any) {
  this.container = dom;
  this.visualHost = host;
  this.chart = echarts.init(dom)
  this.items = [];
  this.properties = {
    shape: 'circle',
    showImage: false

+ 3 other calls in file

Other functions in echarts

Sorted by popularity

echarts.init is the most popular function in echarts (114 examples)

Other popular packages:

Home

About