基於ECharts 圖表二次封裝實現0配置畫圖表，持續迭代中歡迎 Star

x-charts

基於 ECharts 二次封裝的圖表庫 📉📊

項目倉庫地址: https://github.com/IdenPin/x-...

demo 演示地址: https://idenpin.github.io/x-c...

特性

• 0 配置（簡化繁瑣的 options 配置）
• 能夠針對項目提取共用的 default options
• 將 options 和 data 分離

使用方法

npm i @pdeng/x-charts

new Xcharts(el: HTMLDivElement, type?: String, options?: Object).setData(data?: {rows:? Array, columns?: Array, legendData?: Array})

• new Xcharts(el: HTMLDivElement, type?: String).setData()
  el, type 爲必填字段，setData 不傳默認使用預置 mock 數據
• new Xcharts(el: HTMLDivElement, type?: String, options?: Object).setData(data)
  data 中 rows 表示圖表的緯度
  options 選傳字段，默認使用預置的 default options。能夠根據本身項目狀況抽離出一份本身的 default options

注意 : 目前支持的 type 類型有 line | bar | pie | scatter | radar | map，項目持續更新中

// 使用預置 options
<template>
  <div>
    <div id="chart0" style="width:100%;heigth:300px" />
  </div>
</template>
<script>
import { Xcharts } from '@/utils/xcharts'
export default {
  mounted() {
    new Xcharts('chart0', 'line').setData()
  }
}
</script>

// 自定義 options
<template>
  <div>
    <div id="chart0" style="width:100%;heigth:300px" />
  </div>
</template>
<script>
import { Xcharts } from '@/utils/xcharts'
export default {
  data() {
    return {
      legendData: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎'],
      columns: [
        { value: 335, name: '直接訪問' },
        { value: 310, name: '郵件營銷' },
        { value: 234, name: '聯盟廣告' },
        { value: 135, name: '視頻廣告' },
        { value: 548, name: '搜索引擎' }
      ]
    }
  },
  mounted() {
    this.chart0 = new Xcharts('chart0', 'pie', {
      series: [
        {
          radius: [0, '70%'],
          roseType: 'radius'
        }
      ]
    }).setData({
      legendData: this.legendData,
      columns: this.columns
    })
  }
}

DEMO 截圖

實戰項目截圖：




演示地址: https://idenpin.github.io/x-c...