使用说明

只能用于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组件 | 能够让使用者快速的使用折线图，柱状图，饼图等基本图表 | | | ScreenHeader组件 | 让用户设置大屏的标题 | | | ScreenFooter组件 | 让用户设置大屏的表尾 | | | 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",]} |