vue 将echarts封装为组件一键使用

2,971 阅读1分钟

说明


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

控件演示

控件使用


概要

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

文档

  • props
属性 说明 类型
_id 图表唯一标识,当id重复将会报错 String
_titleText 图表标题 String
_xText x轴描述 String
_yText y轴描述 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