vue封装echarts-004

2019-11-18 admin

<template lang=“html”> <div class=“chart chart-field”>

<div
  v-show=" sourceInfo && sourceInfo.length "
  class="chart-field-area">
  <el-row class="chart-field-row">
    <el-col
      :span="6"
      :key="index"
      v-for="(item,index) in sourceInfo">
      <template>
        <div class="card">
          <div :title=" item.marketName ? item.marketName : '未知市场' ">
            {{ item.marketName ? item.marketName : '未知市场' }}
          </div>
          <div>{{ item.count | numberLevel }}</div>
        </div>
      </template>
    </el-col>
  </el-row>
</div>
<div
  class="chart-field-content"
  ref="chartField"
  v-show=" !sourceInfo || !sourceInfo.length ">
</div>

</div> </template>

<script> import * as chart from ‘assets/js/echart-config’; export default { props: {

sourceInfo: {
  type: Array,
  required: true,
  default: () => {
    return []
  }
},
barColors: {
  type: Array,
  required: false,
  default: () => {
    return ['#115bce', '#3988ff']
  }
},
chartTitle: {
  type: String,
  required: false,
  default: '使用权限 TOP10'
}

}, data() {

return {
}

}, computed: {

chartDom() {
  return echarts.init(this.$refs.chartField);
},
optionDom() {
  const option = chart.treeOption(this.sourceInfo, this.chartTitle, this.barColors);
  return option;
}

}, filters: {

numberLevel(num) {
  if ( num !== 0 && (!num || isNaN(num)) ) {
    return 0;
  }
  // 此处为防止字符串形式的数值进来,因为toFixed方法只能用于数值型数
  num = Number(num);
  if (Math.abs(num) > 100000000) {
    return (num / 100000000).toFixed(0) + '亿';
  } else if (Math.abs(num) > 10000) {
    return (num / 10000).toFixed(0) + '万';
  } else {
    return num;
  }
}

}, watch: {

sourceInfo: {
  handler(cates) {
    this.hideLoading();
    if ( cates && cates.length ) {
      this.resize();
    } else {
      this.chartDom.setOption(chart.emptyOption(this.chartTitle), true);
      setTimeout(() => {
        this.resize();
      }, 50)
    }
  },
  deep: true
}

}, methods: {

doRender() {
  this.chartDom.setOption(this.optionDom, true);
},
resize() {
  this.chartDom.resize();
},
showLoading() {
  this.chartDom.showLoading({
    text: '',
    color: '#3988ff',
    textColor: '#000',
    maskColor: 'rgba(255, 255, 255, 0)',
    zlevel: 0
  });
},
hideLoading() {
  this.chartDom.hideLoading();
}

}, mounted() {

this.chartDom.resize(400, 400);
this.showLoading();
window.addEventListener('resize', this.resize);

}, destroyed() {

window.removeEventListener('resize', this.resize);

} } </script>

<style lang=“scss”> .chart-field {

> div.chart-field-content {
  min-height: 260px;
}
&-area {
  width: 400px;
  height: 200px;
}
&-row {
  position: absolute;
  top: 28px;
  @media screen and (min-width: 1801px) {
    top: 42px;
  }
  width: 100%;
  .card {
    width: 90%;
    height: 40px;
    margin: 2px 2px 10px 2px;
    color: #ffffff;
    padding: 10px 0;
    text-align: center;
    border: 1px solid #378fff;
    div:nth-child(1) {
      color: #a8b0df;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    div:nth-child(2) {
      margin-top: 5px;
      font-size: 22px;
    }
  }
}
@for $n from 1 through 12 {
  &-row .el-col-6:nth-of-type(#{$n}) {
    .card {
      background-color: nth((#0142ff, #003eeb, #0136d4, #0131c1, #0134cb, #0230ba, #032ba5, #022696, #031f80, #021b6d, #041658, #0131c1), $n);
    }
  }
}

} </style>

[转载]原文链接:https://segmentfault.com/a/1190000021038985

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-79398.html

文章标题:vue封装echarts-004

相关文章
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
vue-video-player 更改视频源
背景:根据用户的信息来显示不同的视频源 &lt;template&gt; &lt;div class=&quot;video-box-wrap&quot; v-show=&quot;video.show&quot;&gt; ...
2018-05-05
VuePress 快速踩坑
最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePr...
2018-04-27
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
自己参考两个仓库撸的通用的vue2.0+elementUI+多页面模板
A modern Vue.js multiple pages cli which uses Vue 2, Webpack3, and Element-UI Features Vue2 Webpack3 ElementUI Eslint(e...
2018-01-12
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
回到顶部