jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js

import * as echarts from "echarts";

var data1 = [
  50, 32, 41, 61, 70, 39, 40, 55, 63, 55, 36, 45, 62, 74, 46, 73, 92, 60, 45,
  33, 45, 66, 55, 32, 46, 36, 67, 49, 60, 55, 33, 35, 66,
];
var data2 = [
  5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 5,
  12, 4, 6, 7, 9, 10, 15, 3, 5, 6,
];
let options = {
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(17,95,182,0.5)",
    textStyle: {
      color: "#fff",
    },
    formatter: function (params) {
      return (
        params[1].marker +
        "" +
        params[1].name +
        "\n" +
        "<div>" +
        "<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#007AFF;option:0.5'></span>" +
        "<span style=''> " +
        params[1].seriesName +
        ": " +
        params[1].value +
        "\n" +
        " </span>" +
        "</div>" +
        "<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#FF9B61;'></span>" +
        "" +
        "<span style=''> " +
        params[3].seriesName +
        ": " +
        params[3].value
      );
    },
  },
  grid: {
    left: "2%",
    right: "2%",
    top: "15%",
    bottom: "12%",
  },
  xAxis: {
    data: [
      "1日",
      "2日",
      "3日",
      "4日",
      "5日",
      "6日",
      "7日",
      "8日",
      "9日",
      "10日",
      "11日",
      "12日",
      "13日",
      "14日",
      "15日",
      "16日",
      "17日",
      "18日",
      "19日",
      "20日",
      "21日",
      "22日",
      "23日",
      "24日",
      "25日",
      "26日",
      "27日",
      "28日",
      "29日",
      "30日",
    ],
    show: true,
    axisTick: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        type: "solid",
        color: "#2D4377",
        opacity: 1,
      },
    },
    // lineStyle: {
    //     show: true,
    //     type: 'solid'
    // },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: "rgba(255,255,255,0.8)",
        fontSize: 14,
      },
      margin: 12, // 刻度标签与轴线之间的距离。
    },
  },
  yAxis: [
    {
      min: 0,
      max: 100,
      type: "value",
      minInterval: 20,
      maxInterval: 20,
      name: "(单位：万)",
      nameTextStyle: {
        align: "left",
        color: "rgba(255,255,255,0.8)",
        padding: [0, 0, 0, -20],
        fontSize: 14,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#2D4377",
          opacity: 0.5,
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#2D4377",
        },
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,0.8)",
          fontSize: 14,
        },
      },
      data: ["0", "3", "6", "9", "12", "15", "18"],
    },
  ],
  legend: {
    top: "5%",
    right: "5%",
    icon: "rect",
    itemWidth: 25,
    itemHeight: 10,
    textStyle: {
      color: "#fff",
      fontSize: 14,
    },
    lineStyle: {
      show: false,
      color: "#00E4BB",
    },
    data: [
      {
        name: "高清网络球型摄像机",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#00E4BB", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#003B4E", // 100% 处的颜色
              },
            ],
            false
          ),
        },
      },
      {
        name: "增涨率",
        itemStyle: {
          color: "#755400",
        },
      },
    ],
    itemGap: 12, // 设置间距
  },
  series: [
    // 下半截柱状图
    {
      name: "增收金额",
      type: "bar",
      barWidth: 12,
      barGap: "-100%",
      itemStyle: {
        // lenged文本
        opacity: 1,
        barBorderRadius: [13, 13, 13, 13],
        color: function (params) {
          var a = params.name.slice(0, 2);
          return new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#00E4BB", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#003B4E", // 100% 处的颜色
              },
            ],
            false
          );
        },
      },

      data: data1,
    },

    {
      name: "",
      type: "bar",
      barWidth: 12,
      barGap: "-100%",
      z: 0,
      itemStyle: {
        color: "#0BA7DA",
        opacity: 0.1,
      },
      data: [
        100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
        100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
        100, 100,
      ],
    },
  ],
};

// option && myChart3.setOption(option);
// if (option && typeof option === "object") {
//     myChart3.setOption(option, true);
//     refreshChart(myChart3,option);
//     var index3 = 0; //播放所在下标
//     var mTime = setInterval(function () {
//             myChart3.dispatchAction({
//                 type: 'showTip',
//                 seriesIndex: 0,
//                 dataIndex: index3
//             });
//             index3++;
//             if (index3 >= 6) {
//                 //console.log('data4', fxdata.length)
//                 index3 = 0;
//                 //console.log(fxdata)
//             }
//     }, 2600);
// }

export default options;