ECharts Style Settings

ECharts can modify the color, brightness, size, etc., of graphic elements or text through style settings.

Color Themes

Starting from ECharts4, in addition to the default theme, two built-in themes are available: light and dark.

Usage is as follows:

Example

var chart = echarts.init(dom, 'light');

or

var chart = echarts.init(dom, 'dark');

Additionally, you can choose your favorite theme from the official Theme Editor and download it.

Currently, theme downloads are available in JS and JSON formats.

If you use the JS version, save the JS theme code as a themeName.js file, reference it in your HTML, and then use the theme in your code.

For example, in the image above, we selected a theme and saved the JS code as wonderland.js.

Example

<!-- Include the theme -->
<script src="https://www.tutorialpro.org/static/js/wonderland.js"></script>
...

// After including the wonderland.js file in HTML, call it during initialization
var myChart = echarts.init(dom, 'wonderland');
// ...

If the theme is saved as a JSON file, you can load and register it manually.

For example, in the image above, we selected a theme and saved the JSON code as wonderland.json.

Example

// The theme name is wonderland
$.getJSON('wonderland.json', function (themeJSON) {
    echarts.registerTheme('wonderland', themeJSON)
    var myChart = echarts.init(dom, 'wonderland');
});

Note: We used $.getJSON, so jQuery needs to be included.

Palette

The palette can be set in the option.

The palette provides a set of colors from which graphics and series will automatically select.

You can set a global palette or a series-specific palette.

option = {
    // Global palette.
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // This series' own palette.
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // This series' own palette.
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

Global palette example:

Example

// Global palette.
color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

Series palette example:

Example

series: [{
    type: 'pie',
    // This series' own palette.

color: ['#ff0000', '#00ff00', '#0000ff', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]

Direct Style Settings for itemStyle, lineStyle, areaStyle, label, ...

Direct style settings are commonly used methods. Throughout ECharts' option, many places can set itemStyle, lineStyle, areaStyle, label, and so on. These places can directly set the color of graphic elements, line width, point size, label text, label style, and more.

Generally, ECharts' various series and components follow these naming conventions, although itemStyle, label, etc., may appear in different places in different charts and components.

For another introduction to direct style settings, see ECharts Pie Chart.

Highlight Style: emphasis

When the mouse hovers over graphic elements, a highlighted style usually appears. By default, the highlighted style is generated automatically based on the normal style.

To customize the highlighted style, you can use the emphasis property:

Example

// Highlight style.
emphasis: {
    itemStyle: {
        // Color of the point when highlighted
        color: 'red'
    },
    label: {
        show: true,
        // Text of the label when highlighted
        formatter: 'Label content displayed when highlighted'
    }
},