How to setup the dev environment

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

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
node build/build.js --watch

To build once:

node build/build.js

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.