可以的哦。

app.title = '氣泡圖';

var data = [

[[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],

[[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]]

];

option = {

backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{

offset: 0,

color: '#f7f8fa'

}, {

offset: 1,

color: '#cdd0d5'

}]),

title: {

text: '1990 與 2015 年各國家人均壽命與 GDP'

},

legend: {

right: 10,

data: ['1990', '2015']

},

xAxis: {

splitLine: {

lineStyle: {

type: 'dashed'

}

}

},

yAxis: {

splitLine: {

lineStyle: {

type: 'dashed'

}

},

scale: true

},

series: [{

name: '1990',

data: data[0],

type: 'scatter',

symbolSize: function (data) {

return Math.sqrt(data[2]) / 5e2;

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

},

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(120, 36, 50, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(251, 118, 123)'

}, {

offset: 1,

color: 'rgb(204, 46, 72)'

}])

}

}

}, {

name: '2015',

data: data[1],

type: 'scatter',

symbolSize: function (data) {

return Math.sqrt(data[2]) / 5e2;

},

label: {

normal: {

show:true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(25, 100, 150, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(129, 227, 238)'

}, {

offset: 1,

color: 'rgb(25, 183, 207)'

}])

}

}

}]

};

echarts里面的itemStyle(圖形樣式)參數(shù)分有 normal 和 emphasis 兩個(gè)狀態(tài)。normal 是圖形在默認(rèn)狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式。

echarts的具體配置可以根據(jù)自己的需要在官方文檔下面找到。例如樓主提的這個(gè)問題，可以參考：http://echarts.baidu.com/opti...。這里顯示介紹了散點(diǎn)圖的配置項(xiàng)。?

你說的x軸數(shù)據(jù)更改了顯示不出來的問題嘛，你要看看自己的數(shù)據(jù)有沒有搞錯(cuò)喲。

![圖片上傳中...]

根據(jù)自己的數(shù)據(jù)去做相應(yīng)的調(diào)整，應(yīng)該是沒有問題的哈。

我主要是沒有很明白你的那張?jiān)O(shè)計(jì)圖的意思，橫縱坐標(biāo)分別對(duì)應(yīng)的啥子呢。你現(xiàn)在的意思是再加個(gè)時(shí)間軸嘛。

因?yàn)槟汩_發(fā)用的是echart3,添加時(shí)間軸的官方文檔在http://echarts.baidu.com/opti...。

我按照之前的例子再寫了一下。我的意思是以月份為橫坐標(biāo)，縱坐標(biāo)隨便，然后以年份為時(shí)間軸，就相同于統(tǒng)計(jì)了每年不同月份的不同名稱的上升下降情況。代碼中的[1,89.5,30,'北京',"上升"],第一個(gè)表示月份x,第二個(gè)隨便寫的y值，第三個(gè)為圓圈的大小，第四個(gè)值為上升還是下降。把2010-2015年的數(shù)據(jù)都放到一個(gè)對(duì)象里面，通過對(duì)象的屬性名去獲取相應(yīng)年份的數(shù)據(jù)。

示例代碼

var dataMap = {

2010:[[[1,89.5,30,'北京',"上升"],[2,77.5,30,'天氣',"上升"]],[[2,81.5,20,'北京',"下降"],[1,80.5,20,'天氣',"下降"]]],

2011:[[[2,90,30,'北京',"上升"],[1,77.6,30,'天氣',"上升"]],[[1,81.3,20,'北京',"下降"],[2,80.3,20,'天氣',"下降"]]],

2012:[[[1,89,30,'北京',"上升"],[2,77.7,30,'天氣',"上升"]],[[1,81.2,20,'北京',"下降"],[2,80.6,20,'天氣',"下降"]]],

2013:[[[1,88.9,30,'北京',"上升"],[2,77.6,30,'天氣',"上升"]],[[2,81.6,20,'北京',"下降"],[1,80.4,20,'天氣',"下降"]]],

2014:[[[1,89.8,30,'北京',"上升"],[2,77.4,30,'天氣',"上升"]],[[1,81.3,20,'北京',"下降"],[2,80.3,20,'天氣',"下降"]]],

2015:[[[1,89.1,30,'北京',"上升"],[2,77.3,30,'天氣',"上升"]],[[2,81.5,20,'北京',"下降"],[1,80.5,20,'天氣',"下降"]]]

};

