R-vue-echarts NPM

使用说明

npm install r-vue-echarts echarts -S

import RVueEcharts from 'r-vue-echarts'
Vue.use(RVueEcharts)

//使用组件
<template>
   <echarts-bar></echarts-bar>
</template>

数据传递

属性	数据类型	默认传递项	说明
chartWidth	String	100%	图形宽度
chartHeight	String	400px	图形高度
chartData	Object	{ columns: [], rows: [] })	传递数据
chartData/rows	Array	[]	画图数据(包含 x 轴线显示数据)
chartData/columns	Array	[]	需要画图的选项(第一个数据为 x 轴显示数据)
settings	Object	{}	特殊配置项数据(一些特殊的配置项，方便修改)
extend	Object	{}	修改配置项(根据 echats 官网的 option 配置,修改画图的配置)

1.柱状图

配置项	数据类型	代码演示	说明
theme	String	'drak'	更新主题
legendName	Object	{ water: '水'}	修改 legend 显示的样式
myAxis	Object	传递以下三个值	设置 y 轴的配置
axisSite	Object	{ right: 'fire' }	设置双 y 轴
axisType	Array	'normal', '%'	设置数据的属性,normal：默认,K：千,%：百分比
axisName	Array	'值', '比率'	设置 y 轴的名称
label	Object	{show: true,position: 'top'}	设置数据是否显示(默认不显示)和显示的位置
switchAxis	Object	{axis: 'yAxis'}	切换数据的显示轴线位置(参数为:yAxis 或 xAxis)
stack	Object	{总和: 'water', 'gas'}	选择合并递增显示的数据
xAxisType	String	'value'	设置 x 轴的 type 值

2.折线图

3.圆饼图

配置项	数据类型	代码演示	说明
theme	String	'drak'	更新主题
name	String	'name'	设置圆环图的名称
selected	String,Boolean	'single'	选中模式(默认为false,其他值:true,'single','multiple')
radius	String,Array	'50%'	设置半径(数组情况下可以设置圆环图)
center	Array	'50%','50%'	设置图形位置(相对于x,y轴的位置)
roseType	String,Boolean	'radius'	是否展示成南丁格尔图(默认是false,其他值'radius','area')
more	Array	[ '1-1','1-2' , '1-1','1-2','1-3' ]	多圆饼图时设置

5 years ago

5 years ago