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指向;
