Echarts的简单使用与缩略图展示

背景：

产品要求展示各个指标的分时数据趋势对比，需要使用echarts。这次写法跟以前（vue-echarts）不同，更简单了也避免了上次使用vue-echarts高亮点遇到的版本问题。

其实之前产品就提过要缩略图展示，但当时我以为是需要使用特殊的插件，查询之后没有什么好的思路。这次突然发现原来还是使用echarts就能实现

效果：

思路：

使用Popover 弹出框，插槽内是缩略图，只需要展示趋势即可(隐藏x轴和y轴)。弹出内容为指标的分时数据趋势对比。

写法：

<el-popover popper-class="chart-popover" 
    trigger="hover" placement="bottom" 
    :title="title" width="600">
    <div class="chart-content pa-2" ref="chart-content"></div>
    <div slot="reference">
        <div ref="showChart" class="chart-item"></div>
    </div>
</el-popover>

1、引入echarts

import * as echarts from 'echarts'

 2、在页面挂载时，初始化echarts实例和绘制图表

mounted() {
      this.setEcharts()
 },

setEcharts() {
      let { rows, compareRows, item } = this
      if (rows && rows.length > 0) {
        //准备数据
        let x1Rows = rows.map((p) => parseFloat(p[item.key]))
        let x2Rows = compareRows.map((p) => parseFloat(p[item.key]))
        let option = {
          color: ['#4857E5', '#A4ABF2'],
          grid: {
            left: '5px',
            right: '5px',
            top: '5px',
            bottom: '15px'
          },
          xAxis: {
            show: false, //隐藏x轴
          },
          yAxis: {
            show: false, //隐藏x轴
          },
          series: [
            {
              type: 'line',
              data: x1Rows,
              smooth: true,
              showSymbol: false
            },
            {
              type: 'line',
              data: x2Rows,
              smooth: true,
              showSymbol: false
            }
          ]
        }
        // 基于准备好的dom，初始化echarts实例
        let el = this.$refs['showChart']
        let echart = echarts.init(el)
        // 绘制图表
        echart.setOption(option)
      }
    },

大图同理。