9.5. ECharts style setting

发布时间 : 2025-10-25 13:35:37 UTC      

Page Views: 10 views

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'); 

Or

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

  ... // 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`__ 、 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' } }, 
《地理信息系统原理、技术与方法》  97

最近几年来,地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持,如城市管理、区划、环境整治等等,地理信息成为信息时代重要的组成部分之一; “数字地球”概念的提出,更进一步推动了作为其技术支撑的GIS的发展。 与此同时,一些学者致力于相关的理论研究,如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面,并且这两个方面构成了相互促进的发展过程。