Vue中引入echarts并实现echarts自适应

先上效果图

先安装echarts

npm install echarts@4.1.0 --save

html

<template>
  <div class="main">
    <!-- echarts图表 -->
    <div
      id="myChart"
      style="height:100%;width: 100%;"
    />
  </div>
</template>

css

<style scoped>
.main {
  background-color: black;
  height: 100px;
}
</style>

js

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      myChart: null, // 图表需要字段
      // dataList: null // 若为null,则显示 暂无数据
      dataList: {
        zxty: [800, 700, 500, 900, 460, 880, 369],
        zxte: [200, 300, 100, 600, 400, 12, 250],
        times: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
      }
    }
  },
  destroyed() {
    // 移除监听
    window.removeEventListener('resize', this.resize)
  },
  mounted() {
    // 不使用window.onresize是因为当出现多个echarts图表时,此时只有一个图表自适应，
   // 虽然在这里适用，但是不具有共性，所以还是选择使用 window.addEventListener
    window.addEventListener('resize', this.resize)  // 添加监听
    // dom渲染完毕后，加载显示
    this.echartsInit()
  },
  methods: {
    // echarts初始化
    echartsInit() {
      const that = this // 将当前的this赋值给that，因为接下来this的指向不是当前的vue实例
      that.myChart = echarts.init(document.getElementById('myChart')) // 初始化echarts
      // 多次绘制之前，先清空一下
      that.myChart.clear()
      let option
      // 无数据时候显示
      // 转换为空字符串判断是否为空
      if (that.dataList === null) {
        option = {
          title: {
            text: '暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#55acf2',
              fontWeight: 'normal',
              fontSize: 16
            }
          }
        }
      } else {
        // 有数据时候显示
        that.myChart.getZr().on('dblclick', function (params) {
          const pointInPixel = [params.offsetX, params.offsetY]
          if (that.myChart.containPixel('grid', pointInPixel)) {
            /* 此处添加具体执行代码*/
            const pointInGrid = that.myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
            // X轴序号
            const xIndex = pointInGrid[0]
            // 获取当前图表的option
            const op = that.myChart.getOption()
            // 获得图表中我们想要的数据
            const timePoint = op.xAxis[0].data[xIndex] // x轴
            // const value = op.series[0].data[xIndex] // y轴
            console.log('双击节点时要进行的操作')
          }
        })
        const zxty = that.dataList.zxty // 折线图一
        const zxte = that.dataList.zxte // 折线图二
        option = {
          // 鼠标提示工具
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              return params[0].name + '<br>' +
                '<span style=color:' + params[0].color + '>' + params[0].seriesName + ': ' + params[0].value * (10 * 10) + ' </span><br>' +
                '<span style=color:' + params[1].color + '>' + params[1].seriesName + ': ' + params[1].value * (10 * 10) + ' </span><br>'
            }
          },
          xAxis: {
            // 类目类型
            type: 'category',
            name: '日期',
            nameTextStyle: {
              color: '#ffffff',
              align: 'right'
            },
            nameGap: 18,
            // x轴刻度文字
            data: that.dataList.times,
            axisTick: {
              show: false// 去除刻度线
            },
            axisLabel: {
              color: '#55acf2', // 文本颜色
              // 格式化横坐标显示的内容
              // formatter: function (value, index) {
              //   return that.$moment(value).format('HH:mm') // 只显示 HH:mm
              // }
            },
            axisLine: {
              show: false// 去除轴线
            },
            boundaryGap: false// 去除轴内间距
          },
          yAxis: {
            // 数据作为刻度文字
            type: 'value',
            name: '数值',
            nameTextStyle: {
              color: '#ffffff',
              align: 'left'
            },
            offset: '0',
            // 根据max和min，自适应显示y轴的坐标
            // min: min, 
            // max: max,
            axisTick: {
              show: false// 去除刻度线
            },
            axisLabel: {
              color: '#55acf2'// 文本颜色
            },
            axisLine: {
              show: false// 去除轴线
            },
            boundaryGap: false// 去除轴内间距
          },
          // 图例组件
          legend: {
            textStyle: {
              color: '#55acf2' // 图例文字颜色
            },
            align: 'right',
            right: '0%'// 距离右边0%
          },
          // 设置网格样式
          grid: {
            show: true, // 显示边框
            left: '3%',
            right: '4%',
            bottom: '3%',
            borderColor: '#55acf2', // 边框颜色
            containLabel: true // 包含刻度文字在内
          },
          series: [{
            name: '折线图一',
            // 数据
            data: zxty,
            // 图表类型
            type: 'line',
            // 圆滑连接
            smooth: false,
            itemStyle: {
              color: '#00f2f1' // 线颜色
            }
          },
          {
            name: '折线图二',
            // 数据
            data: zxte,
            // 图表类型
            type: 'line',
            // 圆滑连接
            smooth: false,
            itemStyle: {
              color: '#ed3f35' // 线颜色
            }
          }]
        }
      }
      // 使用刚指定的配置项和数据显示图表。
      that.myChart.setOption(option)
      that.myChart.hideLoading() // 加载完隐藏动画
    },
    // 重置窗口大小
    resize() {
      this.myChart.resize() // 窗口大小发生变化的时候重置
    },
  }
}
</script>