vue 將echarts封裝爲組件一鍵使用

說明

---

作項目的時候爲了讓數據展現的更加直觀，總會用到圖表相關的控件，而說到圖表控件第一時間固然想到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