jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/charts.js

import * as echarts from "echarts";
var options = {
  tooltip: {
    show: true,
    trigger: "axis",
    position: function (point, params, dom, rect, size) {
      // 提示框位置
      var x = 0; // x坐标位置
      var y = 0; // y坐标位置
      // 当前鼠标位置
      var pointX = point[0];
      var pointY = point[1];
      // 提示框大小
      var boxWidth = size.contentSize[0];
      var boxHeight = size.contentSize[1];
      // boxWidth > pointX 说明鼠标左边放不下提示框
      if (boxWidth > pointX) {
        x = 5;
      } else {
        // 左边放的下
        x = pointX - boxWidth;
      }
      // boxHeight > pointY 说明鼠标上边放不下提示框
      if (boxHeight > pointY) {
        y = 5;
      } else {
        // 上边放得下
        y = pointY - boxHeight;
      }
      return [point[0] + 10, y];
    },
    formatter: (params) => {

      let name = params[0].name.replace(/-/g, "")
      let name1 = '济南-' + name
      let name2 = '菏泽-' + name
      if(params[0].axisIndex === 1){
        name1 = '菏泽-' + name
        name2 = '济南-' + name
      }
      let tip = `${name1}<br/>`;
      params.forEach((item,index) =>{
        if (item.axisIndex === 0){
          tip = tip + `${params[index].marker}${params[index].seriesName}: <span style="font-weight:bold;"> ${params[index].value}  辆</span><br/>`
        }
      })
      tip = tip + `<br/>${name2}<br/>`
      params.forEach((item,index) =>{
        if (item.axisIndex === 1){
          tip = tip + `${params[index].marker}${params[index].seriesName}: <span style="font-weight:bold;"> ${params[index].value}  辆</span><br/>`
        }
      })
      return tip;
    },
  },
  axisPointer: {
    link: [
      {
        xAxisIndex: "all",
      },
    ],
  },
  legend: {
    top: 0,
    right: 0,
    icon:'rect',
    textStyle: {
      color: "#fff",
    },
    itemHeight: 5,
    itemWidth: 10,
    data: [
      {
        name: "本期车流量",
        itemStyle: {
          color: '#6DBBFB'
        }

      },{
        name: "去年同期",
        itemStyle: {
          color: '#5FA52B'
        }

      },
    ],
  },
  grid: [
    {
      left: 60,
      top: '25%',
      right: 10,
      height: "35%",
    },
    {
      left: 60,
      right: 10,
      top: "60%",
      height: "35%",
    },
  ],
  xAxis: [
    {
      type: "category",
      data: [],
      axisLabel: {
        show:false
      },
      z: 10,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    {
      onZero: true,
      axisLine: { show: false },
      gridIndex: 1,
      type: "category",
      z: 10,
      data: [],
      position: "top",
      axisLabel: {
        color: "#fff",
        margin: -7,
        // formatter: function (params) {
        //   return `${params.substr(0,params.length-2)}\n\n${params.substr(params.length-2)}`;
        // },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  yAxis: [
    {
      name: "车流量          ",
      type: "value",
      axisLabel: {
        color: "#FFF",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#00D1FF",
        },
      },
      splitLine: {
        show: false,
      },
    },
    {
      gridIndex: 1,
      name: "",
      type: "value",
      inverse: true,
      axisLabel: {
        color: "#FFF",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#06AED3",
        },
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "本期车流量",
      type: "line",
      symbolSize: 0,
      lineStyle: {
        color: "#06AED3",
      },
      smooth: true,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 1,
                color: "#06AED300",
              },
              {
                offset: 0,
                color: "#06AED3",
              },
            ],
            false
          ),
        },
      },
      data: [
        57, 36, 56, 95, 125, 194, 94, 94, 74, 34, 125, 194, 94, 94, 74, 34,
      ],
    },
    {
      name: "去年同期",
      type: "line",
      symbol: 'none',
      smooth: true,
      lineStyle: {
        type:'dashed',
        width: 1
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 1,
                color: "#5FA52B00",
              },
              {
                offset: 0,
                color: "#5FA52B55",
              },
            ],
            false
          ),
        },
      },
      data: [
        94, 74, 34, 125, 194, 94, 94, 74, 34,57, 36, 56, 95, 125, 194, 94,
      ],
    },
    {
      name: "本期车流量",
      type: "line",
      symbol: "circle",
      symbolSize: 0,
      xAxisIndex: 1,
      yAxisIndex: 1,
      smooth: true,
      lineStyle: {
        color: "#06AED3",
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#06AED300",
              },
              {
                offset: 1,
                color: "#06AED3",
              },
            ],
            false
          ),
        },
      },
      data: [
        67, 36, 56, 195, 25, 194, 94, 94, 74, 21, 195, 25, 194, 94, 94, 74, 21,
      ],
    },
    {
      name: "去年同期",
      type: "line",
      symbol: 'none',
      smooth: true,
      xAxisIndex: 1,
      yAxisIndex: 1,
      lineStyle: {
        type:'dashed',
        width: 1
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 1,
                color: "#5FA52B00",
              },
              {
                offset: 0,
                color: "#5FA52B55",
              },
            ],
            false
          ),
        },
      },
      data: [
        195,25, 194, 94, 94, 7, 25, 194, 94, 94, 74, 21, 67, 36, 56, 195, 4, 21,
      ],
    },
  ],
};

export default options;