vue 將echarts封裝為元件一鍵使用

高達達發表於2017-09-30
VueEcharts封裝元件

說明

做專案的時候為了讓資料展示的更加直觀，總會用到圖表相關的控制元件，而說到圖表控制元件第一時間當然想到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

相關文章