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

import * as echarts from "echarts";

let options = {
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(17,95,182,0.5)',
    textStyle: {
      color: "#fff"
    },
    formatter: function (params) {
      return params[0].name + params[0].seriesName + ': ' + params[0].value
    }
  },
  grid: {
    left: '2%',
    right: '2%',
    top: '15%',
    bottom: '12%'
  },
  xAxis: {
    data: [],
    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: []
    },
    {
      name: '',
      type: 'bar',
      barWidth: 12,
      barGap: '-100%',
      z: 0,
      itemStyle: {
        color: '#0BA7DA',
        opacity: .1,
      },
      data: []
    }
  ]
}

// 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;