Vu-element-admin使用echarts和自适应屏幕和统计插件(VII)

一、安装1。安装echartsecharts百度插件，官方地址：https://echarts.apache.org/zh/安装npm安装echarts -保存在index.html项目。还有一种方法可以安装指定版本的echarts，如NPM install-save e e charts @ 4 . 2 . 1 Uninstall e charts命令npm uninstall echarts2。在项目中安装vue-count-to。这是vue的统计显示组件，其主要功能是平滑加载NPM安装量vue-count-to-save。第二，用echarts，resize.js，Vue-count-to插件，先看看要达到的效果。
1.电子海图做数据显示。在同一个目录下创建echarts的两个新组件：饼图：PieEcharts.vue和直方图：BarEcharts.vue然后编写代码并在index.vue中引入组件
引用中的组件。某视频剪辑软件
使用echarts时需要注意的要点：(1)引入echarts:从’ eCharts ‘导入eCharts(2)引入e charts ‘主题文件(按需，不改变主题不需要引入):require(‘ e charts/Theme/马卡龙’)(3)初始化：eCharts.init (‘DOM ‘，)。
注意：init的第一个参数是要渲染的dom，第二个参数是echarts的主题；参见setOption官方文档中的参数说明。2.resize.js进行页面适配(1)首先将vue-element-admin中的mixins复制到你的项目模板文件夹中。
(2)改进utils中index.js中的方法，复制vue-element-admin的utils/index.js中去抖的整个方法。
(3)组件中的介绍：注意chart: null必须在数据中返回，因为this.chart是在resize.js中获取的，这意味着当你初始化e-echarts时，应该是：this.chart=e-charts.init (DOM，theme)。注意，引入resize.js时，必须默认使用mixins进行曝光返回；
3.vue-count-平滑加载数值(1)将视图/仪表板/组件/panelgroup.vue组件从vue-element-admin复制到您的项目中。
(2)安装vue计数器
(3)说明：具体组件属性见vue-count-to文档：https://www.npmjs.com/package/vue-count-to。