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. Python网络编程基础 ❶ 计算机网络基础 初用socket模块

    1.计算机网络基础 C/S  客户端/服务器端 B/S  浏览器端/服务器端 mac地址,ip地址,子网掩码,与计算得到网段,端口号每台计算机的网卡都有全球唯一的地址,在生产时已经写进去了. ip地址 ...

  2. Fink| CEP

    什么是复杂事件CEP? 一个或多个由简单事件构成的事件流通过一定的规则匹配,然后输出用户想得到的数据,满足规则的复杂事件. 特征: 目标:从有序的简单事件流中发现一些高阶特征 输入:一个或多个由简单事 ...

  3. hibernate中flush()、refresh()、clear()缓存操作

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ flush():使数据库中的对象和session缓存中的对象的状态 ...

  4. 三大相关系数: pearson, spearman, kendall（python示例实现）

    三大相关系数:pearson, spearman, kendall 统计学中的三大相关性系数:pearson, spearman, kendall,他们反应的都是两个变量之间变化趋势的方向以及程度,其 ...

  5. Xshell删除键不好使：删除显示退格^H

    Xshell删除键不好使:删除显示退格^H 1.问题: Xshell不能删除,删除时出现 退格^H 2.解决方案: 点击上方:文件→属性→终端→键盘,把 delete 和 backspace 序列改为 ...

  6. angular修改端口号port

    报错:Port 4200 is already in use. Use '--port' to specify a different port. 因为4200端口已被使用,请使用“--port”修改 ...

  7. Entity Framework 6 中如何获取 EntityTypeConfiguration 的 Edm 信息？（一）

    1. 案例1 - 类型和表之间的EF代码优先映射 从EF6.1开始,有一种更简单的方法可以做到这一点.有关 详细信息,请参阅我的新EF6.1类型和表格之间的映射. 直接贴代码了 从EF6.1开始,有一 ...

  8. Budgie Desktop in Linux 无法使用触摸板右键功能

    问题描述 Budgie桌面在Linux环境下很好用,不过最近发现触摸板的右键功能是不可用的 解决方法 经查阅Gnome官方文档(Budgie有很多功能基于Gnome)发现是Gnome官方把这个功能去掉 ...

  9. Redis学习记录及Jedis代码示例

    文章目录 二.Redis简介 三.Redis安装 1. 下载并解压安装 2. 安装C语言编译环境 3. 修改安装位置 4. 编译安装 5.启动Redis服务器 ①默认启动 ②定制配置项启动 [1]准备 ...

  10. NLP第一课（我也是才开始学）

    闲着无聊的时候,我就会问问自己,编程也有了五年经验了,除了增删改查,我还会什么,有一天我跳槽,去面试的时候,我能比那些年轻而且期望薪资待遇低的年轻毕业生,我有什么优势,而且我只是一个专科的机电系学生, ...