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]
var 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: .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;