1.0.5 • Published 4 years ago
patd-echart-vue v1.0.5
基于 Pat Design 规范封装的基于 vue2.x 的 Echarts 图表组件
特性
- 统一的数据格式: 使用对前后端都友好的数据格式,方便生成和修改。
- 简化的配置项: 通过简化的配置项,可以轻松实现复杂需求。
- 定制简单: 提供多种自定义 Echarts 方式,可以方便的设置图表配置项。
支持性
- 支持所有现代浏览器及 IE10+ ,包括 pc 端和移动端。
- 支持 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>