vue 使用 echarts实现图表数据

疯狂的小老鼠

已于 2023-12-07 15:59:16 修改

阅读量93

点赞数

分类专栏： vue模块文章标签： vue.js echarts 前端

于 2023-12-05 19:49:48 首次发布

本文链接：https://blog.csdn.net/weixin_42040328/article/details/134530428

版权

vue模块专栏收录该内容

10 篇文章 0 订阅

订阅专栏

echarts 安装与使用

exharts 文档：https://echarts.apache.org/zh/option.html

在vue项目中安装 echarts

npm install echarts --save

在项目中引用

在main.js 文件中引用然后挂载在vue原型对象上

    import echarts from 'echarts' //引入echarts
    Vue.prototype.$echarts = echarts //引入组件
    //组件内使用
    <div id="container"></div>
    
    let echartsDom = document.getElementById('container')
    let myChart = this.$echarts.init(echartsDom);

在组件中引用

    <div id="container"></div>

    import echarts from 'echarts' //引入echarts
    //使用
    let echartsDom = document.getElementById('container')
    let myChart = echarts.init(echartsDom);

柱状图

基础柱状图

实现效果

以下是实现代码

<template>
  <div id="container"></div>
</template>

<script>
import * as echarts from 'echarts'; //引入echarts
export default {
  components: {},
  name: "",
  data() {
    return {
      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      yData: [120, 200, 150, 80, 70, 110, 130]
    };
  },
  created() { },
  mounted() {
    this.drawChart()
  },
  computed: {},
  watch: {},
  methods: {
    drawChart() {
      // 获取渲染点dom元素
      let echartsDom = document.getElementById('container')
      var myChart = echarts.init(echartsDom);
      let option = this.getEchartOption(this.xData, this.yData)
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
      window.addEventListener('resize', myChart.resize);
    },
    getEchartOption(xData, yData) {
      return {
        xAxis: [
          {
            type: 'category',
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            data: yData,
          }
        ]
      };
    },
  },
};
</script>
<style lang="less" scoped>
#container {
  width: 100%;
  height: 600px;
  transform: scale(1.1);
}
</style>

添加提示框 tooltip

在这里插入图片描述

trigger ：触发类型
- item: （只显示单个柱状图）数据项图像触发，主要是散点图，饼状图等无类目轴的图表使用
- axis: (多个柱状图全部显示) 坐标轴触发，主要应用在柱状图，折线图等会使用类目轴的图表中使用
axisPointer：坐标轴指示器配置项
- type：指示器类型, line: 直线指示器 , shadow：阴影指示器, none：无指示器, cross：十字准星指示器，其实是种简写，表示启用两个正交的轴的 axisPointer

    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    }

color：调色盘列表。控制全局图表样式,

  color: ['#fff']

legend：显示图例，是个对象设置图例相关属性
- left: 图表离左侧的距离
- top: 图表离上侧的距离
- right: 图表右侧的距离
- bottom: 图表离下侧的距离
- width/height：图例的宽/高
- itemGap: 图例单个之间的距离
grid：直角坐标系内绘网格，配置图表的位置信息
- left: 图表离左侧的距离
- top: 图表离上侧的距离
- right: 图表右侧的距离
- bottom: 图表离下侧的距离
- width/height：图例的宽/高
- 可以通过以下配置信息的位置和信息
axisTick: 坐标轴刻度相关配置
- show：坐标轴刻度是否显示
- alignWithLabel：坐标轴刻度是否居中
emphasis: 高亮图形样式和标签样式
- focus：series 高亮当前图形，淡化其他数据
dataZoom：内置型数据区域缩放组件
- 平移：在坐标系中滑动拖拽进行数据区域平移
- 缩放：
  - pc端：鼠标在坐标系范围内滚轮滚动滑动（类似于触摸板）
  - 移动端：在移动端，支持触屏两指滑动缩放
- type: 'inside', inside: 表示用内测滑块
- startValue: 0, 开始显示的数
- endValue: 6, 结束显示的数
- xAxisIndex: 0, 代表是作用在X轴上的控制X轴
- zoomOnMouseWheel: false, 关闭滚轮缩放
- moveOnMouseWheel: true, 开启滚轮平移
- moveOnMouseMove: true 鼠标移动能触发数据窗口平移
- zoomLock: true 是否锁定选择区域的大小如果设置为 true 则锁定选择区域大小，只能平移，不能缩放

