echarts x轴颜色有负数怎么办
点击联系发帖人
时间：2017-11-07 07:19
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
这是设计图
现在问题是怎么在圆点下边添加文字
我改变下边的x轴的data 上边的图形就显示不出来了 麻烦各位大神看看，下边是echarts里面跟他相似的图
下边这是我写的代码效果图
app.title = '气泡图';
var data = [
[[96869,'Australia',1990],[,,'Canada',1990],[4605773,'China',1990],[,,'Cuba',1990],[6705,'Finland',1990],[,,'France',1990],[,,'Germany',1990],[,254830,'Iceland',1990],[,,'India',1990],[,,'Japan',1990],[,,'North Korea',1990],[72254,'South Korea',1990],[,3397534,'New Zealand',1990],[,4240375,'Norway',1990]],
[[,,'Australia',2015],[,,'Canada',2015],[,,'China',2015],[,,'Cuba',2015],[,5503457,'Finland',2015],[,,'France',2015],[,,'Germany',2015],[,329425,'Iceland',2015],[,,'India',2015],[,,'Japan',2015],[,,'North Korea',2015],[,,'South Korea',2015],[,4528526,'New Zealand',2015],[,5210967,'Norway',2015]]
option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#f7f8fa'
offset: 1,
color: '#cdd0d5'
text: '1990 与 2015 年各国家人均寿命与 GDP'
right: 10,
data: ['上升', '下降']
splitLine: {
show:false,
lineStyle: {
type: 'dashed'
show:false,
splitLine: {
lineStyle: {
scale: true
series: [{
name: '上升',
data: data[0],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(5000) / 2;
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
show: true,
formatter : '{b}'
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: data[1],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(5000) / 2;
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
position: 'top'
itemStyle: {
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)'
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以的哦。app.title = '气泡图';
var data = [
[[96869,'Australia',1990],[,,'Canada',1990],[4605773,'China',1990],[,,'Cuba',1990],[6705,'Finland',1990],[,,'France',1990],[,,'Germany',1990],[,254830,'Iceland',1990],[,,'India',1990],[,,'Japan',1990],[,,'North Korea',1990],[72254,'South Korea',1990],[,3397534,'New Zealand',1990],[,4240375,'Norway',1990],[,,'Poland',1990],[,,'Russia',1990],[,,'Turkey',1990],[,,'United Kingdom',1990],[,,'United States',1990]],
[[,,'Australia',2015],[,,'Canada',2015],[,,'China',2015],[,,'Cuba',2015],[,5503457,'Finland',2015],[,,'France',2015],[,,'Germany',2015],[,329425,'Iceland',2015],[,,'India',2015],[,,'Japan',2015],[,,'North Korea',2015],[,,'South Korea',2015],[,4528526,'New Zealand',2015],[,5210967,'Norway',2015],[,,'Poland',2015],[,,'Russia',2015],[,,'Turkey',2015],[,,'United Kingdom',2015],[,,'United States',2015]]
option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#f7f8fa'
offset: 1,
color: '#cdd0d5'
text: '1990 与 2015 年各国家人均寿命与 GDP'
right: 10,
data: ['1990', '2015']
splitLine: {
lineStyle: {
type: 'dashed'
splitLine: {
lineStyle: {
type: 'dashed'
scale: true
series: [{
name: '1990',
data: data[0],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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;
show:true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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（图形样式）参数分有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式。echarts的具体配置可以根据自己的需要在官方文档下面找到。例如楼主提的这个问题，可以参考：。这里显示介绍了散点图的配置项。?
你说的x轴数据更改了显示不出来的问题嘛，你要看看自己的数据有没有搞错哟。
![图片上传中...]
根据自己的数据去做相应的调整，应该是没有问题的哈。
我主要是没有很明白你的那张设计图的意思，横纵坐标分别对应的啥子呢。你现在的意思是再加个时间轴嘛。因为你开发用的是echart3,添加时间轴的官方文档在。我按照之前的例子再写了一下。我的意思是以月份为横坐标，纵坐标随便，然后以年份为时间轴，就相同于统计了每年不同月份的不同名称的上升下降情况。代码中的[1,89.5,30,'北京',"上升"],第一个表示月份x,第二个随便写的y值，第三个为圆圈的大小，第四个值为上升还是下降。把年的数据都放到一个对象里面，通过对象的属性名去获取相应年份的数据。
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'],
formatter : function(s) {
return (new Date(s)).getFullYear();
subtext: '数据来自国家统计局'
right: 10,
data: ['上升', '下降']
splitLine: {
lineStyle: {
type: 'dashed'
splitLine: {
lineStyle: {
type: 'dashed'
scale: true
{ // 系列一的一些其他配置
type: 'scatter',
options: [
{ // 这是'' 对应的 option
text: '2010年统计值'
series: [{
name: '上升',
data: dataMap['2010'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
{ // 这是'' 对应的 option
text: '2011年统计值'
series: [{
name: '上升',
data: dataMap['2011'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
{ // 这是'' 对应的 option
text: '2012年统计值'
series: [{
name: '上升',
data: dataMap['2012'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
{ // 这是'' 对应的 option
text: '2013年统计值'
series: [{
name: '上升',
data: dataMap['2013'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
{ // 这是'' 对应的 option
text: '2014年统计值'
series: [{
name: '上升',
data: dataMap['2014'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
{ // 这是'' 对应的 option
text: '2015年统计值'
series: [{
name: '上升',
data: dataMap['2015'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
反正大概思想就是这个样子的，多看一下官方API肯定能行的呢。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：解决echarts中X轴文字过长的问题。【转】
时间： 18:02:31
&&&& 阅读：102
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
axisLabel: {
interval: <span style="color: #,
formatter:function(value)
var ret = "";//拼接加\n返回的类目项
var maxLength = <span style="color: #;//每项显示文字个数
var valLength = value.//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN & <span style="color: #)//如果类目项的文字大于3,
for (var i = <span style="color: #; i & rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxL//开始截取的位置
var end = start + maxL//结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += //凭借最终的字符串
转自：http://blog.csdn.net/kebi007/article/details/标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：/axu92312/p/7486089.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！}
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
这是设计图
现在问题是怎么在圆点下边添加文字
我改变下边的x轴的data 上边的图形就显示不出来了 麻烦各位大神看看，下边是echarts里面跟他相似的图
下边这是我写的代码效果图
app.title = '气泡图';
var data = [
[[96869,'Australia',1990],[,,'Canada',1990],[4605773,'China',1990],[,,'Cuba',1990],[6705,'Finland',1990],[,,'France',1990],[,,'Germany',1990],[,254830,'Iceland',1990],[,,'India',1990],[,,'Japan',1990],[,,'North Korea',1990],[72254,'South Korea',1990],[,3397534,'New Zealand',1990],[,4240375,'Norway',1990]],
[[,,'Australia',2015],[,,'Canada',2015],[,,'China',2015],[,,'Cuba',2015],[,5503457,'Finland',2015],[,,'France',2015],[,,'Germany',2015],[,329425,'Iceland',2015],[,,'India',2015],[,,'Japan',2015],[,,'North Korea',2015],[,,'South Korea',2015],[,4528526,'New Zealand',2015],[,5210967,'Norway',2015]]
option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#f7f8fa'
offset: 1,
color: '#cdd0d5'
text: '1990 与 2015 年各国家人均寿命与 GDP'
right: 10,
data: ['上升', '下降']
splitLine: {
show:false,
lineStyle: {
type: 'dashed'
show:false,
splitLine: {
lineStyle: {
scale: true
series: [{
name: '上升',
data: data[0],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(5000) / 2;
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
show: true,
formatter : '{b}'
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: data[1],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(5000) / 2;
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
position: 'top'
itemStyle: {
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)'
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以的哦。app.title = '气泡图';
var data = [
[[96869,'Australia',1990],[,,'Canada',1990],[4605773,'China',1990],[,,'Cuba',1990],[6705,'Finland',1990],[,,'France',1990],[,,'Germany',1990],[,254830,'Iceland',1990],[,,'India',1990],[,,'Japan',1990],[,,'North Korea',1990],[72254,'South Korea',1990],[,3397534,'New Zealand',1990],[,4240375,'Norway',1990],[,,'Poland',1990],[,,'Russia',1990],[,,'Turkey',1990],[,,'United Kingdom',1990],[,,'United States',1990]],
[[,,'Australia',2015],[,,'Canada',2015],[,,'China',2015],[,,'Cuba',2015],[,5503457,'Finland',2015],[,,'France',2015],[,,'Germany',2015],[,329425,'Iceland',2015],[,,'India',2015],[,,'Japan',2015],[,,'North Korea',2015],[,,'South Korea',2015],[,4528526,'New Zealand',2015],[,5210967,'Norway',2015],[,,'Poland',2015],[,,'Russia',2015],[,,'Turkey',2015],[,,'United Kingdom',2015],[,,'United States',2015]]
option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#f7f8fa'
offset: 1,
color: '#cdd0d5'
text: '1990 与 2015 年各国家人均寿命与 GDP'
right: 10,
data: ['1990', '2015']
splitLine: {
lineStyle: {
type: 'dashed'
splitLine: {
lineStyle: {
type: 'dashed'
scale: true
series: [{
name: '1990',
data: data[0],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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;
show:true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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（图形样式）参数分有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式。echarts的具体配置可以根据自己的需要在官方文档下面找到。例如楼主提的这个问题，可以参考：。这里显示介绍了散点图的配置项。?
你说的x轴数据更改了显示不出来的问题嘛，你要看看自己的数据有没有搞错哟。
![图片上传中...]
根据自己的数据去做相应的调整，应该是没有问题的哈。
我主要是没有很明白你的那张设计图的意思，横纵坐标分别对应的啥子呢。你现在的意思是再加个时间轴嘛。因为你开发用的是echart3,添加时间轴的官方文档在。我按照之前的例子再写了一下。我的意思是以月份为横坐标，纵坐标随便，然后以年份为时间轴，就相同于统计了每年不同月份的不同名称的上升下降情况。代码中的[1,89.5,30,'北京',"上升"],第一个表示月份x,第二个随便写的y值，第三个为圆圈的大小，第四个值为上升还是下降。把年的数据都放到一个对象里面，通过对象的属性名去获取相应年份的数据。
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'],
formatter : function(s) {
return (new Date(s)).getFullYear();
subtext: '数据来自国家统计局'
right: 10,
data: ['上升', '下降']
splitLine: {
lineStyle: {
type: 'dashed'
splitLine: {
lineStyle: {
type: 'dashed'
scale: true
{ // 系列一的一些其他配置
type: 'scatter',
options: [
{ // 这是'' 对应的 option
text: '2010年统计值'
series: [{
name: '上升',
data: dataMap['2010'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
{ // 这是'' 对应的 option
text: '2011年统计值'
series: [{
name: '上升',
data: dataMap['2011'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
{ // 这是'' 对应的 option
text: '2012年统计值'
series: [{
name: '上升',
data: dataMap['2012'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
{ // 这是'' 对应的 option
text: '2013年统计值'
series: [{
name: '上升',
data: dataMap['2013'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
{ // 这是'' 对应的 option
text: '2014年统计值'
series: [{
name: '上升',
data: dataMap['2014'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
{ // 这是'' 对应的 option
text: '2015年统计值'
series: [{
name: '上升',
data: dataMap['2015'][0],
type: 'scatter',
symbolSize: function (data) {
return data[2] ;
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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];
show: true,
formatter: function (param) {
return param.data[3];
position: 'bottom'
itemStyle: {
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)'
反正大概思想就是这个样子的，多看一下官方API肯定能行的呢。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：解决echarts中X轴文字过长的问题。【转】
时间： 18:02:31
&&&& 阅读：102
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
axisLabel: {
interval: <span style="color: #,
formatter:function(value)
var ret = "";//拼接加\n返回的类目项
var maxLength = <span style="color: #;//每项显示文字个数
var valLength = value.//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN & <span style="color: #)//如果类目项的文字大于3,
for (var i = <span style="color: #; i & rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxL//开始截取的位置
var end = start + maxL//结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += //凭借最终的字符串
转自：http://blog.csdn.net/kebi007/article/details/标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：/axu92312/p/7486089.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！}
我要回帖
更多关于 echarts x轴字体大小 的文章
更多推荐
- ·什么样的音乐网站才免费听歌的网站有哪些
- ·巨灵书霸是书吗？小说版权怎么买买？
- ·求一部tl漫画
- ·开篇女主被献给男主一步步设计得到女主的小说的现代小说？
- ·求找一本小说说，找到必有重谢
- ·11月11日为什么英超比赛直播网站没有比赛
- ·Solestage淘遍全球海外专营店店运动鞋全吗
- ·守望2017国象世界杯16强2017 8强什么时候
- ·怎样锻炼腿部爆发力肌肉 增强腿部力量
- ·酷骑单车押金一直没退退不了找谁的最新相关信息
- ·住在大理古城去双廊怎么走 想去双廊和小普陀，怎么安排一天的行程 双廊有租单车的么？去小普陀骑行多久？
- ·吃完饭能健身吗完还要吃饭吗？
- ·中国每年有多少人打高尔夫球图片？需要计算公式出来，急，求解，谢谢大神！！！
- ·教练中，湖人凯尔特人人史蒂文斯和湖人沃顿谁的颜值更高
- ·⑴如果先游泳，后梦到姥姥去世家，如何走
- ·大专退学学籍保留几年了可以去民办大专念吗？因为专业实在学不来又不给换，退学去民专是不是就属于预科生了？求解答。
- ·投弹式干粉灭火器主要适用于适用于加油站吗
- ·Mikbe considered asby many to be the best boxer of
- ·中国银联shanghaizongbu和中化集团校招哪个好
- ·grilon yarntsgl-40/4是什么材料
- ·echarts x轴颜色有负数怎么办
- ·导体的温度对导体电阻的影响越高电阻越小在实际生活中的例子
- ·鲁迅早期杂文集的杂文文艺性的议论文有哪些
- ·规范公务接待行为原则上同城不接待对吗
- ·中国农业大学科研处院 预算时间是什么意思
- ·手足多汗症手足麻木怎么治疗疗效果会好？
- ·概率论与数理统计试题，概率密度的题
- ·王羲之草书字体下载的“下”字为什么写成三个点？
- ·关于极值的高数极限题目题目怎么做
- ·简要说明李渔路"浅处见才"通俗戏曲观表现在哪些方面
- ·不会熟练使用 英文拼音是怎样一种体验
- ·有没有小朋友同时考3e和yle
- ·铝合金门窗施工资质制安工程系建设工程施工吗
- ·为什么宝宝易宝宝被螨虫叮咬图片
- ·悬挑式卸料平台验收表钢钢平台若未监理验收擅自使用，监理怎么下发通知单
- ·克百威拌通单258玉米种子简介防什么玉米害虫
