学习记录 echarts tooltip超出限制 echarts显示滚动条

最新推荐文章于 2024-06-08 21:17:27 发布

流泪百香果

最新推荐文章于 2024-06-08 21:17:27 发布

阅读量913

点赞数

文章标签： echarts 学习 javascript

本文链接：https://blog.csdn.net/qq_45778558/article/details/130624634

版权

解决方案：将其做成悬浮层显示出来

<template>
  <div
    class="chart-warp"
  >
    <v-chart
      :options="options"
      class="echarts"
    ></v-chart>
  </div>
</template>
<script>
import * as ServiceApi from '../../../api/index'

import ChartResizeMixin from '@/share/mixins/ChartResizeMixin'
export default {
  mixins: [ChartResizeMixin],
  props: {
    list: {
      type: Object,
      default: null
    }

  },
  data () {
    return {
      echartsSingleList: {},
      XAxis: [],
      YAxis: [],
      min: 2,
      max: 4

    }
  },

  computed: {
    options () {
      return {
        title: {
          text: '单体电阻趋势图',
          textStyle: { // 标题字体属性
            fontWeight: 'normal',
            fontSize: '14px'
          },
          left: '80'
        },
        tooltip: {
          trigger: 'axis', // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
          axisPointer: {
            type: 'shadow'// 阴影指示器
          },
          formatter: function (params) {
            let str = ''
            for (let i = 0; i < params.length; i++) {
              str += '<p>' + params[i].marker + params[i].seriesName + ':' + params[i].value + '</p>'
            }
            const tooltipHtml =
          '<div  style="width:fit-content;padding-right:20px;max-height:200px;overflow-y:auto"> ' +

          params[0].axisValue +
          str +
          '</div>'
            return tooltipHtml
          },
          appendToBody: true,
          // 可以进入tooltip
          enterable: true
        },

        grid: { // 直角坐标系内绘图网格
          left: 80, // grid 组件离容器左侧的距离。
          right: 30, // grid 组件离容器右侧的距离。
          bottom: 15, // grid 组件离容器下侧的距离。
          top: 30, // grid 组件离容器上侧的距离。
          containLabel: true // grid 区域是否包含坐标轴的刻度标签。
        },
        xAxis: {
          type: 'category', // 坐标轴类型 类目轴，适用于离散的类目数据
          show: true, // 是否显示x轴
          axisLine: {
            show: true// 是否显示坐标轴轴线。
          },
          axisTick: {
            show: false // 是否显示坐标轴刻度。
          },
          data: this.XAxis // 横轴坐标值
        },
        dataZoom: [{
          type: 'slider', // 给x轴设置滚动条
          show: true, // flase直接隐藏图形
          xAxisIndex: [0],
          bottom: 10,
          height: 10,
          showDetail: false,
          startValue: 0, // 滚动条的起始位置
          endValue: 9 // 滚动条的截止位置（按比例分割你的柱状图x轴长度）
        },
        {
          type: 'inside', // 设置鼠标滚轮缩放
          show: true,
          xAxisIndex: [0],
          startValue: 0,
          endValue: 9
        }
        ],
        yAxis: {
          type: 'value', // 坐标轴类型 数值轴，适用于连续数据。
          axisLine: {
            show: true// 是否显示坐标轴轴线。
          },
          axisTick: {
            show: true// 是否显示坐标轴刻度。
          },
          boundaryGap: ['0', '0.2'],
          min: this.min,
          max: this.max
        },
        series:
          Object.keys(this.YAxis).map((item, index) => {
            return {
              name: item,
              type: 'line',
              smooth: true,
              symbolSize: 3,
              symbol: 'circle',
              data: this.YAxis[index]
            }
          })

      }
    }

  },
  methods: {
    // 请求趋势图数据
    async getCellTrendListData () {
      const { data } = await ServiceApi.getCellTrendList(this.list)
      this.echartsSingleList = data
      const time = []
      const minMax = []
      // 拿到x轴坐标
      // 遍历每一个下面的数据 拿到时间
      Object.keys(data).map((item, index) => {
        // 拿到所有时间  去重
        data[item].map(o => {
          if (!time.includes(o.kpiTime)) {
            time.push(o.kpiTime)
          }
          if (!minMax.includes(o.resistance)) {
            minMax.push(o.resistance)
          }
        })
      })
      // 设置最大值最小值
      this.min = Math.floor(Math.min(...minMax))
      this.max = Math.ceil(Math.max(...minMax))
      // 坐标轴排序
      this.XAxis = time.sort((a, b) => a.kpiTime > b.kpiTime ? -1 : 1)
      // 拿到y轴

      Object.keys(data).map((key, item) => {
        this.YAxis[key] = []

        data[key].map(o => {
          // if (!this.YAxis[key].includes(o.resistance)) {
          this.YAxis[key].push(o.resistance)
          // }
        })
      })
    }

  },
  created () {

    // console.log(this.list)
  },
  mounted () {
    this.getCellTrendListData()
  },
  // 卸载时候
  destroyed () {
    /*    debugger
    this.refs.echartsSingle.style.diaplay = 'none' */
  },
  watch: {

  }
}
</script>
<style lang="scss" scoped>
.chart-warp {
  position: relative;
}
.echarts {
  width: 550px;
  height: 500px!important;
}
:deep(.canvas) {
  width: 550px;
  height: 500px!important;
}
</style>

