echarts+vue 实现滚动条只可滚动不可缩放+柱状图tooltip背景宽度自定义

最新推荐文章于 2024-05-15 11:00:12 发布

elizebeth6

最新推荐文章于 2024-05-15 11:00:12 发布

阅读量665

点赞数 3

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/elizebeth6/article/details/130013230

版权

本文介绍了如何在Echarts图表中，特别是在使用Vue.js框架时，配置柱状图以实现滚动条只能滚动不能缩放的功能，并详细讲解了如何自定义Tooltip的背景宽度，提升图表的交互体验。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <div class="hige-main">
    <div class="hige-table" id="hige-table"> </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
   
  components: {
   },
  data() {
   
    return {
   
      myChart: null
    };
  },
  mounted() {
   
    this.drawBar();
    window.onresize = () => {
   
      return (() => {
   
        this.resize();
      })();
    };
  },
  methods: {
   
    drawBar() {
   
      var chartDom = document.getElementById('hige-table');
      this.myChart = echarts.init(chartDom);
      let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
      let data = [10, 52, 200, 334, 390, 330, 220];