精华内容
下载资源
问答
  • 之前用matlab画图的时候,想画一个双x轴单Y轴图像,自己写了好久都没有实现,最后在matlab的官网上找到了这个函数,可以实现双X轴双Y轴的绘图,然后就可以利用ax.Yaxixs.Visible='off',就可以隐藏一个Y轴实现双X轴,...
  • 公司业务需要需要做一个双X双Y的图形报表,之前研究过很多例子结合把双X轴不等分显示; 1、有曲线图、有柱状图 2、X轴分组合并显示 3、可自行修改显示数值和比例在一个图上
  • Echarts 实现双X轴标签不等分对应

    千次阅读 2020-03-23 17:56:21
    Echarts 默认双X轴实现的效果是等分在X轴的,没有对应关系,这里’伪’实现了不等分的情况。 实现思路: 两个网格 grid; 底部网格也是柱状图,计算要包含的柱条所占总数的百分比,设置 barWidth再加些样式,即可...

    Echarts 默认双X轴实现的效果是等分在X轴的,没有对应关系,这里’伪’实现了不等分的情况。

    在这里插入图片描述

    实现思路:

    1. 两个网格 grid
    2. 底部标签网格也是柱状图,计算要包含的柱条所占总数的百分比,设置 barWidth再加些样式,即可实现似包含关系的效果。
    let data = {
        xData: ['花溪区', '南明区', '观山湖区', '钟山区', '六枝特区', '红花岗区', '汇川区', '遵义县', '西秀区', '平坝县', '玉屏县'],
        yData: [0.1, 0.15, 0.18, 0.25, 0.23, 0.32, 0.33, 0.36, 0.57, 0.72, 0.45]
    }
    /**
        双X轴标签对应,伪实现思路:
        底部的标签也是柱状图,对应包含的区域为上方X轴条数占总数的比例,设为宽度即可
    */
    option = {
        tooltip: {},
        grid: [
            {
                bottom: 61
            },
            {
                height: 60,
                bottom: 0
            }
        ],
        xAxis: [{
            type: 'category',
            data: data.xData,
            gridIndex: 0,
            axisLabel: {
                color: '#333'
            },
            axisLine: {
                lineStyle: {
                    color: '#e7e7e7'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#e7e7e7'
                }
            },
            zlevel: 2
        }, {
            type: 'category',
            gridIndex: 1,
            axisLine: {
                show: false
            },
            zlevel: 1
        }],
        yAxis: [{
            type: 'value',
            gridIndex: 0,
            axisLabel: {
                color: '#333'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },{
            type: 'value',
            gridIndex: 1,
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }],
        series: [{
            data: data.yData,
            type: 'bar',
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#555'
                }
            },
            itemStyle: {
                normal: {
                    color: (params) => {
                        let colors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']
                        return colors[params.dataIndex]
                    }
                }
            },
            xAxisIndex: 0,
            yAxisIndex: 0
        },{
            data: [{
                name: '贵阳市',
                value: 1
            }],
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
                offset: [0, 10],
                textStyle: {
                    color: '#777'
                }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '27.2727%',
            itemStyle: {
                normal: {
                    color: 'rgba(134,176,237, .5)'
                }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
        },{
            data: [{
                name: '六盘水市',
                value: 1
            }],
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
                offset: [0, 10],
                textStyle: {
                    color: '#777'
                }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '18.1818%',
            itemStyle: {
                normal: {
                    color: 'rgba(40,191,126, .5)'
                }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
        },{
            data: [{
                name: '遵义市',
                value: 1
            }],
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
                offset: [0, 10],
                textStyle: {
                    color: '#777'
                }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '27.2727%',
            itemStyle: {
                normal: {
                    color: 'rgba(237,124,47, .5)'
                }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
        },{
            data: [{
                name: '安顺市',
                value: 1
            }],
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
                offset: [0, 10],
                textStyle: {
                    color: '#777'
                }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '18.1818%',
            itemStyle: {
                normal: {
                    color: 'rgba(242,169,59, .5)'
                }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
        },{
            data: [{
                name: '铜仁市',
                value: 1
            }],
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
                offset: [0, 10],
                textStyle: {
                    color: '#777'
                }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '9.0909%',
            itemStyle: {
                normal: {
                    color: 'rgba(249,207,54, .5)'
                }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
        }]
    };
    

    查看 demo

    查看更多Echarts作品

    展开全文
  • echarts使用心得, 双X轴, 警戒线

    千次阅读 2019-08-20 15:25:51
    //类目轴X轴数据 var scoreList= [88,90,77,80,82,60,70];//为类目轴所对应y轴数值 var optionList= []; //第二轴数据与上类似 var option = { xAxis: [{ type: 'category', data: lnList, ...

    echarts相关使用经验

    前段做微信公众号有一个关于图表的需求, 整理下用到的相关代码,为自己做个总结, 希望也能帮到其他的朋友, ,直接上代码吧;

    	var myChart =  echarts.init(document.getElementById('main'),null,{renderer: 'svg'});
    	var lnList = ['一年级','二年级','三年级','四年级','五年级','六年级'];//类目轴X轴数据 	  	
    	var scoreList= [88,90,77,80,82,60,70];//为类目轴所对应y轴数值   	
    	var optionList= []; //第二轴数据与上类似
              var option = {
      		
                  xAxis: [{
                      type: 'category',
                      data: lnList,
                      axisLabel: {
                      interval: 0,
                          formatter: function (value) {
                              return value.split("").join("\n");//此处为类目轴X轴文字反转竖排,由于lz是做的手机端h5
                          }
                      },
                      axisTick:{       
                          "show":false //x轴刻度线,true为显示, fase为不显示
                      },
                  },{
                      type:'value',//第二个X轴为数值轴不需要提供数据, 根据数值自适应
                      scale:true,
                  }],
                  yAxis:[ {
                      type: 'value',
                      name:'M值',
                      max:3.5,
                      nameLocation:'end',
                      interval:0.5,
                      /* axisLabel: {
                           show: true,
                           textStyle: {
                               color: 'black'
                           },
                           formatter: function (value) {			//;利用回调 y轴上数值显示对应的文字
                               var texts = []
                               if (value === 1.5 || value === '1.5') {
                                   texts.push('无')
                               } else if (value === 2.5 || value === '2.5') {
                                   texts.push('轻')
                               } else if (value === 3.5 || value === '3.5') {
                                   texts.push('中')
                               } else if (value === 4.5 || value === '4.5') {
                                   texts.push('重')
                               } else if (value === 5.5) {
                                   texts.push('严重')
                               }
                               return texts
                           }
                       }*/
                  }],
                  series: [{
                      name:'分类',
                      data: scoreList,
                      type: 'bar',
                      barWidth : 10,
                   markLine : {
                          symbol:'none',
                          label:{
                              position:'end', //将警示值放在哪个位置,三个值“start”,“middle”,“end” 开始 中点 结束
    
                              formatter: function (data) { //警戒线回调, 对应X轴数值
                                  console.log(data);
                                  if (data.value === 1.5){
                                      return "警戒";
                                  }else{
                                      return '';
                                  }
                              },
                              color:'red',
                              fontSize:10
          },
                          data : [
                              {	name:"目标值",
                                  yAxis: 1.5,//res.targetTwo,
                                  lineStyle:{
                                      color:"#F70000",
                                  },
                              },
                          ]
                      },
                      itemStyle:{
                          normal:{
                              color:function(params){	//根据值的不同柱状图可以显示不同的颜色,lz需求只显示一种颜色,忘了删掉这段了,						正好安利一下
                                  if(params.value <1.50){
                                      return "#999";
                                  }else if(params.value >=1.50 && params.value<=2.50 ){
                                      return "#999";
                                  }else if(params.value >=2.50 && params.value<=3.50 ){
                                      return "#999";
                                  }else if(params.value >=3.50 && params.value<=4.50 ){
                                      return "#999";
                                  }else if(params.value >=4.50 ){
                                      return "#999";
                                  }
                              }
                          }
                      },
                  },{
                      name:'题号',   //此为第二轴数据
                      type: 'scatter',
                      data:optionList,
                      symbolSize:4,
                      itemStyle:{
                          color:'#999',
                      },
                  }],
              };
              myChart.setOption(option);
    

    以上为全部代码;

    1, 警戒线相关设置, markLine内代码为警戒线相关设置
    在这里插入图片描述

    2,此处代码在series的里面, 作为根据值的回调柱状图显示不同颜色, 其他图形可以举一反三做相关处理
    在这里插入图片描述

    相关重点部分都做有特殊标记; 包含警戒线,X轴双轴,数值回调处理多方面需要,做了一部分修改,可适用大多场景;

    展开全文
  • echarts双X轴刻度居中

    2020-11-11 17:19:09
    echarts双X轴刻度居中 小伙伴们如果遇到echarts双X轴居中问题,可以参考本文,亲测有效哦 页面要实现的效果如下图所示: 代码如下图所示: let smxData = [ “38”, “39”, “39”, “39”, “39”, “39”,...

    echarts双X轴刻度居中

    小伙伴们如果遇到echarts双X轴居中问题,可以参考本文,亲测有效哦

    • 页面要实现的效果如下图所示:
      在这里插入图片描述

    • 代码如下图所示

    • let smxData =
      [
      “38”, “39”, “39”, “39”, “39”, “39”, “39”,“39”, “40”,“40”, “40”,“40”, “40”, “40”, “40”, “41”, “41”, “41”,“41”, “41”,“41”,“41”,“42”];
      let indexData =
      [true, true,false, false,false, false,false, false,true, false,false, false,false, false, false, true,false,false,false,false,false,false,true];
      let indexData2 = [true,false, false,false, true, false,false,false, false,false, false, true,false,false, false,false,
      false,false, true,false, false, false,true];
      var option = {
      title: {
      text: “XXXXX行情走势图”,
      x: “center”,
      align: “right”,
      },
      grid: {
      bottom: 160,
      },
      tooltip: {
      trigger: “axis”,
      axisPointer: {
      animation: false,
      },
      },
      dataZoom: [
      {
      show: false,
      realtime: false,
      },
      ],
      xAxis: [
      {
      type: “category”,
      position: “bottom”,
      //boundaryGap: false,
      axisLine: { show: true },
      data: [
      “1”,
      “2”,
      “3”,
      “4”,
      “5”,
      “6”,
      “7”,
      “8”,
      “2”,
      “3”,
      “4”,
      “5”,
      “6”,
      “7”,
      “8”,
      “2”,
      “3”,
      “4”,
      “5”,
      “6”,
      “7”,
      “8”,
      “9”,
      ],
      },
      {
      type: “category”,
      //boundaryGap: false,
      position: “bottom”,
      data: smxData,
      axisLabel: {
      margin: 70, /设置坐标轴文字与轴线距离/
      align: “center”,
      show: true,
      interval: function (index, value) {
      if (indexData2[index]) {
      return value;
      }
      },
      },
      axisLine: {
      lineStyle: {
      width: 1,
      },
      },
      axisTick: {
      // inside: true,
      interval: function (index, value) {
      if (indexData[index]) {
      return value;
      }
      },
      length: 60,
      },
      },
      ],
      yAxis: [
      {
      type: “value”,
      min: 100,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
      formatter: function (value, index) {
      return value > 1000 ? value / 1000 + “k” : value;
      },
      },
      splitLine: {
      show: true,
      },
      },
      ],
      series: [
      {
      name: “模拟数据”,
      type: “line”,
      smooth: true,
      symbol: “none”,
      sampling: “average”,
      itemStyle: {
      normal: {
      color: “green”,
      },
      },
      markLine: {
      silent: true,
      animation: false,
      symbol: “”,
      label: {
      normal: { show: false },
      },
      lineStyle: {
      normal: {
      color: “#666”,
      type: “dotted”,
      },
      },
      data: [
      {
      yAxis: 920,
      },
      ],
      },
      data: [
      600,
      870,
      1120,
      700,
      345,
      666,
      777,
      888,
      870,
      1120,
      700,
      345,
      666,
      777,
      888,
      870,
      1120,
      700,
      345,
      666,
      777,
      888,
      222,
      ],
      },
      ],
      };


    学习目标:

    echarts图表

    1、 封装echarts各类图表
    2、 掌握echarts各图表配置信息


    学习时间:

    提示:这里可以添加计划学习的时间
    周一至周五晚上 9:00-9:30


    学习产出:

    1、 技术笔记 1 遍 2、CSDN 技术博客 1 篇
    展开全文
  • boundaryGap 默认为 true,因此类目两边会有留白(为了美观),此时的刻度也不再与标签对齐,需要设置 xAxis.axisTick.alignWithLabel 为 true xAxis.axisLine.onZero 默认为 true,因此 x 总是与 y 的 0 ...

    1. echarts 在线编辑:点击

    2. 参考配置

    let colors = ['#5793f3', '#d14a61', '#675bba'];
    option = {
        color: colors,
        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data:['2015 降水量', '2016 降水量']
        },
        grid: {
            top: 70,
            bottom: 50
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '降水量  ' + params.value
                                + (params.seriesData.length ? ':' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
            },
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '降水量  ' + params.value
                                + (params.seriesData.length ? ':' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '2015 降水量',
                type: 'line',
                xAxisIndex: 1,
                smooth: true,
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name: '2016 降水量',
                type: 'line',
                smooth: true,
                data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
            }
        ]
    };
    

    3. 说明

    • color

    color 是有默认值的,之所以在这里显式地设置颜色,是因为 color 的默认值只能针对于 series(即曲线的颜色),无法针对坐标轴,这样做可以自定义 series 的同时,也设置了坐标轴的颜色(见 xAxis.axisLine.lineStyle)。这对于双轴的图表有很强的辨识度。

    • tooltip.trigger

    默认为 item,这里设置为 none,表示没有触发器,是因为已经在 xAxis .axisPointer.label 进行了配置,所以会在坐标轴处显示含有相关数据的标签,因此不必赘余地增加 tooltip 的触发器了。

    • tooltip.axisPointer.type

    默认是 line,但这样就必须显式地在 xAxis.axisPointer.show、yAxis.axisPointer.show 处设置,而设置为 cross,则会因为 tooltip.axisPointer. axis = 'auto' 这样的默认配置而自动选择类目轴或时间轴(xAxis.type 已经配置为类目轴)。

    • legend.data

    该数组需要与 series 的 name 保持一致

    • xAxis.axisTick.alignWithLabel

    由于类目轴  xAxis. boundaryGap 默认为 true,因此类目轴两边会有留白(为了美观),此时的刻度也不再与标签对齐,需要设置 xAxis.axisTick.alignWithLabel 为 true

    • xAxis.axisLine.onZero

    默认为 true,因此 x 轴总是与 y 轴的 0 刻度对齐,对于双轴是绝对不行的,因为另一个 x 轴需要与 y 轴的顶部对齐,于是这里全部设置为 false。

    ps:经过测试,即使这里两边都不设置,也不会有影响,如果都设置成 true,也不会有影响,有可能是因为设置冲突,因此忽略配置。

    • xAxis.axisPointer.label

    这里使用回调函数的形式进行了设置,之前的 tooltip.trigger 关闭了,就是因此这里自定义的 label,否则 tooltip 会让用户有一些混乱。

    • series.xAxisIndex

    在单个图表实例中存在多个 x 轴的时候就必须使用这个,否则 echarts 无法辨别 series 对应哪个 x 轴。

     

     

    展开全文
  • import matplotlib.pyplot as plt ...# 随机生成测试数据 y1=x y2=x^2 x = np.arange(1,10,1) y1 = x y2 = pow(x,2) # 生成画布 fig = plt.figure() #添加一个子图 ax1 = fig.add_subplot(111) ...
  • 先上效果图,如果所示,上面x轴的刻度从20-30,下面x轴的刻度从0-6,这样就达到了上下两条x轴显示不同刻度的目的。 下面我们说一下怎么做到的,其实比较简单,通过添加一层图层,就可以做到了,也就是说上方的x...
  • matlab画双X轴.pdf

    2021-10-13 16:01:26
    matlab画双X轴.pdf
  • 近段时间用Originpro画图,感觉还是比较容易上手的,但是画出来的图一般是单边坐标,和一些论文里面的图还是有区别的,如下图: 而论文中的一般是这种: 那么这种应该怎么去通过第一张图去实现呢?其实很...
  • Highcharts 实现双X轴

    千次阅读 2016-07-20 13:25:43
    Highcharts 实现双X轴
  • 主要介绍了matplotlib 画轴子图无法显示x轴的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • echarts双正x轴条形图

    千次阅读 2019-10-23 17:58:06
    一、效果图: 二、配置代码 let option = { title: { text: 'TOP10' }, tooltip: { ... axisPointer: { // 坐标指示器,坐标触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'...
  • Origin绘制双x,y图像

    千次阅读 2020-07-24 16:09:03
    目的是绘制双x,双y的图像,并且两组数据的个数不一致。 2.准备模拟数据 首先在excel中模拟了两组数据,P列为1-5随机个数的数值,用于绘制直方图。Q,S列的关系为S=sin(Q),用于绘制折线图。 3.绘图 将P列数据粘贴...
  • echart出现x轴双类目显示

    千次阅读 2018-12-18 17:24:00
    为什么80%的码农都做不了架构师?>>> ...
  • 绘制坐标

    千次阅读 2020-08-23 20:28:00
    欢迎关注”生信修炼手册”!坐标图作为常用的可视化方式之一,可以在同一张图中同时展示两个不同范围的数据,示例如下在matplotib中,有以下两种方式来实现一个坐标图1. seco...
  • pyplot如何实现xy

    2019-07-23 15:42:09
    我知道用ax2 = ax1.twinx()的方法可以实现共用x轴y轴 那如何实现一张图里同时xy轴呢? ![图片说明](https://img-ask.csdn.net/upload/201907/23/1563867597_738213.jpg) 我的目的是绘制一张类似这个...
  • matplotlib绘制坐标纵轴)

    千次阅读 2020-08-17 18:38:01
    坐标绘图示例 import matplotlib.pyplot as plt import numpy as np plt.rcParams['font.sans-serif']=['SimHei']#用来正常显示中文标签 plt.rcParams['axes.unicode_minus']=False#用来正常显示负号 if __...
  • 如下图这样![图片说明](https://img-ask.csdn.net/upload/201712/04/1512377823_18685.png),
  • // x轴 let xData = function () { let data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; const today = new Date(); let month = today.getMonth(); ...
  • HightChartsy+x时间

    千次阅读 2018-04-13 15:22:35
    公司布置完成图表 使用HightCharts显示 根据时间显示探头点数据 由于探头分为两种数据属性 一种是温度(单位℃) 一种是湿度(单位%)所以需要使用纵轴显示 加上横轴使用date属性 需要对date进行formart 上代码:$...
  • EChart设置多个X轴

    千次阅读 2020-07-23 21:55:34
    如上图所示,上面有两个X轴的数据,那么在EChart 数据如下: option = { xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, { type: 'category', position: '...
  • 主要介绍了实现EChartsY左右刻度线一致的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • ECharts 多X轴多Y轴

    千次阅读 2019-09-05 18:09:30
    https://gallery.echartsjs.com/editor.html?c=xNLI0wpbN4
  • matlab画图坐标和多坐标代码

    千次阅读 多人点赞 2021-04-17 13:59:33
    matlab的绘图模块相比于其他软件要好看很多,可以使用句柄画出很漂亮的图,下面介绍plot画单坐标图和双坐标图,另附上多坐标图的代码下载 ...在matlab中坐标图的画法通常使用plotyy函数,具体...
  • Matplotlib简介 Matplotlib是非常强大的python画图工具 Matplotlib可以画图线图、散点图、等高线图、条形图、柱形图、3D图形、图形动画等。...双X轴的 可以理解为共享y轴 ax1=ax.twiny() ax1=plt.t
  • echarts X轴像直尺一样设置刻度

    千次阅读 2020-11-19 16:26:00
    在做老师的项目的时候,老师让我们实现X轴的直尺刻度显示,网上查了查相关代码,大家都没有明确介绍,因此我在这里记录一下,自己的学习。 先看实现效果: 对echarts的xAxis,yAxis这两个属性进行修改即可实现。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,104
精华内容 17,641
关键字:

双x轴