9.5. ECharts style setting

ECharts can change the color, shade, size, etc., of graphic elements or textthrough style settings.

9.5.1. Color theme ¶

Starting with ECharts4, in addition to the default theme, two sets of themesare built-in, namely light and dark .

The mode of use is as follows:

Example ¶

varchart=echarts.init(dom,'light');

varchart=echarts.init(dom,'dark');

In addition, we can also use the official Theme Editor choose your favorite theme to download.

JS and JSON versions are currently available for theme downloads.

If you use the JS version, you can save the JS theme code to a theme name .js file, then reference the file in HTML, and finally use the theme in the code.

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

Example ¶

<!-- Introducing themes -->
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
...
// After introducing the wonderland.js file into 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 yourself.

For example, in the figure 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 the $.getJSON , so you need to introduce jQuery .

9.5.2. Color palette ¶

The color palette can be found in option set in the.

The color palette is given a set of colors, from which the graphics and series automatically select colors.

You can set a global color palette, or you can set your own color palette.

option = {
    // Global color palette.
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265',
'#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570',
'#c4ccd3'],
    series: [{
        type: 'bar',
        // This series has its own color palette.
        color:
['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab',
'#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // This series has its own color palette.
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8',
'#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3',
'#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

Examples of global palettes:

Example ¶

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

Series of color palette examples:

Example ¶

series: [{
    type: 'pie',
    // This series has its own color palette.
    color: ['#ff0000','#00ff00', '#0000ff', '#9FE6B8',
'#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3',
'#9d96f5', '#8378EA', '#96BFFF'],
    ...
}]

9.5.3. Direct styling itemStyle, lineStyle, areaStyle, label,… ¶

Direct styling is a more common way of setting. An overview of ECharts’s option in many places, you can set up itemStyle 、 `lineStyle<https://www.echartsjs.com/zh/option.html#series-line.lineStyle>`__ 、 areaStyle 、 label etc. These places can directly set the color of graphic elements, line weight, point size, label text, label style, and so on.

In general, the various series and components of ECharts follow these naming conventions, although in different diagrams and components itemStyle ,``label`` and so on may show up in different places.

For another introduction to direct styling, see the ECharts pie chart.

9.5.4. Highlighted style: `emphasis` ¶

A highlighted style usually appears when the mouse hovers over a graphic element. By default, highlighted styles are automatically generated based onnormal styles.

If you want to customize the highlight style, you can use the emphasis property to customize:

Example ¶

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