一步一步实现中后台管理平台模板-12-ECharts封装和响应式,刷新问题及vue-echarts的使用

一,前言

前言的前言:

有一段时间没有更新<<基于Vue的后台管理模板>>专栏了
看了一眼,最近的一次更新还是在8月23日,算起来也间隔了1个多月
中间这段时间一直在看TypeScript,做了些笔记并做了一次TS的学习分享
目前是十一长假期间,在TS告一段落后,回过头来继续连载后台管理模板

先一起来同步一下之前的项目进度:

->创建项目
->集成UI库实现按需加载
->创建后台管理布局
->路由配置,登录,注册,菜单
->根据路由动态生成菜单
->完善Header组件
->完善登录页,保存用户信息
->Axios封装
->mock server配置和使用
->多环境配置+proxy代理配置
->Vuex最佳实践+持久化

到目前为止,一个大体的"框架"已经差不多了,能够投入使用,但还有很大的优化空间

后续安排:

后续将集中精力对框架进行优化,解决IE兼容性问题,添加权限模块,表单等常用菜单页面
框架布局支持响应式,针对移动端提供适配和解决方案,根据浏览器进行构建
集成代码检查,一键部署,单元测试,端到端测试,自动生成雪碧图等实用功能
引入多种webpack插件对项目进行性能优化,再集成N多日常开发常用工具
最后,此项目将被制作成为代码模板,通过cli工具一键生成可直接用于生产的后台管理模板

沉淀团队技术,提高开发效率,统一编码规范和风格,屏蔽技术细节,降低Bug产生概率

回归后的第一篇:

先解决IE兼容性问题,刚好和前面内容无关
不对,换一个,先来ECharts封装和使用,也和前面内容无关
(之所以将Echarts放在前面,因为ECharts封装时会产生一个IE兼容性问题)

---

二,ECharts 和 vue-echarts

ECharts:

Enterprise Charts 
百度开源数据可视化工具(纯JS图表库),底层依赖轻量级Canvas库ZRender
兼容绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等）
提供柱状图、折线图、饼图、气泡图及四象限图,地图等,模板,API,文档丰富

vue-echarts:

基于ECharts依赖Vue封装后的插件库
轻量，高效，按需绑定事件
支持按需导入ECharts.js图表​​和组件
支持组件调整大小事件自动更新视图

ps:

本篇将分别介绍如何将ECharts封装为Vue组件 和 vue-echarts的使用

"组件调整大小事件自动更新视图"使用resize-detector实现
而这正是产生IE兼容性的问题所在,可使用babel修复

---

三,Vue封装ECharts组件及问题解决

安装依赖:

npm install --save echarts

创建components/Chart.vue:

创建Chart.vue组件用来封装ECharts,通过ref绑定echarts实例
组件销毁时,回收资源

<template>
  <div ref="chartDom">ECharts</div>
</template>

<script>
import echarts from "echarts";
export default {
  props: ["chartData"],
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      this.chart = echarts.init(this.$refs.chartDom);
      var option = {
        tooltip: {},
        xAxis: {
          // axisLabel:{
          //     rotate:45,  // 旋转角度
          //     interval:0  // 间隔显示
          // },
          data: this.chartData.xAxisArr
        },
        yAxis: [
          {
            name: "数量",
            type: "value",
            show: true,
            // splitNumber: 10, //坐标轴的分割段数
            axisLabel: {
              fontSize: 14,
              color: "#333"
            },
            splitLine: {
              show: true
            }
          },
          {
            name: "金额",
            type: "value",
            min: "0",
            max: function(value) {
              return value.max;
            },
            axisLabel: {
              fontSize: 14,
              color: "#333",
              // formatter: '{value} %'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            data: this.chartData.quantityArr,
            itemStyle: {
              normal: {
                color: "#009C82" 
              }
            }
          },
          {
            name: "金额",
            type: "line",
            data: this.chartData.priceArr,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(255, 204, 102)'
                }, {
                    offset: 1,
                    color: 'rgb(255, 153, 51)'
                }]),
                label : {
                    show : true,
                    position : 'top',
                    textStyle : {
                        fontSize : '14',
                        color: 'rgb(255, 156, 54)',
                    }
                }
              }
            }
          }
        ]
      };
      this.chart.setOption(option);
    },
  },
  beforeDestroy() {
    this.chart.dispose();
    this.chart = null;
  }
};
</script>

<style></style>

在main.js中引入了antd的Card组件:

Card可用于表单页面的Title显示,包裹