echart-饼状图柱状图案例

$(function(){
    barCharts()
    pieCharts()
    /*1.注册人数  数据可视化*/
    /*1.1准容器渲染图标*/
    /*1.2准备数据 */
    /*1.3引入核心echarts文件*/
    /*1.4获取dom容器*/

})
var barCharts = function () {
    var data = [
        {
            name: '一月',
            value: '300'
        },
        {
            name: '二月',
            value: '200'
        },
        {
            name: '三月',
            value: '250'
        },
        {
            name: '四月',
            value: '500'
        },
        {
            name: '五月',
            value: '400'
        },
        {
            name: '六月',
            value: '350'
        }
    ]

    var xData = []
    var yData = []
    data.forEach(function (item,i) {
        xData.push(item.name)
        yData.push(item.value)
    })
    // 1、引入echarts.js
    // 2、找到要画图的容器
    var box = document.querySelector('.picTable:first-child')
    // 3、初始化插件
    var myChart = echarts.init(box)
    // 4、配置参数
    var options = {
        title: {
            text: '2020年注册人数'
        },
        legend: {
            //和底下name的值要一样，因为颜色是一样的
            data: ['注册人数']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: [
            {
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '注册人数',
                type: 'bar',
                barWidth: '60%',
                data: []
            }
        ]
    }
    // 5、设置参数
    options.xAxis[0].data = xData
    options.series[0].data = yData
    myChart.setOption(options);
}

var pieCharts = function () {
    var box = document.querySelector('.picTable:last-child')
    // 3、初始化插件
    var myChart = echarts.init(box)
    // 4、配置参数
    var options = {
        title: {
            text: '品牌销售占比',
            subtext: '2020年6月',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            //series.name = a
            //series.data.name = b
            //series.data.value = c
            //计算占比 = d
            formatter: '{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['李宁', '耐克', '阿迪', '匡威', '回力']
        },
        series: [
            {
                name: '比例',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '李宁'},
                    {value: 310, name: '耐克'},
                    {value: 234, name: '阿迪'},
                    {value: 135, name: '匡威'},
                    {value: 1548, name: '回力'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    myChart.setOption(options)
}