echarts插件使用初级的记录

多年前用过echars,近期又因为一些公司的业务原因导致又要画图啥的，所以又去研究了一下。现在只是记录一下，以免以后又要从最基础的开始。啊哈哈哈。

echarts：官网网址示例：很奇怪的是我家里的网是打不开这个网站的。公司的网可以。

Examples - Apache ECharts

官方示例已经很强大了，我相信你看完官网的示例，肯定知道该怎么做了。我这边所下载的官网的dll做了稍微的变动，主要是样式变动。

分享一下所画的图：

1.饼图：

 所涉及到的代码：

html：

js：

 //整体的年龄分布
        function GetAllAgeSub() {
            $.post('CartChartsService.ashx', { act: 'GetAllAgeSub' }, function (r) {
                if (typeof (r) != "undefined") {
                    if (r == "false") {
                        layer.msg('数据获取失败！', { icon: 5 });
                    }
                    else {
                        var myChart2 = echarts.init(document.getElementById('allagesub'), 'dark'); // dark 可尝试修改为 light
                        myChart2.setOption({
                            toolbox: {
                                feature: {
                                    dataView: { show: true, readOnly: false },
                                    magicType: { show: true, type: ['pie'] },
                                    restore: { show: true },
                                    saveAsImage: { show: true }
                                }
                            },
                            series: [
                                {
                                    name: '有效年龄段分布',
                                    type: 'pie',    // 设置图表类型为饼图
                                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                    data: r,
                                    label: {
                                        show: true,
                                        position: "outside",
                                        color: '#7F8FA4',
                                        fontSize: 12,
                                        formatter: '{b}:{d}%;数量:{c}'
                                    },
                                    labelLine: {
                                        show: true,
                                    }
                                }
                            ]
                        });
                    }
                }
            }, 'json');
        }
这个是调用的后台的api，后台出来的json格式的数据大概是这样的：

{[{"value":7410,"name":"18~35岁"},{"value":10202,"name":"36~45岁"},{"value":19616,"name":"46～65岁"}]} 

2.堆叠图

html：

 js：

//渠道量年龄分布统计
        function GetChannelAgeSub() {
            $.post('CartChartsService.ashx', { act: 'GetChannelAgeSub' }, function (r) {
                if (typeof (r) != "undefined") {
                    if (r == "false") {
                        layer.msg('数据获取失败！', { icon: 5 });
                    }
                    else {
                        var myChart6 = echarts.init(document.getElementById('channelagesub'));

                        var option6_1 = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    // Use axis to trigger tooltip
                                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                                }
                            },
                            toolbox: {
                                feature: {
                                    dataView: { show: true, readOnly: false },
                                    magicType: { show: true, type: ['bar'] },
                                    restore: { show: true },
                                    saveAsImage: { show: true }
                                }
                            },
                            legend: {},
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value'
                            },
                            yAxis: {
                                type: 'category',
                                data: r.title
                            },
                            series: [
                                {
                                    name: '18~34岁',
                                    type: 'bar',
                                    stack: 'total',
                                    label: {
                                        show: true
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: r.age0data
                                },
                                {
                                    name: '35~49岁',
                                    type: 'bar',
                                    stack: 'total',
                                    label: {
                                        show: true
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: r.age1data
                                },
                                {
                                    name: '50~65岁',
                                    type: 'bar',
                                    stack: 'total',
                                    label: {
                                        show: true
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: r.age2data
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart6.setOption(option6_1);

                    }
                }
            }, 'json');
        }

后台出来的数据源在浏览器上console.log为：

3.折柱混合图：

html：

 

js：

 //激活时间轴（以月为主）激活率
        function GetMonthNum() {
            $.post('CartChartsService.ashx', { act: 'GetMonthNum2' }, function (r) {
                if (typeof (r) != "undefined") {
                    if (r == "false") {
                        layer.msg('数据获取失败！', { icon: 5 });
                    }
                    else {
                        var myChart11 = echarts.init(document.getElementById('monthnum'));
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    crossStyle: {
                                        color: '#999'
                                    }
                                }
                            },
                            toolbox: {
                                feature: {
                                    dataView: { show: true, readOnly: false },
                                    magicType: { show: true, type: ['line', 'bar'] },
                                    restore: { show: true },
                                    saveAsImage: { show: true }
                                }
                            },
                            legend: {
                                data: ['每月售卡量', '当月售卡当月激活量', '每月叠加激活量']
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data:r.title,
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                }
                            ],
                            yAxis: [{
                                     type: 'value',
                                     name: '每月售卡量',
                                     data: [10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000]
                                },
                                {
                                    type: 'value',
                                    name: '当月售卡当月激活量',
                                    data: [10000, 20000, 30000, 40000, 50000, 60000, 70000,80000]
                                }],
                            series: [
                                {
                                    name: '每月售卡量',
                                    type: 'bar',
                                    tooltip: {
                                        valueFormatter: function (value) {
                                            return value;
                                        }
                                    },
                                    data: r.numdata1,
                                    stack: 'total',
                                    label: {
                                        show: true
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    max: 80000,
                                },
                                {
                                    name: '当月售卡当月激活量',
                                    type: 'line',
                                    tooltip: {
                                        valueFormatter: function (value) {
                                            return value;
                                        }
                                    },
                                    data: r.numdata2,
                                    stack: 'total',
                                    label: {
                                        show: true
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    max:80000,
                                },
                                {
                                    name: '每月叠加激活量',
                                    type: 'line',
                                    yAxisIndex: 1,
                                    tooltip: {
                                        valueFormatter: function (value) {
                                            return value;
                                        }
                                    },
                                    data: r.numdata3,
                                    stack: 'total',
                                    label: {
                                        show: true
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    max: 80000,
                                }
                            ]
                        };
                        myChart11.setOption(option);

                    }
                }
            }, 'json');
        }

后台出来的数据源在浏览器上console.log为：