散点图-日期

最新推荐文章于 2023-01-01 10:00:00 发布

lvxinaidou

最新推荐文章于 2023-01-01 10:00:00 发布

阅读量694

点赞数

分类专栏： Echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/lvxinaidou/article/details/122699491

版权

Echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 <div class="test"></div>

 let mytestcharts = echarts.init(document.querySelector('.test') as any);
  let option = {
      tooltip: {
          trigger: 'axis',
          formatter: function (params:any) {
            params = params[0];
            console.log(params);
            return `日期:${params.value[0]}: 值:${params.value[1]}`;
          },
          axisPointer: {
              animation: false
          }
      },
      legend: {
        right: '10%',
        top: '3%',
        textStyle: {
          fontSize: 16
        },
        data: ['机台1', '机台2']
      },
      xAxis: {
        type: 'category',
        name: '日期',
        axisLine: {
          show: true,
          symbol: ['none', 'arrow']
        },
        data: ['2022-01-01', '2022-01-02', '2022-01-03', '2022-01-04', '2022-01-05']         
      },
      yAxis: {
        type: 'value',
        name: '值',
        show: true,
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        },
        axisLine: {
          show: true,
          symbol: ['none', 'arrow']
        }
      },
      series: [
        {
          name: '机台1',
          symbolSize: 20,
          data: [
            ["2022-01-01", 8.04],
            ["2022-01-01", 5.95],
            ["2022-01-02", 3.58],
            ["2022-01-03", 10.81],
            ["2022-01-04", 8.33],
            ["2022-01-05", 5.66],
            ["2022-01-02", 1.95],
          ],
          type: 'scatter'
        },
        {
          name: '机台2',
          symbolSize: 20,
          data: [
            ["2022-01-01", 11.04],
            ["2022-01-03", 7.95],
            ["2022-01-02", 5.58],
            ["2022-01-03", 3.81],
            ["2022-01-04", 9.33],
            ["2022-01-05", 7.66],
            ["2022-01-05", 4.95],
          ],
          type: 'scatter'
        }
      ]
    };
     mytestcharts.setOption(option);