nh-charts
v1.1.0
Published
newhope echarts ui
Readme
nh-charts
新希望地产数科中心图表组件库
Installation
安装方法
1. npm安装
npm: npm install nh-charts
2. yarn安装
yarn add nh-chartsnpm install nh-chartsconst compiler = require("vue-template-compiler");Quick Start
import Vue from "vue";
import NhCharts from "nh-charts";
for (const key in NhCharts) {
const component = NhCharts[key];
Vue.component(component.name, component);
}
<template>
<div id="app">
<!-- 单折线图 -->
<nw-simple-line />
<!-- 多折线图 -->
<nw-multi-line />
<!-- 单面积图 -->
<nw-simple-area />
<!-- 多面积图 -->
<nw-multi-area />
<!-- 单柱状图 -->
<nw-simple-bar />
<!-- 分组柱状图 -->
<nw-group-bar />
<!-- 堆叠柱状图 -->
<nw-stack-bar />
<!-- 组合图表 -->
<nw-line-bar />
<!-- 饼图 -->
<nw-simple-pie />
<!-- 环形图 -->
<nw-simple-ring />
<!-- 组合环形图 -->
<nw-group-ring />
<!-- 金字塔 -->
<nw-chart-pyramid />
<!-- 漏斗图 -->
<nw-chart-funnel />
</div>
</template>使用方法
1. main.js 全局安装
import "./plugins/ui-charts-components";ui-charts-components 文件：
import NhCharts from "nh-charts";
for (const key in NhCharts) {
const component = NhCharts[key];
Vue.component(component.name, component);
}然后在其他.vue 文件里面，直接使用暴露出的图表组件即可
2. 直接引用打包后的 nh-charts.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<yyl-npm-practice :propData="propData"></yyl-npm-practice>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./dist/nh-charts.min.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
propData: ''
}
},
methods: {
}
})
</script>
</body>
</html>