首页 > 其他分享 >echarts双x轴图区分区间

echarts双x轴图区分区间

时间:2023-08-22 15:11:13浏览次数:33  
标签:轴图 39 false show 区分 value 41 true echarts

option = {
  title: {
    text: '行情走势图',
    x: 'center',
    align: 'right'
  },
  grid: {
    bottom: 160
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  dataZoom: [
    {
      show: false,
      realtime: false
    }
  ],

  xAxis: [
    {
      type: 'category',
      position: 'bottom',
      axisLine: {
        show: true
      },
      data: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '11',
        '9'
      ]
    },
    {
      type: 'category',
      position: 'bottom',
      data: [
        '38',
        '39',
        '39',
        '39',
        '39',
        '39',
        '39',
        '39',
        '40',
        '40',
        '40',
        '40',
        '40',
        '40',
        '40',
        '41',
        '41',
        '41',
        '41',
        '41',
        '41',
        '41',
        '41',
        '42'
      ],
      axisLabel: {
        margin: 70,
        align: 'center',
        show: true,
        interval: function (index, value) {
          let indexData2 = [
            true,
            false,
            false,
            false,
            true,
            false,
            false,
            false,
            false,
            false,
            false,
            true,
            false,
            false,
            false,
            false,
            false,
            false,
            true,
            false,
            false,
            false,
            false,
            true
          ];
          if (indexData2[index]) {
            return value;
          }
        }
      },
      axisLine: {
        lineStyle: {
          width: 1
        }
      },
      axisTick: {
        interval: function (index, value) {
          let indexData = [
            true,
            true,
            false,
            false,
            false,
            false,
            false,
            false,
            true,
            false,
            false,
            false,
            false,
            false,
            false,
            true,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            true
          ];
          if (indexData[index]) {
            return value;
          }
        },
        length: 60
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: function (value, index) {
          return value > 1000 ? value / 1000 + 'k' : value;
        }
      },
      splitLine: {
        show: true
      }
    }
  ],
  series: [
    {
      name: '模拟数据',
      type: 'bar',
      smooth: true,
      symbol: 'none',
      sampling: 'average',
      itemStyle: {
        normal: {
          color: 'green'
        }
      },
      markLine: {
        silent: true,
        animation: false,
        symbol: '',
        label: {
          normal: {
            show: false
          }
        },
        lineStyle: {
          normal: {
            color: '#666',
            type: 'dotted'
          }
        },
        data: [
          {
            yAxis: 920
          }
        ]
      },
      data: [
        600, 870, 1120, 700, 345, 666, 777, 888, 870, 1120, 700, 345, 666, 777,
        888, 870, 1120, 700, 345, 666, 777, 888, 222
      ]
    }
  ]
};

标签:轴图,39,false,show,区分,value,41,true,echarts
From: https://www.cnblogs.com/ZerlinM/p/17648577.html

相关文章

  • 大屏项目Echarts不同屏幕之间适配
    1.解决方案:使用缩放,前提:需要严格按照设计图提供的像素大小,尽可能少使用百分比以及尽可能少使用rem插件(会导致rem和缩放同时生效反而比例不对),如发现细节不对,需对该处细节精确去按照比例去调整大小,并配合echarts方法解决2.解决方法:2.1给最外层盒子设置缩放样式:.large-scre......
  • echarts 气泡图配置
    //prettier-ignoreconsthours=['','2022-09','2022-10','2022-11','2022-12','2023-01','2023-02','2023-03','2023-04','2023-05','202......
  • Echarts常用参数
    一些以后应该能用到的参数option={title:{//图表的标题配置text:'主标题文本',subtext:'副标题文本',show:true//是否展示标题},tooltip:{//提示框配置trigger:'item',//触发类型,可选值:'item'(数据项触发),'axis'(坐标轴触发),'none'(不触发)axisP......
  • vue+echarts
    <template><div><divref="chart"style="width:50%;height:376px"></div><divref="chart1"style="width:50%;height:376px"></div></div></template><sc......
  • echarts简单使用
    <template><div><divclass="container"><divid="echart"></div></div></div></template><script>exportdefault{data(){return{};},//页面初始化挂载d......
  • vue使用echarts画图
    <template><div><divclass="container"><divid="echart"></div></div></div></template><script>exportdefault{data(){return{};},//页面初始化挂载d......
  • Asp.net区分请求来自PC端还是APP端
    区别请求来自于APP还是PC端,主要是通过客户端传递的User-Agent来做判断的。User-Agent来自于请求头Header,如下图两种方式:来自于PC请求来自于APP请求代码获取User-Agent的值......
  • vue中引入echarts
    1、先下载依赖包npminstallecharts-s//安装在目标项目中,如果想要全局安装就用-g2、引入2.1、全局引入main.js中importechartsfrom'echarts'Vue.prototype.$echarts=echarts//也可以用:import*asechartsfrom'echarts'2.2、局部引入component.vueimportechar......
  • 入门级echarts地图高亮
    入门级echarts地图高亮♥需求我们需要在各个省的地图中对指定城市进行高亮,直辖市在中国地图中高亮。实现1.首先导入echartsnpminstallechartsECharts(EnterpriseCharts)是一个由百度开发的开源图表库,它提供了丰富的交互性、可定制性和扩展性,用于创建各种类型的数据可视化......
  • Echarts图表的使用以及相关配置
    前言1、Echarts简介Echarts,全称EnterpriseCharts,商业级数据图表,一个纯Javascript的图表库,能够流畅的运行在PC以及移动设备上,兼容当前绝大部分浏览器。为我们许多提供直观,生动,可交互,可高度个性化定制的数据可视化图表。能够支持折线图、柱状图、散点图、K线图、饼图、雷达图、和......