patd-echart-vue-ts v1.1.2

基于 Pat Design 规范封装的基于 vue2.x 的 Echarts 图表组件

特性

• 统一的数据格式： 使用对前后端都友好的数据格式，方便生成和修改。
• 简化的配置项： 通过简化的配置项，可以轻松实现复杂需求。
• 定制简单： 提供多种自定义 Echarts 方式，可以方便的设置图表配置项。

支持性

1. 支持所有现代浏览器及 IE10+ ，包括 pc 端和移动端。
2. 支持 ts。

安装

yarn add patd-echart-vue

引入 Chart

你可以引入整个 Chart，或是根据需要仅引入部分图表。我们先介绍如何引入完整的 Element。

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import Chart, { setTheme }  from 'patd-echart-vue';
import App from './App.vue';

Vue.use(Chart);

new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import { setTheme, Pie }  from 'patd-echart-vue';

Vue.use(Pie);

new Vue({
  el: '#app',
  render: h => h(App)
});

完整组件列表和引入方式：

import Vue from 'vue';
import { 
  Pie, 
  Bar, 
  Gauge, 
  Line, 
  Map, 
  MapScatter, 
  MapVisual, 
  Radar, 
  Ring, 
  Scatter 
} from 'patd-echart-vue';


Vue.use(Pie);
Vue.use(Bar);
Vue.use(Gauge);
Vue.use(Line);
Vue.use(Map);
Vue.use(MapScatter);
Vue.use(MapVisual);
Vue.use(Radar);
Vue.use(Ring);
Vue.use(Scatter);

应用图表

<template>
  <div>
    <pae-pie :data="chartData"></pae-pie>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data () {
    return {
      chartData: {
        dimensions: ["PV"],
        source: [
          { date: "2018-05-21", PV: 32371, Order: 19810 },
          { date: "2018-05-23", PV: 12328, Order: 4398 },
          { date: "2018-05-24", PV: 92381, Order: 52910 }
        ]
      }
    }
  }
}
</script>

主题设置

Chart 默认提供三套主题样式，orange（默认设置）、blue、orange 如需修改默认主题，在 main.js 中写入以下内容：

import Vue from 'vue';
import Chart, { setTheme }  from 'patd-echart-vue';

Vue.use(Chart);
setTheme('blue');

new Vue({
  el: '#app',
  render: h => h(App)
});

Vue + TS 完整示例

<template>
  <div id="app">
    <pae-pie name="基础饼图" width="420px" height="314px" :data="pieData" />
    <pae-ring name="环形饼图" width="420px" height="314px" :data="pieData" :config="ringConfig" />
    <pae-ring name="环形玫瑰饼图" width="420px" height="314px" :data="pieData" :config="roseConfig" />
    <pae-gauge name="仪表盘" width="275px" height="314px" :config="gaugeConfig" />
    <pae-line name="折线图" height="314px" width="500px" :data="data" />
    <pae-bar name="多根柱状图" width="500px" height="314px" :data="data" />
    <pae-scatter name="多组数据散点图" width="500px" height="314px" :data="scatterData" />
    <pae-radar name="雷达图" width="500px" height="314px" :data="radarData" :config="radarConfig" />
    <pae-map name="地图分布" width="500px" height="400px" :data="mapDataset" />
    <pae-map-scatter name="地图气泡图" width="500px" height="400px" :data="mapScatterDataset" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import {
  lineDataset,
  gaugeConfig,
  mapDataset,
  mapScatterDataset,
  pieData,
  ringConfig,
  roseConfig,
  radarData,
  radarConfig,
  scatterData
} from "./mock";

export default class App extends Vue {
  public data: object = lineDataset;
  public gaugeConfig: object = gaugeConfig;
  public mapDataset: object = mapDataset;
  public mapScatterDataset: object = mapScatterDataset;
  public pieData: object = pieData;
  public ringConfig: object = ringConfig;
  public roseConfig: object = roseConfig;
  public radarData: object = radarData;
  public radarConfig: object = radarConfig;
  public scatterData: object = scatterData;
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  flex-flow: wrap;
}
#app > div {
  border: 1px solid #eee;
  padding: 10px;
  margin: 10px;
}
</style>

mock 文件

License

MIT