Echart柱状图和饼状图

用文字记录自己的程序人生 有时候再项目中会应用到一些前端的知识，为了避免以后找不到这些知识，特此记录一下。

前端：

//简化代码
<style>
	.pillar{
            width: 50%;
            height: 430px;
            display: inline-block;
        }
     .pie{
         width: 50%;
         height: 430px;
         display: inline-block;
     }
</style>
<div>
<div class="pillar" id="div_pillar"></div>
<div class="pie" id="div_pie"></div>
<div>

引入echarts.js

<script type="text/javascript" src="../js/echarts/echarts.js"></script>
<script type="text/javascript">
	var pillar= document.getElementById("div_pillar");
    var myChart = echarts.init(pillar);
    var pie = document.getElementById("div_pie");
    var myChartPie = echarts.init(pie);
    //定义不同的颜色
    const colors = ['#CA8622','#61A0A8', '#BDA29A', '#D48265', '#6E7074','#749F83'];
    $(function(){
    	init_pillar();
    	init_pie();
    });
    function init_pillar(){
        var option = {
            color: colors,
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['直达','营销', '搜索', '邮件','联盟','视频']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [10, 20, 30, 40, 50, 60],
                type: 'bar',
                barWidth: '40',
                showBackground: false,

                label: {
                    show: true,
                    position: 'top'
                },
                itemStyle:{
                    normal:{
                        color: function(params){
                            return colors[params.dataIndex];
                        }
                    }
                }
            }]
        };
        myChart.setOption(option);
    }
    function init_pie(){
    	var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直达','营销', '搜索', '邮件','联盟','视频']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 10, name: '直达',itemStyle: {color:'#CA8622'}},
                        {value: 20, name: '营销',  itemStyle: {color:'#61A0A8'}},
                        {value: 30, name: '搜索',itemStyle: {color:'#BDA29A'}},
                        {value: 40, name: '邮件',  itemStyle: {color:'#D48265'}},
                        {value: 50, name: '联盟',  itemStyle: {color:'#6E7074'}},
                        {value: 60, name: '视频',  itemStyle: {color:'#749F83'}}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChartPie.setOption(option);
    }
</script>

动态填充数据
需要去请求数据库，返回的数据弄成数组的格式，自己放进去就好了，这里就不一一写了。