echarts x轴显示部分值_echarts x轴数据显示问题
可以的哦。
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(图形样式)参数分有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式。
echarts的具体配置可以根据自己的需要在官方文档下面找到。例如楼主提的这个问题，可以参考：http://echarts.baidu.com/opti...。这里显示介绍了散点图的配置项。☺
你说的x轴数据更改了显示不出来的问题嘛，你要看看自己的数据有没有搞错哟。
![图片上传中...]
根据自己的数据去做相应的调整，应该是没有问题的哈。
我主要是没有很明白你的那张设计图的意思，横纵坐标分别对应的啥子呢。你现在的意思是再加个时间轴嘛。
因为你开发用的是echart3,添加时间轴的官方文档在http://echarts.baidu.com/opti...。
我按照之前的例子再写了一下。我的意思是以月份为横坐标，纵坐标随便，然后以年份为时间轴，就相同于统计了每年不同月份的不同名称的上升下降情况。代码中的[1,89.5,30,'北京',"上升"],第一个表示月份x,第二个随便写的y值，第三个为圆圈的大小，第四个值为上升还是下降。把2010-2015年的数据都放到一个对象里面，通过对象的属性名去获取相应年份的数据。
示例代码
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: '数据来自国家统计局'
},
legend: {
right: 10,
data: ['上升', '下降']
},
xAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
series: [
{ // 系列一的一些其他配置
type: 'scatter',
}
]
},
options: [
{ // 这是'2010-01-01' 对应的 option
title: {
text: '2010年统计值'
},
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' 对应的 option
title: {
text: '2011年统计值'
},
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' 对应的 option
title: {
text: '2012年统计值'
},
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' 对应的 option
title: {
text: '2013年统计值'
},
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' 对应的 option
title: {
text: '2014年统计值'
},
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' 对应的 option
title: {
text: '2015年统计值'
},
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)'
}])
}
}
}]
}
]
};
反正大概思想就是这个样子的，多看一下官方API肯定能行的呢。
echarts x轴显示部分值_echarts x轴数据显示问题相关推荐
- echarts折线图鼠标悬浮竖线_echarts y轴，显示数据，但不显示竖线
在yAxis中插入: axisLine: {show:false}, axisTick: {show:false}, yAxis : [ { show:true, axisLine: {show:fa ...
- echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
- ECharts图表设置x轴和y轴显示数值
ECharts图表设置x轴和y轴显示数值 未设置的效果: 想要达到的效果: 重要代码: xAxis.axisLabel.interval = 5; // 设置x轴间隔5个显示 // 设置y轴显示的最大 ...
- echarts的x时间轴显示的月份是英文缩写
echarts的x时间轴显示的月份是英文缩写 这是因为echarts默认是英文的显示,只需要改成中文就可以显示成中文了,在init的时候加上{ locale: "ZH" }(nul ...
- vue echarts 折线图多Y轴显示，加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...
- pandas折线图x轴显示不全_echarts 折线图(移动端)X轴显示不全
主要原因 X轴文字太多,需要文字倾斜角度,换行以及省略 X轴文字倾斜角度,换行 interval 坐标轴刻度标签的显示间隔(在类目轴中有效哦),默认会采用标签不重叠的方式显示标签(也就是默认会将部分文 ...
- Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
- echarts柱状图自定义显示内容
echarts柱状图自定义显示内容 基础搭建 基础搭建 1.引入js <script src="js/echarts.min.js"></script> 2 ...
- echarts切换折线图变大_Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = { backgroundColor: '#FFF0F5', title: { text: '折线图', subtext: '模拟数据', x ...
最新文章
- OpenCV遮罩相机的实例(附完整代码)
- 一步一步详解高斯日记
- Github(5)-开源开发-常见错误
- GPRS底层API（转）
- CentOS7 最小化安装后的必备操作
- 日志中出现乱码_合宙Luat | 乱码搞得一团糟？开源神器帮你轻松修复
- 搜狐畅游笔试题：1. 美丽的项链(动态规划) 2.多线程并发交替输出
- Html前端基础（form表单、img标签、a href标签、id的作用）
- Python入门学习笔记（6）
- php解析markdown前端渲染,Vuejs使用 vue-markdown 来渲染评论方法
- 疫情再次严峻没地蹲坑，无聊在家做单片机点亮一个发光二极管实验
- 依时利考勤机说明书_指纹考勤机如何安装及使用说明|依时利
- linux系统下载7.0,redhat7.0_redhat enterprise linux 7.0下载 附安装教程 - 121下载站
- linux mariadb,linux配置mariaDB
- 唯品会还“品“的动吗？
- 图的深度(DFS)/广度优先搜索算法(BFS)/Dijkstra
- 如何成为有效学习的高手(许岑)——思维导图 1
- 【IDEA 教程系列第 3 篇】idea 设置代码提示不区分大小写
- 【FFT】快速傅里叶变换详解
- linux上卸载php,linux怎么卸载软件?
热门文章
- 16万装饰复古家 独享130平欧式生活
- 线性运动控制PWM频率选择
- DeviceIOControl与驱动层 - 缓冲区模式
- 【剑指offer】 登峰造极--字符串的排列
- 【正点原子STM32连载】第四十二章 FLASH模拟EEPROM实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
- (Python)Win7系统Python3.8安装
- 七下计算机资源管理教学设计,《个人数字化信息资源管理》教学设计2篇
- 使用Java访问https接口javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure
- IT企业薪酬结构一览
- Android游戏-拼图游戏（Android studio）