一、引入Echarts

<script src="echarts.js"></script>

二、Bar 柱状图

<!--创建显示DOM-->
<div id='main' style="width: 600px;height:400px;"></div> 

<script type='text/javascript'>
    var mycahrt=echarts.init(document.getElementById('main'),'dark');   //显示 id main  dark 主题
    var option={
        backgroundColor: '#2c343c',   //背景
        title: {
            text: 'ECharts标题'          //标题,可选
            },
        tooltip: {},
        legend: {                     //可选
            data:['销量','数量'],           //柱坐标
            top:'bottom'         //显示位置
            },
        xAxis:{
            splitLine: {show: false},   //是否显示网格线，默认不显示，可选
            data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {splitLine: {show: true},},                                       //默认显示，可选
        series:[{
            name:'销量',
            type:'bar',
            label:{show:true,position: 'top',},          //柱值显示，默认不显示，position:显示位置
            data:[7,{
                value:10,
                itemStyle: {
                    color: '#91cc75'
                 }
            },4,6,8,9,10]
            },
            {
            name:'数量',
            type:'bar',
            label:{show:true,position: 'top',},
            data:[7,4,6,8,9,1],
            itemStyle: {                                               //柱显示颜色
                color: '#a90000'
            }
            }
        
        ]
    };
    mycahrt.setOption(option);     //生成图表
</script>

三、Pie 饼状图

<script type='text/javascript'>
   var mychart = echarts.init(document.getElementById('main'),'dark');
   var option = {
       title: {
           text: 'ECharts标题',      //标题,可选
           },
       roseType: 'radius',
       tooltip: {trigger: 'item'},    //鼠标标签
       legend: {                     //可选
           data:['打游戏','刷剧','学习'],           //片区坐标
           top:'bottom'         //显示位置,bottom 显示下方
           },
       label: {                               //字体标签
           label:{show:true},
           color: 'rgba(255, 255, 255, 0.3)'
       },
       series:[{
           name:'时间',
           type:'pie',
           data:[{value:108,name:'打游戏',itemStyle:{color:'#a90000'}},
               {value:80,name:'刷剧'},
               {value:90,name:'学习'}].sort(function (a, b) { return a.value - b.value; }),  //排序
           label: {formatter: '{b}:{c}({d}%)'}   //显示百分比
       }]
   };
   mychart.setOption(option)
   
</script>

四、折线图

<script type='text/javascript'>
    var mychart = echarts.init(document.getElementById('main'),'dark');
    var option = {
        title:{text:'逾期率'},   //标题
        //tooltip:{},
        legend: {                     //可选
            data:['逾期率','不良率'],           //坐标
            top:'bottom'         //显示位置
            },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series:[{
            name:'逾期率',
            type:'line',
            label:{show:true},                 #数值显示，默认不显示
            data:[1,3,4,6,2,1]
        
        },
        {   name:'不良率',
            type:'line',
            label:{show:true},
            data:[2,3,7,6,5,3]}]
    
    };
    mychart.setOption(option);


</script>