dataZoom: {
  type: 'inside',     // inside: 表示用内测滑块
  startValue: 0,     // 开始显示的数
  endValue: 6,       // 结束显示的数
  xAxisIndex: 0,    // 代表是作用在X轴上的 控制X轴
  zoomOnMouseWheel: false,  // 关闭滚轮缩放
  moveOnMouseWheel: true, // 开启滚轮平移
  moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
},

barMinHeight：柱条最小高度，可用于防止某些数据项值过小而影响的交互
- number类型直接填写数值就行例如 barMinHeight: 2
label坐标轴的指示文本标签
- show：是否显示文本标签。如果 tooltip.axisPointer.type 设置为 ‘cross’ 则默认显示标签，否则默认不显示
- precision：显示位置，top,left,right,bottom

实现自定义滚动

/**
 * echartsTimer: 接受定时器
 * that: this
 * list: x轴渲染的数据
 * echartsStart: x轴滚动起始数值
 * echartsEnd: x轴滚动结束数值
 * 两值之间范围的绝对数值定义了数据窗口的范围
 */
setInterval(){
   // 使用定时器自动滚动滑动
   this.echartsTimer = setInterval(function () {
       // 判断最后一个值是否和X轴长度是否一致，一致时回到最初页面
       if (that.echartsEnd == that.list.length) {
           that.echartsStart = 0;
           that.echartsEnd = 5;
       } else {
           that.echartsStart = that.echartsStart + 1;
           that.echartsEnd = that.echartsEnd + 1;
       }
       this.drawChart()
   }, 3000)
},

// 结束清除定时器
beforeDestroy() {
    //清除定时器
    clearInterval(this.echartsTimer);
    this.echartsTimer = null;
}

最终代码

<template>
  <div class="main">
    <div id="container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'; //引入echarts
export default {
  components: {},
  name: '',
  data() {
    return {
      xData: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
      yData: [150, 232, 0, 154, 190, 120, 0, 732, 201, 954, 120, 620],
      echartsStart: 0,
      echartsEnd: 5,
      echartsTimer: null
    };
  },
  created() {
    this.setInterval()
  },
  mounted() {
    this.drawChart()
  },
  computed: {},
  watch: {},
  methods: {
    drawChart() {
      // 获取渲染点dom元素
      let echartsDom = document.getElementById('container')
      var myChart = echarts.init(echartsDom);
      let option = this.getEchartOption(this.xData, this.yData)
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
      window.addEventListener('resize', myChart.resize);
    },
    setInterval() {
      let that = this

      // 使用定时器自动滚动滑动
      this.echartsTimer = setInterval(function () {
        // 判断最后一个值是否和X轴长度是否一致，一致时回到最初页面
        if (that.echartsEnd == that.xData.length) {
          that.echartsStart = 0;
          that.echartsEnd = 5;
        } else {
          that.echartsStart = that.echartsStart + 1;
          that.echartsEnd = that.echartsEnd + 1;
        }
        this.drawChart()
      }, 3000)
    },
    getEchartOption(xData, yData) {
      return {
        color: ["rgba(91, 143, 249, 0.85)", "rgba(90, 216, 166, 0.85)", "rgba(93, 112, 146, 0.85)", "rgba(246, 189, 22, 0.85)"],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          itemGap: 24, // 设置两个legend之间的间距
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        dataZoom: {
          type: 'inside',     // inside: 表示用内测滑块
          startValue: this.echartsStart,     // 开始显示的数
          endValue: this.echartsEnd,       // 结束显示的数
          xAxisIndex: 0,    // 代表是作用在X轴上的
          // start: '10',
          // end: '1'
          // zoomLock: true,
          zoomOnMouseWheel: false,  // 关闭滚轮缩放
          moveOnMouseWheel: true, // 开启滚轮平移
          moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移


        },
        series: [
          {
            name: '你懂撒',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            label: {
              show: true,
              position: 'top', //顶部显示
            },
            data: yData,
          },
          {
            name: '你懂撒1',
            type: 'bar',
            barMinHeight: 2,
            emphasis: {
              focus: 'series'
            },
            label: {
              show: true,
              position: 'top', //顶部显示
            },
            data: yData
          }
        ]
      };
    },

  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.echartsTimer);
    this.echartsTimer = null;
  }
};
</script>
<style lang='less' scoped>
.main {
  width: 80%;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #e6e6e6;
  background: beige;
}

#container {
  width: 100%;
  height: 500px;
  border: 1px solid sandybrown;
}
</style>