当前位置: 首页>后端>正文

关于uniapp使用ucharts使用说明

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官方图表了

https://www.xamrdz.com/backend/3kf1941514.html

相关文章: