vue 将echarts封装为组件一键使用-CSDN博客

说明

做项目的时候为了让数据展示的更加直观，总会用到图表相关的控件，而说到图表控件第一时间当然想到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
    }
  }复制代码