0.1.1 • Published 4 years ago

ecmoho-chart v0.1.1

Weekly downloads
7
License
-
Repository
-
Last release
4 years ago

ecmoho-chart操作文档

一、安装 npm install echart ecmoho-chart -S 二、引用 mian.js中 import chart from ‘../../../’ Vue.use(chart) 三、模块介绍(api) 蓝湖上十种大类的分别,支持饼状图(单组数据)、柱状图(单组数据)、柱状图(多组数据)、柱状图(堆叠展示样式一,单组/多组数据)、柱状图(堆叠展示样式二,单组/多组数据)、折线图(单组/多组数据)、折线图柱状图混合图形(多组数据)、折线图(阴影部分展示,单组数据)、比分比展示(类似达成率,单数据)、柱状图(横向展示,单组数据) 参数介绍 datas:支撑图形展示的数据; chartType:图形类型,包括颜色样式等; chartStyle:图形样式,长宽,柱状图柱子宽度; chartOption:当图形为柱状图或者折线图的时候展示用的x轴的数据; chartClass:chart图形的class类方便做自定义处理

参数 介绍 datas (必传参数) 第一个和第九个data要特殊处理,只能传对象数组形式,且第九个value值就是百分比的值 chartType { type:必传 color:非必传(默认1) } Type:图形一到十对应1-10,color对应四种不同的配色方案,同时,当type为1 的时候color选择会出现不同样式,饼状图或者是环形图,带有说明文字和不带有说明文字 chartStyle { Width:非必传(默认400) Height:非必传(默认400) dataFormat:非必传(默认decimal) } 图形样式,长宽等,同时鼠标悬浮显示的数据也在这个地方做配置,支持五种参数,money为金额,decimal为小数,int为整数,percent为百分比,传对象的时候是第五种{t:'decimal', d:*},为小数类型,d传的参数表示保留几位小数 chartOption第一个和第九个不与要,剩余的必传 当图形用到折线图和柱状图的时候必要的x轴的数据 chartClass 非必传(默认ecmoho-chart) 给chart图形添加一个类名

datas	chartType	chartStyle	chartOption	chartClass

第一个 { name:’’, data: {value:’’,name:’’}, {value:’’,name:’’}, ... } { type:1, color: } { width:’px’, height:’*px’, dataFormat:’money’ } / ‘*’ 第二个 { name:’’, data:,,,... } { type:2, color:, barthWidth:(非必传) } { width:’px’, height:’px’, dataFormat:’money’ } categoryData:,,,...*’ 第三个 { name:’’, data:,,,... }, { name:’’, data:,,,... } { type:3, color:, barthWidth:(非必传) } 同上 categoryData:,,,...*’ 第四个 同上 { type:4, color:, barthWidth:(非必传) } 同上 categoryData:,,,...*’ 第五个 同上 { type:5, color:, barthWidth:(非必传) } 同上 categoryData:,,,...*’ 第六个 同上 { type:6, color:, barthWidth:(非必传) }

同上	categoryData:[*,*,*,*...]	‘*****’

第七个 同上 { type:7, color:, barthWidth:(非必传), lineCount:, } 同上 categoryData:[,,,*...] ‘*’ 第八个 { name:’’, data:,,,... }, { type:8, color:, barthWidth:(非必传) } 同上 categoryData:,,,...*’ 第九个 { name:’’, data: {value:’’,name:’’} } { type:9, circleColor:’’, barthWidth:*(非必传) } 同上 / ‘*’ 第十个 { name:’’, data:,,,... }, { type:10, color:, barthWidth:(非必传) } 同上 categoryData:,,,...*’ 注:1、第1、2、8、9、10个图形只能显示一组数据,传进多组数据的时候只会显示第一组数据 2、第七个折现柱状混合的图形,折现数据必须在上