在vue中使用echarts ,自定义tooltip样式 及 实现图表自适应窗口大小

1 在vue中使用echarts

先安装 echarts 此处用的yarn 工具

1

安装完毕之后 可以在package.json中检查

2

如上图所示 表示安装完毕; 接着需要在main.js中引入echart文件

3

如上图所示 完成之后 则可以直接在组件中使用echarts图表了

4

首先在template中定义两个 div ,表示承载展示图表的容器,此处需要用    id 来表示 否则在渲染时会失败;除此之外 还需要在data中定义需要渲染的数据及配置文件,最后通过图中在methods中定义的方法将图表展示到页面中; 此处方法只能在mounted函数中调用,否则会失败;(和vue的生命周期有关系) 

2 自定义 tooltip样式:

5

在数据option的配置中,可以通过在tooltip中定义formatter函数,来对悬浮框进行设置,value参数可以获取相对应的参数 通过对参数进行判断,从而对所需要的值进行处理,以上代码主要实现的效果就是让百分比后面添加了百分号,效果图如下:

6

在formatter函数中 通过打印value可以获取到一下数据:

7

    图5    中的函数主要是对以上标记的几个函数进行处理  从而实现    图6    的效果

3    echarts 自适应浏览器窗口大小

实现窗口自适应主要是通过window.onresize() 方法 和resize()方法;

通过对窗口大小的检测让图表自适应  具体代码实现如下:

8

此处需要注意的是 window.onresize() 方法中的this指向window,需要在外部声明变量,改变this指向;