commit	208e25d0fe816cb016993d1cb2c516949f87a668	[log] [tgz]
author	pissang <bm2736892@gmail.com>	Wed Jan 06 14:15:05 2021 +0800
committer	pissang <bm2736892@gmail.com>	Wed Jan 06 14:15:05 2021 +0800
tree	b179aac43e1a7e0600ff3ecf055a17b86dd0b9d5
parent	c18897d4319e3d17029d82ed9e2ee6e37468dd58 [diff]

tree: b179aac43e1a7e0600ff3ecf055a17b86dd0b9d5

README.md

Examples of ECharts

Install

npm install

Dev

npm run dev

Release

npm run release

It will copy all the build resources to incubator-echarts-website/next/examples

Use local echarts build

Update the URL of localEChartsMinJS in common/config.js
Add local=1 in URL. For example: editor.html?c=area-basic&local=1

Update example snapshots

node tool/build-example.js

Only for default theme

node tool/build-example.js -t default

Run bundler tests.

Run all the examples to test module importing, minimal bundling and DTS correctness.

Before run the tests. you need to update the examples.

node tool/build-example.js

Then update the echartsDir and zrenderDir path in test/config.js

If you want to test with esbuild bundler.

npm run test:esbuild

Otherwise it will use webpack bundler.

npm run test:webpack

Edit example

All test cases are in the public/data folder. The comment in the header

/*
title: Area Pieces
titleCN: 折线图区域高亮
category: 'line, visualMap'
*/

describes the meta info of this example.

Some built-in features available in examples

Import third-party library

For example:

$.when(
    $.getScript(ROOT_PATH + '/data/asset/js/myTransform.js'),
    $.getScript('https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.jXs'),
).done(function () {
    // ...
});

Controller panel

Use this code to enable controller panel for a example:

app.config = {
    aNameForTheSelectWidget: 'This is the initial value'
    aNameForTheRangeWidget: 45,
    aNameForTheButtonWidget: function () {
        // Do something.
    },
    onChange: function () {
        // Do something.
    }
};
app.configParameters = {
    aNameForTheSelectWidget: {
        options: [
            'This is the initial value',
            'This is another value',
            'This is the third value'
        ]
    },
    aNameForTheRangeWidget: {
        min: -90,
        max: 90
    }
};

Resize

app.onresize = function () {
    // Do something.
}

Get width and height of the chart area

var width = myChart.getWidth();
var height = myChart.getHeight();