How to setup the dev environment

The following steps help you to set up the developing environment for ECharts.

Prerequisites

The advised node version is >=14.0.

If you have any question about the dev environment, please send an email to [email protected].

1. Clone the ECharts project

If you wish to make pull requests, you should fork the ECharts project first. Otherwise, just clone it locally.

git clone [email protected]:apache/incubator-echarts.git

ZRender is the rendering library under the hood. You need to clone it along with ECharts.

git clone [email protected]:ecomfe/zrender.git

We assume these projects are downloaded at ~/workspace/echarts and ~/workspace/zrender in the following steps. But their locations can be arbitrary.

2. Install dependencies

cd ~/workspace/echarts
npm install
cd ~/workspace/zrender
npm install

Sometimes, in order to fix an issue within echarts, changes have to be made inside the codebase of zrender. So we need to link zrender to echarts/node_modules/zrender instead of building zrender from npm.

cd ~/workspace/echarts
rm node_modules/zrender 
ln -s ~/workspace/zrender node_modules/zrender

# If you are using Windows CMD, please try as follows.
# Notice: must run as administrator
cd workspace/echarts
rd /s "node_modules\\zrender"
# "..\\..\\zrender" is a relative path
# It can be replaced with your actual absolute path of zrender
mklink /D "node_modules\\zrender" "..\\..\\zrender"

You should replace the above path with the path in your environment. Use an absolute path of zrender for the ln instruction.

After that, running ls node_modules/zrender to test if the content of the directory can be printed. If not, you probably have made a mistake with the link.

Using npm link cannot watch the changes in zrender. So please follow the above instructions.

Now, running node build/build.js watches changes both in echarts and zrender source directory.

3. Run and debug

To build the ECharts project and watch source file changes (including ZRender project) to rebuild:

cd ~/workspace/echarts
npm run dev

To check TypeScript

npm run checktype

To build:

npm run release

Then, open the test cases under ~/workspace/echarts/test in Web browser. You can add breakpoints under src directory. For example, in Chrome Inspect, it looks like:

Next Steps

Please checkout How to make a pull request.