echarts 绘制 坐标值 垂直水平
【摘要】
https://www.echartsjs.com/examples/zh/editor.html?c=line-simple
将下面的代码拷入后运行，enjoy吧
//markline var markLineOpt = { symbol:...
https://www.echartsjs.com/examples/zh/editor.html?c=line-simple
将下面的代码拷入后运行，enjoy吧
-
-
-
//markline
-
var markLineOpt = {
-
symbol: 'none',
-
itemStyle: {
-
normal: { lineStyle: { type: 'dotted', color:'#000' } }
-
},
-
data: [
-
[{
-
// 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
-
yAxis: '820',
-
xAxis: '820'
-
}, {
-
yAxis: '0',
-
xAxis: '820'
-
}],
-
-
]
-
};
-
//图表
-
-
option = {
-
backgroundColor:'',
-
grid: {
-
top: '15%',
-
bottom:'25%',
-
left:'0',
-
right:'0',
-
containLabel: false
-
},
-
xAxis: [
-
{
-
type: 'category',
-
data: [820, 932, 901, 934, 1290, 1330], //x轴数据
-
axisTick:{
-
show:false,
-
},
-
axisLine:{
-
lineStyle:{
-
color:'#f8914e',
-
width:1
-
}
-
},
-
axisLabel:{
-
textStyle:{
-
color:function(value,index){
-
return index%2==0?'#da241e':'#ffc770'
-
}
-
},
-
fontSize:12,
-
interval:0
-
},
-
},
-
{
-
type: 'category',
-
data: [820, 932, 901, 934, 1290, 1330],//图表中间显示年份参数
-
position: 'bottom',
-
axisTick:{
-
show:false
-
},
-
axisLine:{
-
lineStyle:{
-
color:'transparent',
-
width:0
-
}
-
},
-
axisLabel:{
-
textStyle:{
-
color:function(value,index){
-
return index%2==0?'#da241e':'#ffc770'
-
}
-
},
-
fontSize:12,
-
interval:0
-
},
-
offset: 15,
-
},
-
{
-
type: 'category',
-
data: [820, 932, 901, 934, 1290, 1330],//图表中间显示月份参数
-
axisTick:{
-
show:false
-
},
-
axisLine:{
-
lineStyle:{
-
color:'transparent',
-
width:0
-
}
-
},
-
axisLabel:{
-
textStyle:{
-
color:function(value,index){
-
return index%2==0?'#da241e':'#ffc770'
-
}
-
},
-
fontSize:14,
-
interval:0
-
},
-
-
}
-
],
-
yAxis: {
-
type: 'value',
-
axisTick:{
-
show:false,
-
alignWithLabel: true
-
},
-
splitLine:{show: false},//去除网格线
-
axisLabel:{
-
formatter:function(){
-
return ""
-
}
-
},
-
axisLine:{
-
lineStyle:{
-
color:'#f8914e',
-
width:1,
-
-
}
-
}
-
},
-
series: [
-
/*{
-
name:'',
-
data: [], //柱状图数据，与x轴数据对应
-
type: 'bar',
-
barWidth:20,
-
itemStyle: {
-
normal: {
-
color: function(param) {
-
var colorList = [ "#da241e", "#ffc770" ];
-
var x = '';
-
param.dataIndex%2 ==0 ? x=1 : x=2;
-
if(x == '1') {
-
return colorList[0];
-
} else {
-
return colorList[1]
-
}
-
},
-
barBorderRadius: [3,3,0,0],
-
},
-
},
-
},*/
-
{
-
name:'',
-
data: [820, 932, 901, 934, 1290, 1330],//柱状图上方折线图数据，在柱状图数据基础上+3向上调整位置
-
type:'line',
-
lineStyle:{
-
color:'#FFC770',
-
},
-
label: {
-
show: true,
-
position: 'top'
-
},
-
itemStyle:{
-
normal:{
-
color: function(param) {
-
var colorList = [ "#da241e", "#ffc770" ];
-
var x = '';
-
param.dataIndex%2 ==0 ? x=1 : x=2;
-
if(x == '1') {
-
return colorList[0];
-
} else {
-
return colorList[1]
-
}
-
},
-
}
-
},
-
markLine: markLineOpt,
-
symbol: 'emptyCircle',
-
symbolSize: 10
-
}
-
]
-
};
文章来源: blog.csdn.net，作者：隔壁老瓦，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/wxb880114/article/details/105137614
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）