精华内容
下载资源
问答
  • echarts 双y轴

    2020-12-22 16:42:36
    var myChart = echarts.init(document.getElementById('zhexian')); option = { // title: { // text: '最新价格' // }, tooltip: { trigger: 'axis' },
    var myChart = echarts.init(document.getElementById('zhexian'));
                option = {
                    // title: {
                    //     text: '最新价格'
                    // },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['沪铝', '长江', '伦铝']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.time
                    },
                    yAxis: [
                        {
                            type: 'value',
                            min: function(value) {
                                return 10000;
                            },
                            axisLabel : { 
                                show:true,
                                showMinLabel:true,
                                showMaxLabel:true,
                                formatter: function (value) {
                                    return "¥"+value/1000+"k";
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: function(value) {
                                return 1000;
                            },
                            axisLabel : { 
                                show:true,
                                showMinLabel:true,
                                showMaxLabel:true,
                                formatter: function (value) {
                                    return "$"+value/1000+"k";
                                }
                            }
                        }
                    ],
                    series: [{
                            name: '沪铝',
                            type: 'line',
                            yAxisIndex: 0,
                            data: data.num3
                        },
                        {
                            name: '长江',
                            type: 'line',
                            yAxisIndex: 0,
                            data:  data.num4
                        },
                        {
                            name: '伦铝',
                            type: 'line',
                            yAxisIndex: 1,
                            data:  data.num5
                        },
    
                    ]
                };
                myChart.setOption(option);
    
    展开全文
  • echarts双y轴

    2019-09-18 13:48:09
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...Echarts</title> <script type="text/javascript" src="https://cdnjs.cloudflar...

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Echarts</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
        <script type="text/javascript">
            $(function () {
                showChart();
            });
            function showChart() {
                let chart = echarts.init(document.getElementById("chartDiv"));
                let option = {
                    title: {
                        left: 'center',
                        subtext: 'DC: HLKH',
                        text: 'A Chart With Two yAxis',
                        textStyle: {
                            color: '#37a3cf',
                            fontFamily: 'Courier New',
                            textShadowColor: 'blue'
                        },
                        subtextStyle: {
                            color: '#37a3cf'
                        }
                    },
                    grid: {
                        top: '20%',
                        bottom: '20%'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#283b56'
                            }
                        }
                    },
                    legend: {
                        top: '10%',
                        data: ['CPU Usage', 'Speed']
                    },
                    toolbox: {
                        feature: {
                            magicType: {
                                show: true,
                                type: ['line', 'bar'],
                                title: {
                                    line: 'line chart',
                                    bar: 'bar chart'
                                }
                            },
                            saveAsImage: {
                                show: true,
                                title: 'save as image'
                            },
                            restore: {
                                show: true,
                                title: 'restore'
                            },
                            dataView: {
                                show: true,
                                title: 'data view',
                                lang: ['data view', 'close', 'refresh'],
                                backgroundColor: '#37a3cf'
                            },
                            dataZoom: {
                                show: true,
                                title: {
                                    zoom: 'zoom in area',
                                    back: 'restore zoom'
                                }
                            }
                        },
                        x: 'right'
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 100
                    }, {
                        start: 0,
                        end: 10,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#37a3cf',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    xAxis: [
                        {
                            type: 'category',
                            name: "Date",
                            nameGap: 30,
                            nameTextStyle: {
                                color: '#37a3cf',
                                fontWeight: 'bold',
                                fontFamily: 'Courier New',
                                fontSize: 15
                            },
                            boundaryGap: false,
                            axisLabel: {
                                interval: 0,
                                rotate: 45
                            },
                            data: ['2019-09-01', '2019-09-02', '2019-09-03', '2019-09-04',
                                '2019-09-05', '2019-09-06', '2019-09-07']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: 'CPU Usage (%)',
                            axisLabel: {
                                formatter: '{value} %'
                            },
                            nameTextStyle: {
                                color: '#37a3cf',
                                fontWeight: 'bold',
                                fontFamily: 'Courier New',
                                fontSize: 15
                            },
                            boundaryGap: [0, '100%']
                        },
                        {
                            type: 'value',
                            name: 'Speed (s)',
                            max: 100,
                            min: 0,
                            axisLabel: {
                                formatter: '{value} s'
                            },
                            nameTextStyle: {
                                color: '#37a3cf',
                                fontWeight: 'bold',
                                fontFamily: 'Courier New',
                                fontSize: 15
                            },
                            boundaryGap: [0, '100%']
                        }
                    ],
                    series: [
                        {
                            name: 'CPU Usage',
                            type: 'line',
                            smooth: false,
                            yAxisIndex: 0,
                            data: [1, 2, 5, 6, 6, 10, 123]
                        },
                        {
                            name: 'Speed',
                            type: 'line',
                            smooth: false,
                            yAxisIndex: 1,
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        width: 2,
                                        type: 'dotted'
                                    }
                                }
                            },
                            data: [1, 6, 77, 16, 63, 10, 100]
                        }
                    ]
                };
                chart.setOption(option, true);
            }
        </script>
    </head>
    <body>
        <div id="chartDiv" style="width: 1200px;height: 600px"></div>
    </body>
    </html>

     

    展开全文
  • echarts双Y轴(简单明了)

    千次阅读 2020-06-29 09:41:13
    本文主要实现echarts双Y轴,并在此过程中解决: echarts双Y轴左右刻度线一致 图例分布显示 坐标轴刻度标签数值取整 X/Y轴名称的分布 坐标轴刻度标签数值以某一值为分界点改变颜色 等问题 1、 echarts双Y轴左右...

    本文主要实现echarts双Y轴,并在此过程中解决:

    • 实现echarts双Y轴
    • echarts双Y轴左右刻度线一致
    • 图例分布显示
    • 坐标轴刻度标签数值取整
    • X/Y轴名称的分布
    • 坐标轴刻度标签数值以某一值为分界点改变颜色

    等问题
    下方有源码!请注意查收!
    在这里插入图片描述

    1、 实现echarts双Y轴

    1、就一个Y轴时yAxis为对象

       yAxis: {
            type: 'value',
            name:'Y轴名称'
       },
    

    2、两个Y轴时yAxis为数组

    	yAxis : [{
    		  type: 'value',
    		  name:'左侧Y轴名称',
    		  min: 0,
    		  max: 5,
    		  interval: 1,
    		  splitNumber: 6, //设置坐标轴的分割段数
    	 },
    	 {
    		  type: 'value',
    		  name:'右侧Y轴名称',
    		  min: 0,
    		  max: 125,
    		  interval: 25,
    		  splitNumber: 6, //设置坐标轴的分割段数
    	}],
    

    2、 echarts双Y轴左右刻度线一致

    参考文档:
    https://blog.csdn.net/qq_40845885/article/details/82108525
    https://blog.csdn.net/LzzMandy/article/details/79400141?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7

    2.1 、获取数据最大值与最小值

          // 获取最大值方法
          function calMax(arr) {
            var max = Math.max.apply(null, arr); // 获取最大值方法
            var maxint = Math.ceil(max / 5); // 向上以5的倍数取整
            var maxval = maxint * 5 + 5; // 最终设置的最大值
            return maxval; // 输出最大值
          }
          // 获取最小值方法
          function calMin(arr) {
            var min = Math.min.apply(null, arr); // 获取最小值方法
            var minint = Math.floor(min / 1); // 向下以1的倍数取整
            var minval = minint * 1 - 5; // 最终设置的最小值
            return minval; // 输出最小值
          }
          // 调用方法获取数据最大值&最小值
          ......
    

    2.2 、确定两侧坐标轴的分割段数

    splitNumber: 6,
    

    2.3、通过坐标轴的分割段数splitNumber计算坐标轴分割间隔interval

    interval: (maxData1 - minData1) / 6,
    

    2.4、 设置yAxisIndex

    yAxisIndex: 1,    //在单个图表实例中存在多个y轴的时候有用
    

    3、图例分布显示

    利用legend组件的top、bottom、left、right属性去配置

    legend: [
              {
                top: "30%",
                right: "0%",
                data: [ {name: "数据1" } ]
              },
              {
                bottom: "20%",
                left: "0%",
                data: [ {name: "数据2"} ]
              }
            ],
    

    4、坐标轴刻度标签数值取整

    利用toFixed()方法,该方法可把 Number 四舍五入为指定小数位数的数字。规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20。

    axisLabel: {
          formatter: function(v) {
               return v.toFixed(2); //0表示小数为0位,1表示1位小数,2表示2位小数
          }
     }
    

    5、X/Y轴名称的分布

    根据文档X/Y轴名称显示位置 nameLocation的值只能是:‘start’、‘middle’ 或者’center’、‘end’,没办法指定到某一位置,所以本人想到的方法就是利用nameLocation.padding。

    nameTextStyle: {
          padding: [上, 右, 下, 左]
          // 或 padding: [上下,左右]
    }
    

    6、坐标轴刻度标签数值以某一值为分界点改变颜色

    利用axisLabel.color属性

    axisLabel: {
      color: function(value, index) {
          turn value >= 1000 ? "red" : "green";
      }
    }
    

    value >= 1000 ? “red” : “green”;为三目运算符,意思是:如果数值大于等于1000那么数值颜色为红色,否则为绿色。

    源码:

    <template>
      <div class="home">
        <div id="wire"></div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Home",
      data() {
        return {
          data1: [820, 932, 901, 934, 1290, 1330, 1320, 1330, 1340],
          data2: [134, 133, 132, 133, 129, 93, 90, 93, 82]
        };
      },
      mounted() {
        this.myChart = this.$echarts.init(document.getElementById("wire"));
        this.initData();
      },
      methods: {
        initData() {
          // 获取最大值方法
          function calMax(arr) {
            var max = Math.max.apply(null, arr); // 获取最大值方法
            var maxint = Math.ceil(max / 5); // 向上以5的倍数取整
            var maxval = maxint * 5 + 5; // 最终设置的最大值
            return maxval; // 输出最大值
          }
          // 获取最小值方法
          function calMin(arr) {
            var min = Math.min.apply(null, arr); // 获取最小值方法
            var minint = Math.floor(min / 1); // 向下以1的倍数取整
            var minval = minint * 1 - 5; // 最终设置的最小值
            return minval; // 输出最小值
          }
          // 调用方法,获取数据的最大值&最小值
          var maxData1 = calMax(this.data1);
          var maxData2 = calMax(this.data2);
          var minData1 = calMin(this.data1);
          var minData2 = calMin(this.data2);
    
          const option = {
            // 图例组件
            legend: [
              {
                top: "30%",
                right: "0%",
                textStyle: {
                  fontSize: 12, //字体大小
                  color: "#" //字体颜色(图例与图例文字配色保持一致)
                },
                data: [
                  {
                    name: "数据1"
                  }
                ]
              },
              {
                bottom: "20%",
                left: "0%",
                textStyle: {
                  fontSize: 12, //字体大小
                  color: "#" //字体颜色
                },
                data: [
                  {
                    name: "数据2"
                  }
                ]
              }
            ],
            // 直角坐标系内绘图网格
            grid: {
              show: true,
              x: 120,
              y: 50,
              x2: 120,
              y2: 50
            },
            xAxis: {
              name: "X轴数据",
              type: "category",
              data: ["10", "20", "30", "40", "50", "60", "70", "80", "90"],
              nameTextStyle: {
                padding: [0, 0, 50, 50]
              }
            },
            yAxis: [
              {
                type: "value",
                name: "左侧",
                nameTextStyle: {
                  padding: [0, 0, -55, -150]
                },
                min: minData1,
                max: maxData1,
                splitNumber: 6, //设置坐标轴的分割段数
                interval: (maxData1 - minData1) / 6, // 标轴分割间隔
                axisLabel: {
                  formatter: function(v) {
                    return v.toFixed(1); //0表示小数为0位,1表示1位小数,2表示2位小数
                  },
                  color: function(value, index) {
                    return value >= 1000 ? "red" : "green";
                  }
                }
              },
              {
                type: "value",
                name: "右侧",
                nameTextStyle: {
                  padding: [0, 50, -50, 200]
                },
                min: minData2,
                max: maxData2,
                splitNumber: 6,
                interval: (maxData2 - minData2) / 6,
                axisLabel: {
                  formatter: function(v) {
                    return v.toFixed(2); //0表示小数为0位,1表示1位小数,2表示2位小数
                  }
                }
              }
            ],
            series: [
              {
                name: "数据1",
                type: "line",
                color: ["#eb9f0d"],
                symbol: "none",
                smooth: true,
                data: this.data1
              },
              {
                name: "数据2",
                type: "line",
                color: ["#969ac7"],
                symbol: "none",
                smooth: true,
                yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
                data: this.data2
              }
            ]
          };
          this.myChart.setOption(option);
          // 自适应布局
          let _this = this;
          window.addEventListener("resize", function(event) {
            _this.myChart.resize();
          });
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .home {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      #wire {
        width: 800px;
        height: 500px;
        border: 1px solid;
      }
    }
    </style>
    
    
    展开全文
  • 主要介绍了实现ECharts双Y轴左右刻度线一致的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Echarts 双y轴双折线图

    2021-04-22 10:57:33
    Echarts 双y轴双折线图 js code option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data: ['温度', '湿度'] }, grid: { left: '3%', right: '4%', bottom: '3%', ...

    Echarts 双y轴双折线图

    js code

    option = {
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['温度', '湿度']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['周一', '周二', '周三', '周四', '周五']
        },
          yAxis: [
                        {
                            type: 'value',
                            name: '℃',
                           //坐标轴最大值、最小值、强制设置数据的步长间隔
                            interval: 5,
                            axisLabel: {
                                //y轴上带的单位
                                formatter: '{value}'
                            },
                            //轴线
                            axisLine: {
                                show: true
                            },
                            //分割线
                            splitLine: {
                                show: false
                            }
                        },
                        {
                            type: 'value',
                            name: 'RH%',
                            axisLabel: {
                                formatter: '{value}'
                            },
                            //轴线
                            axisLine: {
                                show: true
                            },
                            //分割线
                            splitLine: {
                                show: false
                            }
     
                        }
                    ],
        series: [
           {
                name: '温度',
                type: 'line',
                yAxisIndex: 0,
                data: [10,23,30,50,50],
            }, {
                name: '湿度',
                type: 'line',
                yAxisIndex: 1,
                data: [15,10,20,25,30],
            }
        ]
    };
    

    结果

    在这里插入图片描述

    展开全文
  • JS65 Echarts双Y轴刻度对齐

    千次阅读 2019-11-11 10:38:00
    实现Echarts双Y轴刻度对齐
  • 实现ECharts双Y轴左右刻度线一致

    千次阅读 2020-06-03 15:50:23
    实现ECharts双Y轴左右刻度线一致 原文链接:https://blog.csdn.net/qq_40845885/article/details/82108525 博主亲测可用哦,先上图: 这是未解决的,双Y轴左右刻度线不一致 这是已解决的,双Y轴左右刻度线一致 1、...
  • # Echarts双Y轴刻度分割线对不齐问题 > [已发布Echarts社区点击查看](https://www.makeapie.com/editor.html?c=xdDYQAJSZA) ## 一、问题如图所示 ![image.png]...
  • echarts 双y轴设置

    万次阅读 2018-08-24 10:25:23
    要设置双y轴可以参考,echart官方文档中Yaxis的设置 http://echarts.baidu.com/echarts2/doc/doc.html#Yaxis, 废话不多说,直接上代码 yAxis : [{ type: 'value', min: 0, max: 5, interval: 1, ...
  • yAxis : [ ...代码如上,按照官网说法,不设置max,min值即可自动设置刻度值,右y轴的刻度不能自动设置,求大神指教!图片如下[img=https://img-bbs.csdn.net/upload/201608/26/1472215120_362425.png][/img]
  • echarts双Y轴横向树状图实现(两个类目) 效果演示效果演示(一个大类有好几个小类,等于就是小类的类目都不同) 首先设置X为数值轴,Y轴为类目轴。 Y轴设置为数组,设置两个,其中小类的Y轴进行隐藏(注意隐藏...
  • 一、ECharts双y轴设置0刻度对齐,左右刻度根据数据变化? 双y轴因为左右的数值不同出现0刻度不在一条线上的情况。为解决这种情况思考后的代码如下: 代码如下: //求出数据中的最大值和最小值方法 function ...
  • echarts双y轴的设置

    2019-10-22 10:00:23
    柱状图与折线图同在一个图表内, 实现双y轴 – common/echarts.js文件里 import echarts from 'echarts' const chart = { myIncomeChart (xdata, incomedata, yoydata, yoyMin, yoyMax, incomeMax, incomeMin)...
  • echarts双Y轴刻度不对齐以及有负数时x轴线不太底部问题 1、遇到的问题 双Y轴刻度不对齐以及x轴不在底部问题 2、解决方法 1)解决x轴线不在底部问题 在axisLine里面设置onZero属性 2)解决对齐问题 问题描述: 1、...
  • echarts双Y轴等分

    2021-06-13 12:45:43
    npm i echarts -S 2.main.js配置 import Vue from 'vue' import App from './App' import router from './router' // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts Vue.config....
  • Echarts双Y轴问题+ X轴传入一个数据展示5个刻度传入一天的数据,默认展示了5天的数据双Y轴,左右2边被切成不同的份数,左边 5个刻度,右边4个刻度传入左边的做大值,最小值 然后 最大值最小值赋给 max min ...
  • ECharts 双Y轴柱形图

    2021-05-12 11:49:21
    <!... <... <head> ...meta charset="utf-8"&...ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </h.
  • 关于echarts双Y轴

    2019-08-19 10:42:50
    主要是Y轴要变成数组,里面写两个关于Y轴的数据即可 const POLAR_OPTIONS = { color: '#27c4a7', grid: { left: '20px', right: '20px', bottom: '26px', top: '10px', containLabel: true, }, tooltip...
  • 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: {...
  • Echarts双Y轴柱状图

    千次阅读 2019-04-22 13:53:51
    var option = { title: { text: '一周推送及完成率', x:'center', y:'top', align:'center', text...
  • 每个series 中添加属性 yAxisIndex:0 || 1 0 默认为左边 1 为右边

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 177
精华内容 70
关键字:

echarts双y轴