Echarts柱状图，折线图，饼图使用

柱状图:

    function roomIncrease() {
        var myCharts = echarts.init(document.getElementById('roomincrease'))
        $.ajax({
            type: "Post",
            url: "Data/Enter", 
            datatype: "Json",
            success: function (data) {
                var cityname = [];
                var countnum = [];
                for (var i = 0; i < data.length; i++) {
                    var name = data[i].cityName;
                    var num = data[i].countNum;
                    cityname.push(name);
                    countnum.push(num);
                }
                option = {
                    title:{
                        show:true,
                        link:'https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gbk&word=%B6%FE%D6%F9%D7%D3&fr=ala&ori_query=%E4%BA%8C%E6%9F%B1%E5%AD%90&ala=0&alatpl=sp&pos=0&hs=2&xthttps=111111'
                    },
                    tooltip:{
                        show:true,
                        trigger:'axis',
                        formatter:function(params){
                            var relVal =params[0].name;
                            relVal +=params[0].value;
                            return relVal;
                        },
                        showDelay:0,
                        hideDelay:50,
                        transitionDuration:0,
                        backgroundColor:'rgba(50,50,50,1)',
                        borderColor:'#aaa',
                        showContent: true,
                        borderRadius:8,
                        padding:10
                    },
                    dataZoom:[   *//控制图表下方拖拉条*
                    {
                        type:'slider',
                        show:true,
                        height:20,
                        backgroundColor:'rgba(24,144,255,0.3)',
                        borderColor:'#0a2b24'
                    }
                    ],
                    axisPointer:{
                        type:'line',
                        axis:'auto'
                    },
                    legend:{
                        data: ['城市'],
                    },
                    xAxis:{
                        data:cityname
                    },
                    yAxis: {
                        name:"数量",
                    },
                    series:[{
                        name:'销量',
                        type:'bar',
                        barMaxWidth:60,
                        data:countnum,
                        itemStyle:{
                            normal:{
                                color:new echarts.graphic.LinearGradient(0,0,0.5,1,[{
                                    offset:0,
                                    color:'rgba(24,144,255,1)'
                                },{
                                    offset:1,
                                    color:'rgba(24,144,255,.5)'
                                }]),
                                borderColor:'#23a5e2',
                                borderWidth:2,
                                barBorderRadius:[10,10,0,0],
                                shadowColor:'rgba(24,144,255,0.5)',
                                opacity:.6
                            },
                            emphasis:{
                                color:new echarts.graphic.LinearGradient(0,0,0,1,[{
                                    offset:0,
                                    color:'rgba(24,144,255,1)'
                                },{
                                    offset:1,
                                    color:'rgba(24,144,255,.1)'
                                }]),
                                borderColor:'#0ea4a6',
                                borderWidth:2,
                                barBorderRadius:[9,9,0,0],
                                shadowBlur:30,
                                shadowColor:'rgba(24,144,255,0.8)',
                                opacity:.7,
                                label:{
                                    show:true,
                                    textStyle:{
                                        color:'rgba(24,144,255,1)'
                                    }
                                }
                            }
                        },
                        markPoint:{
                            symbol: 'circle',
                            symbolSize:50,
                            symbolOffset: [0,0],
                            silent:true
                        }
                    }],
                    label:{
                        normal:{
                            show:true,
                            position:'top'

                        }
                    }
                };
                myCharts.setOption(option);
            }
        })
    }

饼图示例：
此位置有个下拉箭头，尽量使用高版本，此处无效果可能跟版本有关系

function roomtype() {
	var myCharts = echarts.init(document.getElementById('roomType'))
            $.ajax({
                type: "Post",
                url: "Data/Enter",
                datatype: "Json",
                success: function (data) {
                    var type = [];
                    var servicedata=[];
                    for(var i=0;i<data.length;i++){
                        var obj=new Object();
                        obj.value = data[i].countNum;
                        sourceType = cell_Source(parseInt(data[i].sourceType), 0, 0);
                        obj.name = sourceType;
                        servicedata[i] = obj;
                        var sourcetype = data[i].soureType;
                        type.push(sourcetype);
                    }
                    option = {
                        color: [ 
                            "rgb(85, 172, 238)",
                            "rgb(45,202,147)", 
                        ],
                        title: {
                            text: '增量房源类型占比',
                            x:'center',
                            top: 4,
                            textStyle: {
                                color: '#000'
                            }
                            },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c}个 ({d}%)"
                        },
                        legend: {
                            type:"scroll",
                            orient: 'vertical',
                            x: 'left',
                            data:servicedata,
                            height: 380,
                        },
                        series: [
                            {
                            name:'访问来源',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                center: ['55%', '65%'],
                                avoidLabelOverlap: false,
                                label: {
                                normal: {
                                    show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                    show: true,
                                        textStyle: {
                                        fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                normal: {
                                    show: false
                                    }
                                },
                                data:servicedata
                            }
                        ]
                    };
                    myCharts.setOption(option);
                }
            })
        }

柱图、折图、饼图的区别:
折线图:line; 柱状图:bar; 饼图：pie

本文为自我学习记录使用，参考了EChart官网案例
Echarts 官网：https://echarts.apache.org/examples/zh/index.html#chart-type-pie