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…