ez-chart

ez-chart

通过简单配置参数快速生成echarts图表渲染所需要的option参数 使用vue框架的请结合ez-vue-chart使用会更加方便

安装

npm install 'ez-chart'
yarn add 'ez-chart'

使用

import EzChart from 'ez-chart'
import echarts from 'echarts'
const ezChart = new EzChart();
const data = [
    {
      label: '数据1',
      val: 111,
      val2: 31,
    },
    {
      label: '数据2',
      val: 312,
      val2: 142,
    },
    {
      label: '数据3',
      val: 333,
      val2: 112,
    }
];
const type = 'bar';
const keyMap = ['label', 'val', 'val2'];
const option = ezChart.getOption({data, type, keyMap})
const instance = echarts.init({})
instance.setOption(option);

EzChart

简介

EzChart.extend(options)

扩展ezChart的基础配置

参数	说明	类型	可选值	默认值
options	挂在到原型上的参数	object	--	--
options.customCharts	自定义扩展图表类型	object	--	--
options.echartsOption	设置到全局的基础图表配置，会合并覆盖基础配置	object	--	--

options.customCharts

可自定义处理要生成的option参数,自动绑定this指向到当前实例对象，可以直接调用内部的getOption方法

EzChart.extend({
  customCharts: {
    bottomLegend (options) {
      const option = this.getOption(Object.assign(options, {type: options.params.type}));
      Object.assign(option.legend, {
        bottom: 20,
        left: 'center',
        orient: 'horizontal'
      })
      return option
    }
  }
});

new EzChart(options)

实例化EzChart

参数	说明	类型	可选值	默认值
options	当前实例的基础参数	object	--	--
options.type	当前实例的图表类型	enmu	--	--
options.data	数据集合	array	--	--
options.keyMap	键值集合	array	--	--
options.params	其他自定义参数	Object	--	--
options.param.names	legend/serise.name	array	--	--
options.param.options	legend/serise.name	array	--	--

特殊说明

type = bar | line

keyMap在条形图和折线图中 type = bar | line 第一位是label其余均为数据项 如： keyMap = ['date', 'max_value', 'min_value'] 则从数据list中获取到date 作为xAxis.data或yAxis.data , max_value和 min_value则作为 option.series[0].data | option.series[1].data 数据项中的option.series[0].name从options.param.names[0]中获取 数据项中的option.legend.data从options.param.names]中获取

type = pie | funnel

keyMap 在饼图和漏斗图type = pie | funnel中赋值策略有不同 option.legend.data是keyMap的第一位

type = scatter

scatter 无label项

ezChart.getOption(options)

同实例化EzChart

options.type

需要渲染的图表类型 同echarts.series.type目前支持

line bar pie scatter funnel

EzChart.utils.checkOptions(options)

该方法用于检测必传参数

参数	说明	类型	可选值	默认值
options	获取图表参数时传递的值	object	--	--

EzChart.utils.getParamsArray(keys, list)

该方法用于获取指定数组内的指定值

参数	说明	类型	可选值	默认值
keys	需要获取的key值几何	string/array	--	--
list	待提取数据列表	array<object>--	--

EzChart.utils.checkType(type)

判断用户传入的type是否支持

参数	说明	类型	可选值	默认值
type	指定的type类型	string	--	--

示例及使用

结合ez-vue-chart使用

// main.js
import Vue from 'vue'
import App from './App.vue'
import lodash from 'lodash';
import echarts from 'echarts'
import EzChart from 'ez-chart'
import ezVueChart from 'ez-vue-chart'
EzChart.extend({
  customCharts: {
    bottomLegind (options) {
      const option = this.getOption(Object.assign(options, {type: options.params.type}));
      Object.assign(option.legend, {
        bottom: 20,
        left: 'center',
        orient: 'horizontal'
      })
      return option
    }
  }
});
Vue.use(ezVueChart)
const test = new Vue({
  el: '#app',
  render: h => h(App)
})
// app.vue
<template>
  <div id="app">
      <ez-chart :data="data" :keyMap="['label', 'val', 'val2']" type="bar" register="click"></ez-chart>
      <ez-chart :data="data" :keyMap="['label', 'val']" type="pie"></ez-chart>
      <ez-chart :data="data" :keyMap="['label', 'val', 'val2']" type="line"></ez-chart>
      <ez-chart :data="data" :keyMap="['label', 'val']" type="funnel"></ez-chart>
      <ez-chart :data="data" :keyMap="['label', 'val']" log :params="{type: 'pie'}" type="bottomLegind"></ez-chart>
      <ez-chart :data="data2" :keyMap="['val']" type="scatter"></ez-chart>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      data: [
        {
          label: 'test',
          val: 111,
          val2: 31,
        },
        {
          label: 'test2',
          val: 312,
          val2: 142,
        },
        {
          label: 'test4',
          val: 333,
          val2: 112,
        }
      ],
      data2: [
        {
          name: 'test',
          val: [10.0, 8.04],
        },
        {
          name: 'tes2t',
          val: [8.0, 6.95],
        },{
          name: 'te32s3t',
          val: [13.0, 7.58],
        },{
          name: 't1es3t',
          val:  [9.0, 8.81],
        },{
          name: 'te13s3t',
          val: [11.0, 8.33],
        },{
          name: 't3es3t',
          val: [14.0, 9.96],
        },{
          name: 't1es3t',
          val: [6.0, 7.24],
        },{
          name: 't4es3t',
          val: [4.0, 4.26],
        },{
          name: 'tes123t',
          val: [12.0, 10.84],
        },{
          name: 'te2s3t',
          val: [7.0, 4.82],
        },{
          name: 'tes113t',
          val: [5.0, 5.68]
        },
      ]
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>