echarts之折线图、柱状图、饼图

折线图

<div id="main" style="width: 500px; height: 500px;"></div>

    <script src="./plugs/echarts/echarts.min.js"></script>
    <script>
         var myEcharts = echarts.init(document.getElementById('main'));
         myEcharts.setOption({
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['最高气温','最低气温'] 
            },  
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    name:'最高气温',
                    type:'line',
                    data:[11, 11, 15, 13, 12, 13, 10]    
                },
                {
                    name:'最低气温',
                    type:'line',
                    data:[1, -2, 2, 5, 3, 2, 0]                  
                }
            ]
         })
    </script>

柱状图

<div id="main" style="width: 500px; height: 500px;"></div>

    <script src="./plugs/echarts/echarts.min.js"></script>
    <script>
         var myEcharts = echarts.init(document.getElementById('main'));
         myEcharts.setOption({
            tooltip : {
                trigger: 'axis'
            },
             legend: {
                data:['蒸发量','降水量']
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'蒸发量',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],                
                },
                {
                    name:'降水量',
                    type:'bar',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                   
                }
            ]
         })
    </script>

饼图

<div id="main" style="width: 500px; height: 500px;"></div>

    <script src="./plugs/echarts/echarts.min.js"></script>
    <script>
         var myEcharts = echarts.init(document.getElementById('main'));
         myEcharts.setOption({
              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:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
         })
    </script>