vue 使用 echarts实现图表数据

echarts 安装与使用

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

  1. vue项目中安装 echarts

npm install echarts --save

  1. 在项目中引用
  • 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);

柱状图

  1. 基础柱状图

实现效果
在这里插入图片描述

  • 以下是实现代码
<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>

  1. 添加提示框 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: 高亮图形样式和标签样式

    • focusseries 高亮当前图形,淡化其他数据
      在这里插入图片描述
  • 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
      在这里插入图片描述
  1. 实现自定义滚动
/**
 * 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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值