vue -02 vue中如何使echarts展示的报表的功能更加完善

使用lodash中的merge函数
使用方法:
1.在vue文件中导入

import _ from 'lodash'

2.在数据域中定义自己待合并的options配置项

 options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }

3.在使用echarts的mounted域中进行合并

 _.merge(res.data, this.options)

4.在指定报表的配置项和数据时使用合并后的结果
(merge返回第一个参数:res.data)

    myChart.setOption(res.data)

5.合并完的结果:折线图拥有鼠标放置后显示数据点的信息
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Forest_2Cat/article/details/113454842