option = {

baseOption: {

timeline: {

axisType: 'time',

autoPlay: true,

playInterval: 1000,

data: ['2010', '2011', '2012', '2013', '2014', '2015'],

label: {

formatter : function(s) {

return (new Date(s)).getFullYear();

}

}

},

title: {

subtext: '數(shù)據(jù)來自國家統(tǒng)計(jì)局'

},

legend: {

right: 10,

data: ['上升', '下降']

},

xAxis: {

splitLine: {

lineStyle: {

type: 'dashed'

}

}

},

yAxis: {

splitLine: {

lineStyle: {

type: 'dashed'

}

},

scale: true

},

series: [

{ // 系列一的一些其他配置

type: 'scatter',

}

]

},

options: [

{ // 這是'2010-01-01' 對(duì)應(yīng)的 option

title: {

text: '2010年統(tǒng)計(jì)值'

},

series: [{

name: '上升',

data: dataMap['2010'][0],

type: 'scatter',

symbolSize: function (data) {

return data[2] ;

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(120, 36, 50, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(251, 118, 123)'

}, {

offset: 1,

color: 'rgb(204, 46, 72)'

}])

}

}

}, {

name: '下降',

data: dataMap['2010'][3],

type: 'scatter',

symbolSize: function (data) {

return data[2];

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(25, 100, 150, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(129, 227, 238)'

}, {

offset: 1,

color: 'rgb(25, 183, 207)'

}])

}

}

}]

},

{ // 這是'2011-01-01' 對(duì)應(yīng)的 option

title: {

text: '2011年統(tǒng)計(jì)值'

},

series: [{

name: '上升',

data: dataMap['2011'][0],

type: 'scatter',

symbolSize: function (data) {

return data[2] ;

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(120, 36, 50, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(251, 118, 123)'

}, {

offset: 1,

color: 'rgb(204, 46, 72)'

}])

}

}

}, {

name: '下降',

data: dataMap['2011'][4],

type: 'scatter',

symbolSize: function (data) {

return data[2];

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(25, 100, 150, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(129, 227, 238)'

}, {

offset: 1,

color: 'rgb(25, 183, 207)'

}])

}

}

}]

},

{ // 這是'2012-01-01' 對(duì)應(yīng)的 option

title: {

text: '2012年統(tǒng)計(jì)值'

},

series: [{

name: '上升',

data: dataMap['2012'][0],

type: 'scatter',

symbolSize: function (data) {

return data[2] ;

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(120, 36, 50, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(251, 118, 123)'

}, {

offset: 1,

color: 'rgb(204, 46, 72)'

}])

}

}

}, {

name: '下降',

data: dataMap['2012'][5],

type: 'scatter',

symbolSize: function (data) {

return data[2];

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(25, 100, 150, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(129, 227, 238)'

}, {

offset: 1,

color: 'rgb(25, 183, 207)'

}])

}

}

}]

},

{ // 這是'2013-01-01' 對(duì)應(yīng)的 option

title: {

text: '2013年統(tǒng)計(jì)值'

},

series: [{

name: '上升',

data: dataMap['2013'][0],

type: 'scatter',

symbolSize: function (data) {

return data[2] ;

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(120, 36, 50, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(251, 118, 123)'

}, {

offset: 1,

color: 'rgb(204, 46, 72)'

}])

}

}

}, {

name: '下降',

data: dataMap['2013'][6],

type: 'scatter',

symbolSize: function (data) {

return data[2];

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(25, 100, 150, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(129, 227, 238)'

}, {

offset: 1,

color: 'rgb(25, 183, 207)'

}])

}

}

}]

},

{ // 這是'2014-01-01' 對(duì)應(yīng)的 option

title: {

text: '2014年統(tǒng)計(jì)值'

},

series: [{

name: '上升',

data: dataMap['2014'][0],

type: 'scatter',

symbolSize: function (data) {

return data[2] ;

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(120, 36, 50, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(251, 118, 123)'

}, {

offset: 1,

color: 'rgb(204, 46, 72)'

}])

}

}

}, {

name: '下降',

data: dataMap['2014'][7],

type: 'scatter',

symbolSize: function (data) {

return data[2];

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(25, 100, 150, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(129, 227, 238)'

}, {

offset: 1,

color: 'rgb(25, 183, 207)'

}])

}

}

}]

},

{ // 這是'2015-01-01' 對(duì)應(yīng)的 option

title: {

text: '2015年統(tǒng)計(jì)值'

},

series: [{

name: '上升',

data: dataMap['2015'][0],

type: 'scatter',

symbolSize: function (data) {

return data[2] ;

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(120, 36, 50, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(251, 118, 123)'

}, {

offset: 1,

color: 'rgb(204, 46, 72)'

}])

}

}

}, {

name: '下降',

data: dataMap['2015'][8],

type: 'scatter',

symbolSize: function (data) {

return data[2];

},

label: {

normal: {

show: true,

formatter: function (param) {

return param.data[3];

},

position: 'bottom'

}

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor: 'rgba(25, 100, 150, 0.5)',

shadowOffsetY: 5,

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color: 'rgb(129, 227, 238)'

}, {

offset: 1,

color: 'rgb(25, 183, 207)'

}])

}

}

}]

}

]

};

反正大概思想就是這個(gè)樣子的，多看一下官方API肯定能行的呢。

總結(jié)

以上是生活随笔為你收集整理的echarts x轴显示部分值_echarts x轴数据显示问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。