| __NUXT_JSONP__("/en/concepts/style", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O){return {data:[{article:{slug:"style",toc:[{id:A,depth:u,text:y},{id:B,depth:u,text:z},{id:C,depth:u,text:D},{id:E,depth:u,text:F},{id:G,depth:u,text:H}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"overview-of-style-customization"},children:[{type:b,tag:d,props:{href:"#overview-of-style-customization",ariaHidden:n,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,value:"Overview of Style Customization"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"This article provides an overview of the different approaches about Apache ECharts"},{type:b,tag:"sup",props:{},children:[{type:a,value:"TM"}]},{type:a,value:" style customization. For example, how to config the color, size, shadow of the graphic elements and labels."}]},{type:a,value:c},{type:b,tag:"blockquote",props:{},children:[{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The term \"style\" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand."}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios."}]},{type:a,value:c},{type:b,tag:"ul",props:{},children:[{type:a,value:c},{type:b,tag:w,props:{},children:[{type:a,value:y}]},{type:a,value:c},{type:b,tag:w,props:{},children:[{type:a,value:z}]},{type:a,value:c},{type:b,tag:w,props:{},children:[{type:a,value:"Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)"}]},{type:a,value:c},{type:b,tag:w,props:{},children:[{type:a,value:"Visual encoding (visualMap component)"}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:v,props:{id:A},children:[{type:b,tag:d,props:{href:"#theme",ariaHidden:n,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,value:y}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Setting a theme is the simplest way to change the color style. For example, in "},{type:b,tag:d,props:{href:"$%7BwebsitePath%7D\u002Fexamples\u002Fen\u002Findex.html"},children:[{type:a,value:"Examples page"}]},{type:a,value:", we can switch to dark mode and see the result of a different theme."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"In our project, we can switch to dark theme like:"}]},{type:a,value:c},{type:b,tag:k,props:{className:[l]},children:[{type:b,tag:s,props:{lang:m,"line-highlights":f,"file-name":f},children:[{type:a,value:"var chart = echarts.init(dom, 'dark');\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Fen\u002Ftheme-builder.html",rel:[g,h,i],target:j},children:[{type:a,value:"theme builder"}]},{type:a,value:". Theme can also be created or edited in it. The downloaded theme can be used as follows:"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"If a theme is downloaded as a JSON file, we should register it by ourselves, for example:"}]},{type:a,value:c},{type:b,tag:k,props:{className:[l]},children:[{type:b,tag:s,props:{lang:m,"line-highlights":f,"file-name":f},children:[{type:a,value:"var xhr = new XMLHttpRequest();\n\u002F\u002F Assume the theme name is \"vintage\".\n$.getJSON('xxx\u002Fxxx\u002Fvintage.json', function(themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON));\n var chart = echarts.init(dom, 'vintage');\n});\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"If a theme is downloaded as a JS file, it will auto register itself:"}]},{type:a,value:c},{type:b,tag:k,props:{className:[l]},children:[{type:b,tag:s,props:{lang:m,"line-highlights":f,"file-name":f},children:[{type:a,value:"\u002F\u002F Import the `vintage.js` file in HTML, then:\nvar chart = echarts.init(dom, 'vintage');\n\u002F\u002F ...\n"}]}]},{type:a,value:c},{type:b,tag:v,props:{id:B},children:[{type:b,tag:d,props:{href:"#color-palette",ariaHidden:n,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Color palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series."}]},{type:a,value:c},{type:b,tag:k,props:{className:[l]},children:[{type:b,tag:s,props:{lang:m,"line-highlights":f,"file-name":f},children:[{type:a,value:"option = {\n \u002F\u002F Global palette:\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ],\n\n series: [\n {\n type: 'bar',\n \u002F\u002F A palette only work for the series:\n color: [\n '#dd6b66',\n '#759aa0',\n '#e69d87',\n '#8dc1a9',\n '#ea7e53',\n '#eedd78',\n '#73a373',\n '#73b9bc',\n '#7289ab',\n '#91ca8c',\n '#f49f42'\n ]\n \u002F\u002F ...\n },\n {\n type: 'pie',\n \u002F\u002F A palette only work for the series:\n color: [\n '#37A2DA',\n '#32C5E9',\n '#67E0E3',\n '#9FE6B8',\n '#FFDB5C',\n '#ff9f7f',\n '#fb7293',\n '#E062AE',\n '#E690D1',\n '#e7bcf3',\n '#9d96f5',\n '#8378EA',\n '#96BFFF'\n ]\n \u002F\u002F ...\n }\n ]\n};\n"}]}]},{type:a,value:c},{type:b,tag:v,props:{id:C},children:[{type:b,tag:d,props:{href:"#customize-style-explicitly-itemstyle-linestyle-areastyle-label-",ariaHidden:n,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,value:D}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"It is a common way to set style explicitly. Throughout ECharts "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#",rel:[g,h,i],target:j},children:[{type:a,value:"option"}]},{type:a,value:", style related options can be set in various place, including "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#series.itemStyle",rel:[g,h,i],target:j},children:[{type:a,value:I}]},{type:a,value:t},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#series-line.lineStyle",rel:[g,h,i],target:j},children:[{type:a,value:J}]},{type:a,value:t},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#series-line.areaStyle",rel:[g,h,i],target:j},children:[{type:a,value:K}]},{type:a,value:t},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#series.label",rel:[g,h,i],target:j},children:[{type:a,value:L}]},{type:a,value:", etc."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Generally speaking, all of the built-in components and series follow the naming convention like "},{type:b,tag:x,props:{},children:[{type:a,value:I}]},{type:a,value:t},{type:b,tag:x,props:{},children:[{type:a,value:J}]},{type:a,value:t},{type:b,tag:x,props:{},children:[{type:a,value:K}]},{type:a,value:t},{type:b,tag:x,props:{},children:[{type:a,value:L}]},{type:a,value:" etc, although they may occur in different place according to different series or components."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"In the following code we add shadow, gradient to bubble chart."}]},{type:a,value:c},{type:b,tag:k,props:{className:[l]},children:[{type:b,tag:"md-live",props:{lang:m,layout:"tb"},children:[{type:a,value:"var data = [\n [\n [28604, 77, 17096869, 'Australia', 1990],\n [31163, 77.4, 27662440, 'Canada', 1990],\n [1516, 68, 1154605773, 'China', 1990],\n [13670, 74.7, 10582082, 'Cuba', 1990],\n [28599, 75, 4986705, 'Finland', 1990],\n [29476, 77.1, 56943299, 'France', 1990],\n [31476, 75.4, 78958237, 'Germany', 1990],\n [28666, 78.1, 254830, 'Iceland', 1990],\n [1777, 57.7, 870601776, 'India', 1990],\n [29550, 79.1, 122249285, 'Japan', 1990],\n [2076, 67.9, 20194354, 'North Korea', 1990],\n [12087, 72, 42972254, 'South Korea', 1990],\n [24021, 75.4, 3397534, 'New Zealand', 1990],\n [43296, 76.8, 4240375, 'Norway', 1990],\n [10088, 70.8, 38195258, 'Poland', 1990],\n [19349, 69.6, 147568552, 'Russia', 1990],\n [10670, 67.3, 53994605, 'Turkey', 1990],\n [26424, 75.7, 57110117, 'United Kingdom', 1990],\n [37062, 75.4, 252847810, 'United States', 1990]\n ],\n [\n [44056, 81.8, 23968973, 'Australia', 2015],\n [43294, 81.7, 35939927, 'Canada', 2015],\n [13334, 76.9, 1376048943, 'China', 2015],\n [21291, 78.5, 11389562, 'Cuba', 2015],\n [38923, 80.8, 5503457, 'Finland', 2015],\n [37599, 81.9, 64395345, 'France', 2015],\n [44053, 81.1, 80688545, 'Germany', 2015],\n [42182, 82.8, 329425, 'Iceland', 2015],\n [5903, 66.8, 1311050527, 'India', 2015],\n [36162, 83.5, 126573481, 'Japan', 2015],\n [1390, 71.4, 25155317, 'North Korea', 2015],\n [34644, 80.7, 50293439, 'South Korea', 2015],\n [34186, 80.6, 4528526, 'New Zealand', 2015],\n [64304, 81.6, 5210967, 'Norway', 2015],\n [24787, 77.3, 38611794, 'Poland', 2015],\n [23038, 73.13, 143456918, 'Russia', 2015],\n [19360, 76.5, 78665830, 'Turkey', 2015],\n [38225, 81.4, 64715810, 'United Kingdom', 2015],\n [53354, 79.1, 321773631, 'United States', 2015]\n ]\n];\n\noption = {\n backgroundColor: {\n type: 'radial',\n x: 0.3,\n y: 0.3,\n r: 0.8,\n colorStops: [\n {\n offset: 0,\n color: '#f7f8fa'\n },\n {\n offset: 1,\n color: '#cdd0d5'\n }\n ]\n },\n grid: {\n left: 10,\n containLabel: true,\n bottom: 10,\n top: 10,\n right: 30\n },\n xAxis: {\n splitLine: {\n show: false\n }\n },\n yAxis: {\n splitLine: {\n show: false\n },\n scale: true\n },\n series: [\n {\n name: '1990',\n data: data[0],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) \u002F 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(120, 36, 50, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(251, 118, 123)'\n },\n {\n offset: 1,\n color: 'rgb(204, 46, 72)'\n }\n ]\n }\n }\n },\n {\n name: '2015',\n data: data[1],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) \u002F 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(25, 100, 150, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(129, 227, 238)'\n },\n {\n offset: 1,\n color: 'rgb(25, 183, 207)'\n }\n ]\n }\n }\n }\n ]\n};\n"}]}]},{type:a,value:c},{type:b,tag:v,props:{id:E},children:[{type:b,tag:d,props:{href:"#style-of-emphasis-state",ariaHidden:n,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,value:F}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by "},{type:b,tag:d,props:{href:M,rel:[g,h,i],target:j},children:[{type:a,value:N}]},{type:a,value:" property. The options in "},{type:b,tag:d,props:{href:M,rel:[g,h,i],target:j},children:[{type:a,value:N}]},{type:a,value:" is the same as the ones for normal state, for example:"}]},{type:a,value:c},{type:b,tag:k,props:{className:[l]},children:[{type:b,tag:s,props:{lang:m,"line-highlights":f,"file-name":f},children:[{type:a,value:"option = {\n series: {\n type: 'scatter',\n\n \u002F\u002F Styles for normal state.\n itemStyle: {\n \u002F\u002F Color of the point.\n color: 'red'\n },\n label: {\n show: true,\n \u002F\u002F Text of labels.\n formatter: 'This is a normal label.'\n },\n\n \u002F\u002F Styles for emphasis state.\n emphasis: {\n itemStyle: {\n \u002F\u002F Color in emphasis state.\n color: 'blue'\n },\n label: {\n show: true,\n \u002F\u002F Text in emphasis.\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Notice: Before ECharts4, the emphasis style should be written like this:"}]},{type:a,value:c},{type:b,tag:k,props:{className:[l]},children:[{type:b,tag:s,props:{lang:m,"line-highlights":f,"file-name":f},children:[{type:a,value:"option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n \u002F\u002F Styles for normal state.\n normal: {\n color: 'red'\n },\n \u002F\u002F Styles for emphasis state.\n emphasis: {\n color: 'blue'\n }\n },\n\n label: {\n \u002F\u002F Styles for normal state.\n normal: {\n show: true,\n formatter: 'This is a normal label.'\n },\n \u002F\u002F Styles for emphasis state.\n emphasis: {\n show: true,\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The option format is still "},{type:b,tag:"strong",props:{},children:[{type:a,value:"compatible"}]},{type:a,value:", but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the \"normal\" term, which makes the option more simple and neat."}]},{type:a,value:c},{type:b,tag:v,props:{id:G},children:[{type:b,tag:d,props:{href:"#visual-encoding-by-visualmap-component",ariaHidden:n,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,value:H}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#visualMap",rel:[g,h,i],target:j},children:[{type:a,value:"visualMap component"}]},{type:a,value:" supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in "},{type:b,tag:d,props:{href:"~Visual%20Map%20of%20Data"},children:[{type:a,value:"Visual Map of Data"}]},{type:a,value:"."}]}]},dir:"\u002Fen\u002Fconcepts",path:"\u002Fen\u002Fconcepts\u002Fstyle",extension:".md",createdAt:O,updatedAt:O},postPath:"en\u002Fconcepts\u002Fstyle"}],fetch:{},mutations:[]}}("text","element","\n","a","p","","nofollow","noopener","noreferrer","_blank","div","nuxt-content-highlight","js","true",-1,"span","icon","icon-link","md-code-block",", ",2,"h2","li","code","Theme","Color Palette","theme","color-palette","customize-style-explicitly-itemstyle-linestyle-areastyle-label-","Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)","style-of-emphasis-state","Style of Emphasis State","visual-encoding-by-visualmap-component","Visual Encoding by visualMap Component","itemStyle","lineStyle","areaStyle","label","https:\u002F\u002Fecharts.apache.org\u002Foption.html#series-bar.emphasis","emphasis","2021-08-02T05:33:02.867Z"))); |