关于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官方图表了
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容