echarts 绘制 坐标值 垂直水平

举报
隔壁老汪 发表于 2022/06/23 23:35:10 2022/06/23
【摘要】       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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。