我是靠谱客的博主 虚拟狗,最近开发中收集的这篇文章主要介绍vue 将echarts封装为组件一键使用说明,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

说明


做项目的时候为了让数据展示的更加直观,总会用到图表相关的控件,而说到图表控件第一时间当然想到ECharts这个开源项目,而它不像iview、element-ui这些组件使用起来那么便捷,需要绕一个小弯,为了图方便于是对ECharts进行了一层封装

控件演示

控件使用


概要

  • 基于echarts的二次封装
  • 由数据驱动
  • 控件源码见src/components/charts

文档

  • props
属性说明类型
_id图表唯一标识,当id重复将会报错String
_titleText图表标题String
_xTextx轴描述String
_yTexty轴描述String
_chartData图表数据Array
_type图表类型,提供三种(LineAndBar/LineOrBar/Pie)String
  • 调用示例
 <chart
  :_id="'testCharts'"
  :_titleText="'访问量统计'"
  :_xText="'类别'"
  :_yText="'总访问量'"
  :_chartData="chartData"
  :_type="'Pie'"></chart>
 //测试数据样例 [["类别1",10],["类别2",20]]复制代码

实现方式


  • 创建一个待渲染的dom
    <template>
      <div :id="_id" class="chart"></div>
    </template>复制代码
  • 绘制函数
    function drawPie(chartData,id,titleText,xText,yText) {
      var chart = echarts.init(document.getElementById(id))
      var xAxisData = chartData.map(function (item) {return item[0]})
      var pieData = []
      chartData.forEach((v,i)=>{
        pieData.push({
          name:v[0],
          value:v[1]
        })
      })
      chart.setOption({
        title : {
          text: titleText,
          subtext: '',
          x:'center'
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: xAxisData
        },
        series : [
          {
            name: xText,
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:pieData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }复制代码
  • 挂载结束、数据源改变时重绘
      watch:{
        _chartData(val){
          switch (this._type){
            case "LineAndBar":
              drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
              break
            case "LineOrBar":
              drawLineOrBar(val,this._id,this._titleText,this._xText,this._yText);
              break
            case "Pie":
              drawPie(val,this._id,this._titleText,this._xText,this._yText);
              break
            default:
              drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
              break
          }
        }
      },
      mounted() {
        switch (this._type){
          case "LineAndBar":
            drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
            break
          case "LineOrBar":
            drawLineOrBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
            break
          case "Pie":
            drawPie(this._chartData,this._id,this._titleText,this._xText,this._yText);
            break
          default:
            drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
            break
        }
      }复制代码

如果觉得有用,欢迎star calebman/vue-DBM

最后

以上就是虚拟狗为你收集整理的vue 将echarts封装为组件一键使用说明的全部内容,希望文章能够帮你解决vue 将echarts封装为组件一键使用说明所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(56)

评论列表共有 0 条评论

立即
投稿
返回
顶部