ECharts can change the color, shade, size, etc., of graphic elements or textthrough style settings. Starting with ECharts4, in addition to the default theme, two sets of themesare built-in, namely The mode of use is as follows: Or 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 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 Note: we used the The color palette can be found in 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. Examples of global palettes: Series of color palette examples: Direct styling is a more common way of setting. An overview of ECharts’s option in many places, you can set up itemStyle 、 `lineStyle In general, the various series and components of ECharts follow these naming conventions, although in different diagrams and components For another introduction to direct styling, see the ECharts pie chart. 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 In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. 9.5.1. Color theme ¶
light and dark .Example ¶
varchart=echarts.init(dom,'light');
varchart=echarts.init(dom,'dark');
wonderland.js .Example ¶
...
// After introducing the wonderland.js file into HTML, call it during initialization
var myChart = echarts.init(dom, 'wonderland');
// ...
wonderland.json .Example ¶
//The theme name is wonderland
$.getJSON('wonderland.json', function (themeJSON) {
echarts.registerTheme('wonderland', themeJSON)
var myChart = echarts.init(dom, 'wonderland');
});
$.getJSON , so you need to introduce jQuery . 9.5.2. Color palette ¶
option set in the.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'],
...
}]
}
Example ¶
// Global color palette.
color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83',
'#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
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,… ¶
itemStyle ,``label`` and so on may show up in different places. 9.5.4. Highlighted style:
emphasis ¶ 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'
}
},
Principles, Technologies, and Methods of Geographic Information Systems
102