Giter Club home page Giter Club logo

echarts-examples's Introduction

Examples of ECharts

Install

npm install

Dev

npm run dev

Release

npm run release

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

Use local echarts build

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

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/xxxx.js'),
    $.getScript('https://cdn.jsdelivr.net/npm/[email protected]/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();

Update example snapshots

npm run build:example

Only for default theme

node tool/build-example.js -t default

Run e2e tests.

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

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

npm run build:example

Then run the tests.

npm run test:e2e

You can change the testing branch or local dir, which is available when add --local in e2e/config.js

If you want to test with esbuild bundler. Which is much faster.

npm run test:e2e:esbuild

If you want use the packages in your local folder which is still in developing. Please update the dir path in test/config.js for all packages first. Then run the script directly with --local arg.

node e2e/main.js --bundler esbuild -m --local
node e2e/main.js --bundler webpack -m --local

Run partial tests.

Note: This can only be used when you run the whole e2e test at least once.

Skip specific stages.

node e2e/main.js --skip bundle

Specify matched tests.

node e2e/main.js --skip npm --tests bar3D*

echarts-examples's People

Contributors

100pah avatar deqingli avatar hartraft avatar jsdelivrbot avatar lauwen avatar ovilia avatar pissang avatar plainheart avatar sadortun avatar tomsoftware avatar wdingding avatar xhong0 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.