精华内容
下载资源
问答
  • 说明:使用的 y 轴的 index,单个图表实例中存在多个 y轴的时候有用。 默认值:0。 参数类型:number。 2 原始效果图 3 实现代码(给数据指定y轴) <body> <!-- 为ECharts准备一个具备大小(宽...

    1 使用详解

    yAxisIndex

    说明:使用的 y 轴 的 index,在单个图表实例中存在多个 y轴的时候有用。

    默认值:0。

    参数类型:number。

    2 原始效果图

    3 实现代码(给数据指定y轴)

    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
     
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
    				trigger:'axis',
    				formatter: '{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%'
    			},
                legend: {
                    data:['销量','占比']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: [ {
                    type: 'value',
                    name: '销量',
                    show:true,
    				splitLine:{show:false},
                    axisLine: {
                        lineStyle: {
                            color: '#5e859e',
                            width: 2
                        }
                    }
                },
                {
                    type: 'value',
                    name: '占比',
                    min: 0,
                    max: 100,
                    interval: 10,
    				splitLine:{show:false},
                    axisLabel: {
                        formatter: '{value} %'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#5e859e',//纵坐标轴和字体颜色
                            width: 2
                        }
                    }
                }],
                series: [{
                    name: '销量',
                    type: 'bar',
    				barWidth : '50%',
                    data: [15, 30, 46, 20, 20, 30]
                },{
                    name: '占比',
                    type: 'line',
    				smooth:true,
    				yAxisIndex:1,
                    data: [5, 1, 2, 4, 9, 66]
                }]
            };
     
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>

    4 最终效果图(给数据指定y轴)

    展开全文
  • 近期的项目是一个银联报表类的页面,需要大量的使用echarts的几种图表类型。...圆点散落位置比较自由,并不都在Y轴刻度线; y刻度轴为value类型时,刻度只能为数字,中文会报错(如果说错了请无视- -)...

    近期的项目是一个报表类的页面,需要大量的使用echarts的几种图表类型。但为了精准的还原UI的设计图效果,许多图表以及配置仅仅官方给出的实例和配置项是无法达到效果的。
    所以笔者在echarts提供的图表的基础上,完成了如下的效果,欢迎参考~

    官方实例的折线图效果:

    1. 圆点散落位置比较自由,并不都在Y轴刻度线上;
    2. y刻度轴为value类型时,刻度只能为数字,中文会报错(如果说错了请无视- -),且刻度与刻度线位置平行,并不是我想要的刻度在行间的效果;
    3. 但y刻度轴为category类型时,y的刻度可以位于行间了,但圆点散落位置却也只能落在行间,无法落在刻度线上;
      在这里插入图片描述
      我想要达到的折线图效果:
    4. 圆点落在刻度线上;
    5. y轴是value轴,但达到category类目轴的标签在行间的效果;

    在这里插入图片描述

    实现代码:

    
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('ec-box'))
    var Data_dict = { '高': 200, '中': 100, '低': 0 }
    var Data = ['中','高','低','低']
    
    
    var ecBoxY = ['低','中','高']
    var ecBoxYIndex = -1
    
    var option = {
        grid: {
              left: '3%',
              right: '10%',
              top: '30%',
              bottom: '6%',
              containLabel: true
                },
      title: {
        text: '近12个月',
        textStyle: {
          fontWeight: 'bold',
          fontSize: '14'
        },
        left: '3%',
        top:'-2%'
      },
      animation: false,
      xAxis: {
        type: 'category',
        axisLine: {
          show: false, //是否显示坐标刻度
          lineStyle: {
            color: '#eeeeee'
          }
        },
        axisLabel: {
          //标签样式
          textStyle: {
            fontSize: 14,
            color: '#999999'
          }
        },
        data: [
          {
            //第一段数据不显示
            value: '',
            label: { normal: { show: false } }
          },
          '1',
          '2',
          '3',
          '4'
        ]
      },
      yAxis: {
        type: 'value',
        splitNumber: 2, //分段数
        max:200,  // 这里不写最大值会容易出问题
        axisLine: {
          show: false, //是否显示坐标刻度线
          lineStyle: {
            color: "#f2f4f3"
          }
        },
        axisLabel: {
          inside: true, //刻度值卸载y轴右侧
          padding: [-50, 0, 0, 0], //标签的位置
          textStyle: {
            fontSize: 14,
            color: '#999999'
          },
          formatter: function() {
            return ecBoxY[ecBoxYIndex += 1]
          },
        }
      },
      visualMap: {
        show: false,
        dimension: 0,
        pieces: [
          {
            lte: 5,
            color: '#0090ff'
          },
          {
            gt: 5,
            lte: 9,
            color: '#0090ff'
          },
          {
            gt: 9,
            color: '#0090ff'
          }
        ]
      },
      series: [
        {
          name: '',
          type: 'line',  // 这里可以按需修改 改成bar就是柱状图
          smooth: false,
          symbol: 'circle', //标记的样式(小圆点)
          symbolSize: 10, //标记的尺寸
    
          data: [
            {
              value: '',
              label: { normal: { show: false } }
            },
    
            Data_dict[Data[0]],
            Data_dict[Data[1]],
            Data_dict[Data[2]],
            Data_dict[Data[3]]
          
          ]
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    
    
    展开全文
  • Highcharts 反转x轴与y轴

    千次阅读 2018-12-13 21:26:23
    一 代码 &lt;html&gt; &lt;...Highcharts 反转x轴与y轴&lt;/title&gt; &lt;script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&

    一 代码

    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Highcharts 反转x轴与y轴</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    </head>
    <body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
    $(document).ready(function() {
       //图表类型
       //将 chart 的 inverted 属性设置为 true,X轴为垂直,Y轴为水平的。
       var chart = {
          type: 'area',
         inverted: true
       };
       //标题
       var title = {
          text: '一周平均水果消费'
       };
       //子标题
       var subtitle = {
          style: {
             position: 'absolute',
             right: '0px',
             bottom: '10px'
          }
       };
       var legend = {
          layout: 'vertical',
          align: 'left',
          verticalAlign: 'top',
          x: -150,
          y: 100,
          floating: true,
          borderWidth: 1,
          backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
       };
       //X 轴
       var xAxis = {
          categories: ['周一','周二','周三','周四','周五','周六','周天']
       };
       //Y 轴
       var yAxis = {
          title: {
             text: '数量'
          },
          labels: {
             formatter: function () {
                return this.value;
             }
          },
         min: 0
       };
       var plotOptions = {
          area: {
             fillOpacity: 0.5
          }
       };
       var credits = {
          enabled: false
       };
       //数据
       var series= [{
            name: '小明',
                data: [3, 4, 3, 5, 4, 10, 12]
            }, {
                name: '小马',
                data: [1, 3, 4, 3, 3, 5, 4]
          }
       ];
    
       var json = {};
       json.chart = chart;
       json.title = title;
       json.subtitle = subtitle;
       json.xAxis = xAxis;
       json.yAxis = yAxis;
       json.legend = legend;
       json.plotOptions = plotOptions;
       json.credits = credits;
       json.series = series;
       $('#container').highcharts(json);
    
    });
    </script>
    </body>
    </html>

    二 运行结果

    展开全文
  • 需求如下图:展示的是每个月的排名信息,需要将Y轴进行反转,但是不需要反转X轴 ...//以下代码意思为 :轴线是否另一个轴的0刻度线。 //设置 false 就会回到 bottom处 xAxis: { axisLine: { onZero: false ...

    需求如下图:展示的是每个月的排名信息,需要将Y轴进行反转,但是不需要反转X轴

     配置如下:

    //如果只有这一行代码:x和y轴都会翻转
    yAxis: {
        inverse: true
    },
    //以下代码意思为 :轴线是否在另一个轴的0刻度线上。
    //设置 false 就会回到 bottom处
    xAxis: {
        axisLine: {
          onZero: false
        }
    },

     

     

    展开全文
  • echarts实现两个y轴

    万次阅读 2018-01-17 22:49:32
    前几天有朋友问我,echarts怎么实现两个y轴,我...上面这个就是他要实现的,但是如果他把柱状图改成横向的,两个y轴就会重合一起如下 大家看到了吧,正常我们的图表都是竖直的,如下 ;height:400px;"></div>var m
  • echarts双Y轴(简单明了)

    千次阅读 2020-06-29 09:41:13
    本文主要实现echarts双Y轴,并此过程中解决: echarts双Y轴左右刻度线一致 图例分布显示 坐标轴刻度标签数值取整 X/Y轴名称的分布 坐标轴刻度标签数值以某一值为分界点改变颜色 等问题 1、 echarts双Y轴左右...
  • matplotlib画图时去掉x轴,y轴的方法 Locator 关键字locator英文里表示“定位器”的意思此背景里表示坐标轴。 首先 import matplotlib.pyplot as plt fig, axe = plt.subplots(1, (5, 5)) axe.xaxis.set_major_...
  • ecahrt 的 Y轴 刻度 splitNumber 自动设置

    千次阅读 2020-01-13 11:09:14
    Y轴 刻度的 设置 项目中不可能固定写死. max: 0, // 设置的最大值 splitNumber: 10 , 均分的份数 此时会有个bug : 比如 max 为 5027 , ecahrt 自动均分之后 会分为 5000, 4000 等.. Y轴刻度值会比最大值 小. ...
  • Y轴旋转矩阵如下: 这里看到-sinθ左下角,和z,x轴的旋转不一样(他们左上角),我们来看看为什么。 看看各个轴的关系:x=cross(y,z),z=cross(x,y),y=cross(z,x)。 以下以左手坐标系为例子(右手坐标...
  • 【Matlab】坐标轴y轴默认为reverse

    千次阅读 2017-12-06 11:38:08
    坐标轴设置翻转是 ...%设置坐标位置但是自己今天画的图y轴直接就是反转的,变成正常的要使用 set(gca,'ydir','normal'); 翻转过来了,但是也显示出出现这个的原因是本身图像数据的问题,目前还未解决。
  • Y轴的图片常常会出现默认自带的网格线不重合的情况,如下图,我个人觉得非常丑: 所以我想到了两个比较 trick 的解决办法: 方法一: 一条 line 中加上is_splitline_show = False 意思是把默认自带的网格线...
  • 创建一条共享X或Y轴和新的Y或X轴的Axes对象! import matplotlib.pyplot as plt import matplotlib.dates as mpl_dates import pandas as pd import numpy as np x = np.arange(1, 12, 4) y = np.arange(1, 4, ...
  • MPAndroidChart 教程:坐标轴,X轴,Y轴,Labels(三)

    万次阅读 多人点赞 2015-12-14 18:20:46
    一、坐标1.Document文档中,AxisBase是XAxis和YAxis的父类 AxisBase Baseclass of all labels. XAxis Class representing the x-axis labels settings. Only use the setter methods to modify it. Do not ...
  • eCharts双y轴折线图

    千次阅读 2020-04-02 13:56:47
    yAxis: [ { type: 'value', axisLabel: { axisLine:{ show: true } }, show: true }, { type: 'value', axisLabel: { axisLine:{ show: true }, show: true, //设置y轴数值为% formatter: '{value} %', textStyle: {...
  • 效果图1、hellocharts 的引用 app的 build.gradle 中添加 compile 'com.github.lecho:hellocharts-library:1.5.8@aar' 并再次编译即可2、hellocharts的使用 布局文件 &lt;lecho.lib.hellocharts.view....
  • 该项目不是我的独创,我原有作者的基础,把代码进行了注释、添加了上面三幅图中的两幅图,也就是两个界面。 本文的主要目的,就是对作者的代码进行解读,说明代码的实现过程、用法、思路!! 感谢原作者!原...
  • TeeChart控件默认显示左测Y轴和x轴

    千次阅读 2010-11-28 22:35:00
    TeeChart控件默认显示左测Y轴和x轴,请问如何设置其显示右侧Y轴及其刻度?? 应该可以局域网内自己搭建啊!网上有资料啊! 我的页面叫做Default.aspx页面,里面有一个Repeater控件,绑定的是用户...
  • y轴根据x轴日期所对应的数据,动态显示数据所在区间。 鼠标移入,显示日期对应的数据。 所有有数据的地方,用折线连接,并且用阴影覆盖 效果图 具体实现 安装echarts npm install echarts -S 引入echarts 为了...
  • Echarts (option.yAxis) Y轴 的属性

    千次阅读 2020-07-04 19:21:34
    show: true, // 是否显示 Y轴 type: ‘value’, //(‘value’‘category’‘time’‘log’) name: ‘降雨量(mm)’, // 坐标轴名称 nameLocation: ‘end’, // 坐标轴名称显示位置。(‘start’‘middle’‘center’...
  • 记录一下echarts表格属性 重点是y轴属性名的调整 var option = { title: { text: "日生产曲线" }, color: colors, tooltip: { //辅助线 trigger: 'axis', axisPointer: { ...
  • 如何把CAD中的x轴和y轴互换

    千次阅读 2012-11-08 01:27:15
    打开cad界面,输入"ucs"然后回车或者空格(下面的输入命令后执行相同的操作)建立新的坐标系统,接着出现很多提示,输入"N"新建,然后输入"Z"意思是绕Z旋转,再输入"90"度(逆时针)。 这时,X指向上面,Y指向左边...
  • D3js-画二维坐标轴(x轴,y轴

    万次阅读 2015-06-10 09:17:31
    6.svg中创建X轴和Y轴 svg.append("g") .attr("class","axis") .call(xAxis) .attr("transform","translate(0,"+(height-padding)+")") .append("text") ;//添加坐标轴说明 .text("天数...
  • 示例里工作一般情况是够用了,更复杂的可以查询教程: title 官方解说:... ... 坐标相关: Y轴:http://echarts.baidu.com/option.html#yAxis &amp;amp;amp;lt;scrip...
  • 使用ECharts绘制堆积柱状图时,出现了堆叠的数值超出了Y轴最大值的情况,如下图所示: 逐个排查,发现错误原因在于toolbox中引用了dataZoom: toolbox = { feature: { dataZoom:{ show: false, title:{...
  • 代码示例: import random from matplotlib import pyplot as plt x = range(2,26,2) y = [random.randint(12,35)...# 设置y轴的刻度 # plt.yticks(range(min(y),max(y)+1)) # 构造x轴刻度标签 xticks_label = [f
  • 样式截图大概如下: 1. x,y轴相关操作:xAxis,yAxis (1) x,y轴的颜色: axisLine: { lineStyle: { color: '#2898e5', }, }, (2...
  • 一:修改x/y轴的字体颜色 xAxis/yAxis : [{ type : 'category', axisLabel: { show: true, textStyle: { color: '#fff' } } }] 二:修改x/y轴的颜色 xAxis/yAxis : ...
  • Grafana使用双Y坐标详解

    千次阅读 2021-03-18 21:37:11
    一个面板同时显示RPC调用的成功次数和失败次数,不过因为失败次数和成功的次数远不一个数量级,所以想着分两个Y轴来表示,左边显示成功次数,右边显示错误数。尝试了好久终于成功,这里记录下方法。 文章目录...
  • 使用markLine实现y轴刻度不等分 option = { xAxis: { type: 'category', data: ['1', '2', '3', '4', '5', '6', '7','8','9'] }, yAxis: { type: 'value', "axisTick":{ //...
  • #第一个参数为x轴元素的个数,第二个元素为y轴的值,第三个元素为x轴各元 素的值 plt.show() #输出图像 注: sorted函数讲解 sorted(iterable,key,reverse),sorted一共有iterable,key,reverse这三个参数。其中...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,752
精华内容 16,300
关键字:

在y轴上是什么意思