1.0.5 • Published 2 years ago
使用说明
只能用于vue 2.x中
1、插件安装
npm install charts-helper --save
2、插件引入方式
1、在main.js中引入chartsHelper
import { ScreenFooter, ScreenHeader, Charts, ScreenMap} from 'charts-helper'
import 'charts-helper/charts-helper.css'
2、引入使用
Vue.use(ScreenFooter);
Vue.use(ScreenHeader);
Vue.use(Charts);
Vue.use(ScreenMap);
3、在需要的界面中直接使用该插件
例如：
<screen-header :imgurl="require('@/assets/img/header.png')" title="测试平台"></screen-header>
<screen-footer :imgurl="require('@/assets/img/footer.png')"></screen-footer>
<charts :width="500" :height="300" :is-title="true" :title-text="'用量'" ref-name="chart1" :y-axis="{}" :options="options" :series="series" :x-axis="xAxis" :charts-img="require('@/assets/img/k_1.png')"></charts>
<screen-map :width="1000" :height="700" ref-name="chart3" :options="options" :series="series3" :visual-map="visualMap"></screen-map>
3、插件所包含的组件以及组件可传属性
| 组件名称 | 作用 | 备注 |
|---|
| charts组件 | 能够让使用者快速的使用折线图，柱状图，饼图等基本图表 | ![./src/assets/chartsimple.png]( "npm.io") |
| ScreenHeader组件 | 让用户设置大屏的标题 | ![./src/assets/headersimple.png]( "npm.io") |
| ScreenFooter组件 | 让用户设置大屏的表尾 | ![./src/assets/footersimple.png]( "npm.io") |
| ScreenMap组件 | 地图展示 | |
（1）charts组件
| 属性名称 | type | default | 备注 |
|---|
| ref-name | string | | 必填，ref属性名称，引入多个组件时，请保持每个组件的该属性值都不一样！ |
| width | number | | 必填 |
| height | number | | 必填 |
| options | object | | 除x，y轴和series之外的属性设置 |
| charts-img | string | | echarts所在区域的背景图片地址示例：require('../static/banner.png')，注意，一定要使用require该方式 |
| x-axis | object,array | | 图表x轴设置 |
| y-axis | object,array | | 图表y轴设置 |
| series | array | | 必填，图表series数据 |
| is-title | boolean | false | 是否显示图表标题 |
| title-text | string | | 标题文字 |
| title-color | string | '#FFFFFF' | 标题文字颜色 例如：‘#ffffff' |
| title-font | string | | 标题文字设置，例如：15px arial,sans-serif |
（2）ScreenHeader组件
该组件默认高度为72px
| 属性名称 | type | default | 备注 |
|---|
| title | string | | 大屏header内的标题文字 |
| imgurl | string | | 大屏header的背景图片地址例如：require('@/assets/img/header.png')，引入时候，需要加require引入 |
（3）ScreenFooter组件
该组件高度默认为 24px
| 属性名称 | type | default | 备注 |
|---|
| imgurl | string | | 大屏footer的背景图片地址例如：require('@/assets/img/footer.png')，引入时候，需要加require引入 |
（4）ScreenMap组件
| 属性名称 | type | default | 备注 |
|---|
| ref-name | string | | 必填，ref属性名称，引入多个组件时，请保持每个组件的该属性值都不一样！ |
| width | number | | 必填 |
| height | number | | 必填 |
| options | object | | 除series和visual-map之外的属性设置例如：title: {text: "全国疫情地图展示",textStyle: {color: "gold",fontStyle: "normal",},left: "center",top: "40px",} |
| series | array | | 地图series属性数据，注意：不要传入data数据，data数据请在属性series-data属性里面传入 |
| series-data | array | | series里面的data数据例如：{ name: "北京", value: "100" },{ name: "天津", value: "200" },, |
| visual-map | object | | 在地图左侧小导航图标属性例如：visualMap: {show: true,x: "left",y: "center",splitList: { start: 500, end: 600 },{ start: 400, end: 500 },{ start: 300, end: 400 },{ start: 200, end: 300 },{ start: 100, end: 200 },{ start: 0, end: 100 },color: "#5475f5","#9feaa5","#85daef","#74e2ca","#e6ac53","#9fb5ea",} |