YouTip

ECharts can change the color, brightness, size, etc. of graphic elements or text through style settings. * * * ## Color Theme Starting from ECharts4, in addition to the default theme, there are two built-in themes: light and dark. Usage is as follows: ## Instance var chart = echarts.init(dom, 'light'); or var chart = echarts.init(dom, 'dark'); [Try it »](#) Additionally, we can also download our favorite theme from the official (http://echarts.baidu.com/theme-builder/). [!(#)](#) Currently, theme download provides JS version and JSON version. If you use JS version, you can save the JS theme code as a themename.js file, then reference the file in HTML, and finally use the theme in the code. For example, in the image above, we selected a theme and saved the JS code as **wonderland.js**. ## Instance ... // After HTML imports the wonderland.js file, call it during initialization var myChart = echarts.init(dom, 'wonderland'); // ... [Try it »](#) If the theme is saved as a JSON file, you can load and register it yourself. For example, in the image above, we selected a theme and saved the JSON code as **wonderland.json**. ## Instance // The theme name is wonderland $.getJSON('wonderland.json', function(themeJSON){ echarts.registerTheme('wonderland', themeJSON) var myChart = echarts.init(dom, 'wonderland'); }); [Try it »](#) **Note:** We used $.getJSON, so jQuery needs to be imported. * * * ## Color Palette The color palette can be set in option. The color palette provides a set of colors, and graphics and series will automatically select colors from it. You can set a global color palette, or set a dedicated color palette for each series. option ={ // Global color palette. color:['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'], series:[{ type:'bar', // This series' own color palette. color:['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab','#91ca8c','#f49f42'], ... },{ type:'pie', // This series' own color palette. color:['#37A2DA','#32C5E9','#67E0E3','#9FE6B8','#FFDB5C','#ff9f7f','#fb7293','#E062AE','#E690D1','#e7bcf3','#9d96f5','#8378EA','#96BFFF'], ... }] } Global color palette instance: ## Instance // Global color palette. color:['#ff0000','#00ff00','#0000ff','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'], [Try it »](#) Series color palette instance: ## Instance series:[{ type:'pie', // This series' own color palette. color:['#ff0000','#00ff00','#0000ff','#9FE6B8','#FFDB5C','#ff9f7f','#fb7293','#E062AE','#E690D1','#e7bcf3','#9d96f5','#8378EA','#96BFFF'], ... }] [Try it »](#) * * * ## Direct Style Settings itemStyle, lineStyle, areaStyle, label, ... Direct style settings are a commonly used setting method. Throughout ECharts' (https://www.echartsjs.com/zh/option.html#title), many places can set (https://www.echartsjs.com/zh/option.html#series.itemStyle), (https://www.echartsjs.com/zh/option.html#series-line.lineStyle), (https://www.echartsjs.com/zh/option.html#series-line.areaStyle), (https://www.echartsjs.com/zh/option.html#series.label), etc. These places can directly set the color, line width, point size, label text, label style, etc. of graphic elements. Generally, ECharts' various series and components follow these naming conventions, although `itemStyle`, `label`, etc. may appear in different places for different charts and components. Another introduction to direct style settings can be found at (#). * * * ## Highlight Style: emphasis When the mouse hovers over a graphic element, a highlight style usually appears. By default, the highlight style is automatically generated based on the normal style. To customize the highlight style, you can use the emphasis property: ## Instance // Highlight style. emphasis:{ itemStyle:{ // Color of the point when highlighted color:'red' }, label:{ show:true, // Label text when highlighted formatter:'Label content displayed when highlighted' } }, [Try it »](#)