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. 第九周周五计划&&周四总结

    今天主要将提取地主题词入库以及重新对新闻分类. 测试了一下单纯使用主题词作为主题追踪依据不是很好,明天尝试使用特征值提取(主题词(名词实体))+摘要比对综合.但是目前还没想好是每篇新闻的都要追踪还是热 ...

  2. luoguP2824 [HEOI2016/TJOI2016]排序(二分答案做法)

    题意 这题的思路实在巧妙. 首先我们肯定无法对区间进行sort,那么考虑如何使得sort简化. 问:如果给的序列是一个0-1序列,让你区间排序,那么怎么做? 答:建一颗线段树维护sum,求出当前区间中 ...

  3. 在Azure DevOps Server中运行基于Spring Boot和Consul的微服务项目单元测试

    1 概述 谈到微服务架构体系,绕不开服务发现这个功能.服务发现机制是简化微服务配置.实现容灾.水平扩缩容.提高运维效率的重要方式.在服务发现工具中,Consul在部署和使用方面与容器结合的天衣无缝,成 ...

  4. 单个视频播放控制&默认横屏播放

    一.视频列表中控制只允许一个视频播放 // 获取DOM中所有的video标签 var videoTags = document.querySelectorAll('video'); // 控制播放的视 ...

  5. Springboot如何打包部署项目

    原文地址 目录 前言 1. 导入插件 2.idea中快速打包 3.java –jar运行项目 4.访问项目 5.发布到服务器 前言 用心写好每一篇文章,真心对待每一个读者 文章首发地址: www.ja ...

  6. SampleDateFormat 高并发下导致 线程 Blocked 从而导致 Tomcat 吞吐一直上不去

    SampleDateFormat 高并发下导致 线程 Blocked 从而导致 Tomcat 吞吐一直上不去

  7. LINQ 之 LookUp

    声明:本文为www.cnc6.cn原创,转载时请注明出处,谢谢! 本文作者文采欠佳,文字表达等方面不是很好,但实际的代码例子是非常实用的,请作参考. 一.先准备要使用的类: 1.Person类: cl ...

  8. 关于5G手机使用4G套餐扫盲

    有些人说换5G手机用4G套餐不用5G套餐可以享受最高 300 mbps 的签约速率.在此我来给你们科普下. 5G套餐分为 500 mbps 和 1000 mbps 两种.且都享受优先接入,顺序是 10 ...

  9. DevExpress的TreeList实现节点上添加自定义右键菜单并实现删除节点功能

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  10. C#关键字 const与readonly

    ====const==== const关键字来声明某个常量字段或常量局部变量.常量字段和常量局部变量不是变量而且不能修改.常量可以为数字.布尔值.字符串或null引用. 常数声明的类型指定声明引入的成 ...