zoukankan      html  css  js  c++  java
  • echars 实现多曲线,多Y轴,曲线单选切换,并且跟随切换指定Y轴

    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=" 600px;height:300px;background:#eee"></div>
      <script>
        var option = {
          grid:{
            left:20,
            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: 0,
              // data: [12000, 1302, 1001, 1340, 9000, 2300, 2100]
              data: [0.11, 0.11, 0.11, 0.11, 0, 0, 0]
            },
            {
              name: '联盟广告',
              type: 'line',
              yAxisIndex: 1,
              data: [22.23, 182.43, 191.12, 234.43, 290, 330, 310]
            },
            {
              name: '视频广告',
              type: 'line',
              yAxisIndex: 2,
              data: [150, 232, 201, 154, 190, 330, 410]
            }
          ]
        };
    
        var myChart = echarts.init(document.getElementById('demo'))
        myChart.setOption(option)
    
      </script>
    </body>
    
    </html>

      

  • 相关阅读:
    JS数组定义及详解
    JS中script词法分析
    JS函数 -- 功能,语法,返回值,匿名函数,自调用匿名函数,全局变量与局部变量,arguments的使用
    Java面试(1)-- Java逻辑运算符
    Java面试(3)-- Java关系运算符
    让 history 命令显示日期和时间
    mysql 权限管理
    docker基础
    docker 后台运行和进入后台运行的容器
    expect 自动输入密码
  • 原文地址:https://www.cnblogs.com/liujinyu/p/11435069.html
Copyright © 2011-2022 走看看