1、关于获取安装配置参照以下地址,不做主要讲解
// gitee 地址
https://gitee.com/uCharts/uCharts
// uniapp 地址
https://ext.dcloud.net.cn/plugin?id=271
// npm 地址
https://www.npmjs.com/~qiun
2、页面使用
<qiun-data-charts :chartData="chartData" :echartsH5="true" :echartsApp="true"
background="none" :eopts="eopts" />
// eopts 配置项
eopts={
legend: {
orient: 'vertical',
left: 'left'
}
}
// uchart,data数据
chartData = {
series: [
{
data: [
{ value: 0, name: 'Search Engine' },
{ value: 0, name: 'Direct' },
{ value: 0, name: 'Email' },
{ value: 0, name: 'Union Ads' },
{ value: 0, name: 'Video Ads' }
]
}
]
}
3、参数说明
uchart配置的eopts、chartData是将echart的option拆分为两部分。其中chartData为option中series,
其中eopts为option中除series其他配置项。
例如 echart 官网饼图配置项为:
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
minAngle: 10,
data: [
{ value: 0, name: 'Search Engine' },
{ value: 0, name: 'Direct' },
{ value: 0, name: 'Email' },
{ value: 0, name: 'Union Ads' },
{ value: 0, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
我们可将其拆为:
eopts = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
}
}
chartData = {
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
minAngle: 10,
data: [
{ value: 0, name: 'Search Engine' },
{ value: 0, name: 'Direct' },
{ value: 0, name: 'Email' },
{ value: 0, name: 'Union Ads' },
{ value: 0, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
如此uchart便可使用echarts官方图表了