VisualCharts可视化图表

基本用法：

创建实例: let visualCharts = McrbHttpClient.visualCharts(containerId);
渲染: visualCharts.render(options);
重绘赋值: visualCharts.setValue(data, xdata, ydata);

参数说明：

options参数说明：

请参考echarts可视化图表使用说明

options.data参数说明：

注释：ptions.data中也可自定义属性，自定义属性请参考echarts中option.series配置使用

饼状图 - 基础样式

                // 容器
                <div id="visualCharts1"></div>
                // 渲染
                let visualCharts = McrbHttpClient.visualCharts('visualCharts1');
                visualCharts.render({
                    type: 'pie',
                    data: [
                        { value: 600, name: '第一组' },
                        { value: 735, name: '第二组' },
                        { value: 580, name: '第三组' },
                        { value: 484, name: '第四组' },
                        { value: 300, name: '第五组' }
                    ],
                });
                // 赋值 - 重绘
                setTimeout(function(){
                    var setData1 = [
                        { value: 1, name: 'one组' },
                        { value: 3, name: 'two组' },
                        { value: 7, name: 'four组' },
                        { value: 9, name: 'five组' }
                    ]
                    visualCharts.setValue(setData1);
                },3000)

折线图 - 基础样式

                // 容器
                <div id="visualCharts2"></div>
                // 渲染
                let visualCharts2 = McrbHttpClient.visualCharts('visualCharts2');
                visualCharts2.render({
                    type: 'line',
                    xdata: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    data: [
                        {name: 'Email', data:[120, 132, 101, 134, 90, 230, 210]},
                        {name: 'Union Ads', data:[220, 182, 191, 234, 290, 330, 310]},
                        {name: 'Video Ads', data:[150, 232, 201, 154, 190, 330, 410]},
                        {name: 'Direct', data:[320, 332, 301, 334, 390, 330, 320]},
                        {name: 'Search Engine', data:[820, 932, 901, 934, 1290, 1330, 1320]}
                    ],
                });
                // 赋值 - 重绘
                setTimeout(function(){
                    var setData2 = [
                        {name: '11', data:[220, 182, 191, 234, 290, 330, 310]},
                        {name: '22', data:[150, 232, 201, 154, 190, 330, 410]},
                        {name: '33', data:[320, 332, 301, 334, 390, 330, 320]},
                        {name: '44', data:[820, 932, 901, 934, 1290, 1330, 1320]}
                    ]
                    xdata2 = ['Mon2', 'Tue2', 'Wed2', 'Thu2', 'Fri2', 'Sat2', 'Sun2'],
                    visualCharts2.setValue(setData2, xdata2);
                },5000)
            

柱状图 - 基础样式

                // 容器
                <div id="visualCharts3"></div>
                // 渲染
                let visualCharts3 = McrbHttpClient.visualCharts('visualCharts3');
                visualCharts3.render({
                    type: 'bar',
                    xdata: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    data: [
                        {name: 'Email', data:[120, 200, 150, 80, 70, 110, 130]},
                        {name: 'Union Ads', data:[120, 200, 150, 80, 70, 110, 130]},
                        {name: 'Video Ads', data:[150, 232, 201, 154, 190, 330, 410]},
                        {name: 'Direct', data:[320, 332, 301, 334, 390, 330, 320]},
                        {name: 'Search Engine', data:[120, 200, 150, 80, 70, 110, 130]}
                    ],
                });
                // 赋值 - 重绘
                setTimeout(function(){
                    var setData3 = [
                        {name: '11', data:[120, 132, 101, 134, 90, 230, 210]},
                        {name: '22', data:[220, 182, 191, 234, 290, 330, 310]},
                        {name: '33', data:[150, 232, 201, 154, 190, 330, 410]} ,
                        {name: '55', data:[920, 832, 901, 934, 1290, 1330, 1320]}
                    ]
                    xdata3 = ['Mon3', 'Tue3', 'Wed3', 'Thu3', 'Fri3', 'Sat3', 'Sun3'],
                    visualCharts3.setValue(setData3, xdata3);
                },5000)