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. NOIP2018普及组复赛游记

    2018年11月10日,NOIP2018普及组复赛. 这是我初中阶段最后一次复赛了. 和往常一样,我们在预定的早上7点,没有出发. 10分钟之后,人终于到齐了,于是出发了,一路无话. 到了南航,合照三 ...

  2. multer 基础教程(英文版)

    Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploadi ...

  3. 自已开发IM有那么难吗？手把手教你自撸一个Andriod版简易IM (有源码)

    本文由作者FreddyChen原创分享,为了更好的体现文章价值,引用时有少许改动,感谢原作者. 1.写在前面 一直想写一篇关于im即时通讯分享的文章,无奈工作太忙,很难抽出时间.今天终于从公司离职了, ...

  4. 通过requirements.txt文件创建虚拟环境副本

    1.首先在原来的环境中生成一个需求文件requirements.txt,用于记录所有依赖包及其精确的版本号. (venv) $ pip freeze >requirements.txt 2.创建 ...

  5. consul实现kubernetes-1.15集群master的高可用访问实现

    1.准备consul环境,参考我之前的博客实现或参考consul的官网部署最新的consul. 2.本次测试使用的是kubernetes-1.15.0 3.初始化集群 1)准备初始化文件 contro ...

  6. kali渗透综合靶机(十三)--Dina 1.0靶机

    kali渗透综合靶机(十三)--Dina 1.0靶机 一.主机发现 1.netdiscover -i eth0 -r 192.168.10.0/24 二.端口扫描 1. masscan --rate= ...

  7. C# 处理接口返回的XML格式数据

    using System.Xml; //引入命名空间 //模拟接口返回的数据 string str=@"<JZD_Message xmlns:xsd=""http: ...

  8. 【微信原生支付】服务商模式-小微商户专属接口：小微商户新增对应APPID关联API

    文档地址:https://pay.weixin.qq.com/wiki/doc/api/xiaowei.php?chapter=20_3&index=3 这个接口比较特殊不需要nonce_st ...

  9. LinuxShell——内嵌命令

    LinuxShell——内嵌命令 摘要:本文主要学习了Shell的常用内嵌命令. alias命令 alias命令可以为指定命令定义一个别名. 基本语法 查看所有别名: alias 设置别名: alia ...

  10. java9模块不可见问题

    问题描述 jdk.internal.reflect包不可见 问题原因 java9模块化之后,java.base只把jdk.internal.reflect暴露给了少数几个内部包而没有向当前模块暴露. ...