2. echarts显示滚动条配置datazoom

<template>
  <div class="chart-warp">
    <v-chart
      :options="options"
      class="echarts"
    ></v-chart>
  </div>
</template>
<script>
import * as ServiceApi from '../../../api/index'

import ChartResizeMixin from '@/share/mixins/ChartResizeMixin'

export default {
  mixins: [ChartResizeMixin],
  props: {
    list: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      echartsData: [],
      XAxis: [],
      min: 0,
      max: 1

    }
  },
  computed: {
    options () {
      return {
        title: {
          text: '蓄电池组电容量趋势图',
          left: 'center',
          textStyle: { // 标题字体属性
            fontWeight: 'normal',
            fontSize: '14px'
          }
        },
        tooltip: {
          trigger: 'axis', // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
          axisPointer: {
            type: 'shadow'// 阴影指示器
          }
        },
        legend: {

          show: true, // echarts上面 线条（图例）名称提示
          right: 10 // 图例组件离容器右侧的距离。
        },
        grid: { // 直角坐标系内绘图网格
          left: '3%', // grid 组件离容器左侧的距离。
          right: 30, // grid 组件离容器右侧的距离。
          bottom: 15, // grid 组件离容器下侧的距离。
          top: 30, // grid 组件离容器上侧的距离。
          containLabel: true // grid 区域是否包含坐标轴的刻度标签。
        },
        xAxis: {
          type: 'category', // 坐标轴类型 类目轴，适用于离散的类目数据
          show: true, // 是否显示x轴
          axisLine: {
            show: true// 是否显示坐标轴轴线。
          },
          axisTick: {
            show: false // 是否显示坐标轴刻度。
          },
          data: this.XAxis // 横轴坐标值
        },
        yAxis:
          {
            type: 'value',
            name: '电容量',
            min: this.min,
            max: this.max

          },

        series: [
          {
            name: '电容量',
            type: 'line',
            smooth: true,
            symbolSize: 3,
            symbol: 'circle',
            data: this.echartsData.map(item => item.capacity)
          }

        ],
        dataZoom: [{
          type: 'slider', // 给x轴设置滚动条
          show: true, // flase直接隐藏图形
          xAxisIndex: [0],
          bottom: 10, //距离下方高度
          height: 10, //滚动条高度
          showDetail: false,
          startValue: 0, // 滚动条的起始位置
          endValue: 9 // 滚动条的截止位置（按比例分割你的柱状图x轴长度）
        },
        {
          type: 'inside', // 设置鼠标滚轮缩放
          show: true,
          xAxisIndex: [0],
          startValue: 0,
          endValue: 9
        }
        ]
      }
    }

  },
  created () {
    this.getBatteryTrialListData()
    // console.log(this.list)
  },
  mounted () {
  },
  methods: {
    // echarts  电池组数据
    async getBatteryTrialListData () {
      const { data } = await ServiceApi.getBatteryTrialList(this.list)

      this.echartsData = data.sort((a, b) => a.kpiTime > b.kpiTime ? 1 : -1)
      //  获取x轴数据
      this.echartsData.map(item => this.XAxis.push(item.kpiTime))
      const minMax = []
      this.echartsData.map(item => minMax.push(item.capacity))
      // 设置最大值最小值
      this.min = Math.floor(Math.min(...minMax))
      this.max = Math.ceil(Math.max(...minMax))
    }

  },
  watch: {
    list: {
      deep: true,
      immediate: true,
      handler (val) {
        // console.log(val)
      }
    },
    XAXis: {
      deep: true,
      immediate: true,
      handler (val) {
        // console.log(val)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-warp {
  position: relative;
}
.echarts {
  width: 500px;
  height: 550px;
}
:deep(.canvas) {
  width: 500px;
  height: 550px;
}
</style>