html代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Echars|多曲线|多Y轴|Y坐标可切换</title>

</head>

<body>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  <script src="https://echarts.baidu.com/examples/vendors/echarts/echarts.min.js"></script>

  <div id="demo" style="width: 600px;height:300px;background:#eee"></div>

  <script>

    var option = {

      grid:{

        left:,

        containLabel: true

      },

      tooltip: {

        trigger: 'axis'

      },

      legend: {

        selectedMode: 'single',

        data: ['邮件营销', '联盟广告', '视频广告']

      },

      xAxis: {

        type: 'category',

        boundaryGap: false,

        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

      },

      yAxis: [{

        type: 'value',

        position: 'left',

        axisLabel: {

          formatter: '{value}万'

        },

        axisTick: {

          show: false

        }

      }, {

        type: 'value',

        position: 'left',

        axisLabel: {

          formatter: '{value}'

        },

      }, {

        type: 'value',

        position: 'left',

        axisLabel: {

          formatter: '{value}%'

        },

      }],

      series: [

        {

          name: '邮件营销',

          type: 'line',

          yAxisIndex: ,

          // data: [12000, 1302, 1001, 1340, 9000, 2300, 2100]

          data: [0.11, 0.11, 0.11, 0.11, , , ]

        },

        {

          name: '联盟广告',

          type: 'line',

          yAxisIndex: ,

          data: [22.23, 182.43, 191.12, 234.43, , , ]

        },

        {

          name: '视频广告',

          type: 'line',

          yAxisIndex: ,

          data: [, , , , , , ]

        }

      ]

    };

    var myChart = echarts.init(document.getElementById('demo'))

    myChart.setOption(option)

  </script>

</body>

</html>

　　

echars 实现多曲线，多Y轴，曲线单选切换，并且跟随切换指定Y轴的更多相关文章

  1. P-R曲线及与ROC曲线区别

    一.P-R曲线 P-R曲线刻画查准率和查全率之间的关系,查准率指的是在所有预测为正例的数据中,真正例所占的比例,查全率是指预测为真正例的数据占所有正例数据的比例. 即:查准率P=TP/(TP + FP ...

  2. 【ROC曲线】关于ROC曲线、PR曲线对于不平衡样本的不敏感性分析说引发的思考

    ROC曲线 在网上有很多地方都有说ROC曲线对于正负样本比例不敏感,即正负样本比例的变化不会改变ROC曲线.但是对于PR曲线就不一样了.PR曲线会随着正负样本比例的变化而变化.但是没有一个有十分具体和 ...

  3. 18年春招某编程题：有三个整数X,Y,Z,要求进行若干次操作使得X,Y,Z相等

    题目描述: 给定三个整数X,Y,Z,要求进行若干次操作使得X,Y,Z相等,操作有两种: 1.从X,Y,Z中选择两个数都加1. 2.从X,Y,Z中选择一个数加2. 求最少需要多少次操作. 题目思路: 1 ...

  4. 函数的光滑化或正则化 卷积 应用 两个统计独立变量X与Y的和的概率密度函数是X与Y的概率密度函数的卷积

    http://graphics.stanford.edu/courses/cs178/applets/convolution.html Convolution is an operation on t ...

  5. C# 历史曲线控件 基于时间的曲线控件 可交互的高级曲线控件 HslControls曲线控件使用教程

    本篇博客主要对 HslControls 中的曲线控件做一个详细的教程说明,大家可以根据下面的教程开发出高质量的曲线控件 Prepare 先从nuget下载到组件,然后就可以使用组件里的各种组件信息了. ...

  6. [osg][原]osg的坐标系：使用右手法则Y轴向前、X向、右Z向上。camare的默认姿态：向下看（Z轴负向），头向前（Y轴正向）

    参考:http://blog.csdn.net/tmljs1988/article/details/7561887 图中上半边为opengl坐标系,下半边的osg坐标系: osg::Camare的默认 ...

  7. 如果int x=20, y=5，则语句System.out.println(x+y +""+(x+y)+y); 的输出结果是（）

    答案是25255 小括号优先级高,所以先算小括号内的x+y=25 然后再算前面的x+y=25 但是中间有个空的字符串,java会把这个空字符串后面的都当成字符串看待,所以结果是25255

  8. 怎样理解在函数中声明var x = y = 1后调用函数时, x是局部变量, y是全局变量

    下面这段代码在执行的时候, 打印的结果是1, Error: undefined; function fn() { var x = y = 1; } fn(); console.log(y); // 1 ...

  9. 线段树 区间更新（更新区间[x,y]的值，再求任意区间[x,y]的和）

    #1078 : 线段树的区间修改 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 对于小Ho表现出的对线段树的理解,小Hi表示挺满意的,但是满意就够了么?于是小Hi将问题 ...

随机推荐

  1. luoguP4069 [SDOI2016]游戏

    题意 显然书剖套李超树. 考虑怎么算函数值: 设\((x,y)\)的\(lca\)为\(z\),我们插一条斜率为\(k\),截距为\(b\)的线段. \((x,z)\)上的点\(u\): \(f(u) ...

  2. 消息队列的使用<二>：ActiveMQ的基本使用（Java）

    目录 ActiveMQ 介绍 下载.安装和初次运行 Java上初次使用activeMQ 设置请求属性: 可靠性机制 事务 消息消费方式 receive 监听器: 消息类型 发布/订阅模式 非持久订阅 ...

  3. LeetCode 394：字符串解码 Decode String

    题目: 给定一个经过编码的字符串,返回它解码后的字符串. Given an encoded string, return its decoded string. 编码规则为: k[encoded_st ...

  4. Unity Shader 屏幕后效果——全局雾

    Unity内置的雾效需要在每个shader中分别编写,造成了极大的不便.这里利用屏幕后处理产生可单独控制且自由度更高的雾效. 屏幕后雾效的本质在于,通过深度纹理重构出每个像素在世界空间中的位置,根据得 ...

  5. 行为驱动：Cucumber + Java - 实现数据的参数化

    1.什么是参数化 实际设计测试用例过程中,我们经常会用等价类.边界值这样的方法,针对一个功能进行测试数据上的测试,比如一个输入框,正向数据.逆向数据,非法输入等等 2.Cucumber的数据驱动 同上 ...

  6. Python中的passed by assignment与.NET中的passing by reference、passing by value

    Python文档中有一段话: Remember that arguments are passed by assignment in Python. Since assignment just cre ...

  7. QT+OpenGL（01）--实现三角形渲染

    1.openglwidget.ui <ui version="4.0"> <author/> <comment/> <exportmacr ...

  8. IIS错误：在唯一密钥属性“fileExtension”设置为“.json”时，无法添加类型为“mimeMap”的重复集合项

    在用visual studio 打开一个asp.net mvc 项目时,ctrl+f5运行,发现页面无法加载图片.js.json文件. 按F12查看错误,发现500错误.打开报错的js文件,提示: I ...

  9. putty连接centos慢

    用的vmware下的centos minimal镜像,开发时,用putty连接很慢,一分多钟, 解决方案: 禁用GSSAPI认证有两个方式:客户端和服务端 直接配置你ssh客户端的文件/etc/ssh ...

  10. 切换tab栏echarts错位的问题

    在使用echarts的时候页面中有tab栏的时候经常遇到echarts错位的情况 解决方法一.在点击tab栏的时候进行页面中的echarts初始化 在多层tab栏存在的时候eachrts的容器布局是百 ...