使用E-charts的方法-简单粗暴

1、首先页面引入jQuery

<script src="js/jquery.min.js"></script>

2、再引入echarts.min.js

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

3、指定一个容器装echarts图表

<div id="part1" style="width: 100%;height:240px;"></div>

4、

<script type="text/javascript">
    var dom = document.getElementById("part1");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '房源月趋势';

    option = {
        tooltip: {
            //坐标轴触发
            trigger: 'axis',
            formatter: function( params ) {
                return formatterTip(params,1);
            }
            //显示横向精确数值
            /*axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#8db0ef'
                }
            }*/
        },
        toolbox: {
            show: false,
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        textStyle: {
            color: '#466293'
        },
        /*legend: {
            data:['房源量']
        },*/
        xAxis: [
            {
                type: 'category',
                name: '(月)',
                data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 16,
                        color: '#466293',
                        fontFamily: 'DINProRegular'
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#00345c',
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#00345c',
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '（间）',
                min: 0,
                max: 1000,
                interval: 200,
                //y轴文字属性设置
                axisLabel: {
                    textStyle: {
                        fontSize: 16,
                        color: '#466293',
                        fontFamily: 'DINProRegular'
                    },
                    formatter: '{value}'
                },
                //y轴横向分割线颜色
                splitLine: {
                    show: true,
                    lineStyle: {
                       color: '#0c3668'
                    }
                },
                //y轴刻度线颜色
                axisTick: {
                    show: false,
                    lineStyle: {
                        color: '#00345c',
                    }
                },
                //y轴边框颜色
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#00345c',
                    }
                }
            },
           
        ],
        series: [
            {
                name:'房源量',
                type:'bar',
                data:[406,578,684,803,679,750,450,651,505,706,634,656],
                itemStyle: {
                    //柱条渐变色
                    color:new echarts.graphic.LinearGradient(
                        1, 0, 0, 1,
                        [
                            {offset: 0, color: '#019ada'},
                            {offset: 1, color: '#2b2fe1'}
                        ]
                    )
                }
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

 

//自定义柱状图tooltip，如果页面有多个柱状图需要自定义横坐标和纵坐标的话，没有则不需要
    function formatterTip(params,a) {
        var tip = '';
        //自定义左边的那个小圆圈
        var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f6c100"></span>';
        for (var i = 0; i < params.length; i++) {//这里是自己定义样式， params[i].marker 表示是否显示左边的那个小圆圈
            if (params[i].value != 0) {
                if(a == 1){
                    tip += params[i].name + '月' + '<br/>' + dotHtml + params[i].seriesName + '：' + params[i].value + '间';
                }else if(a==3){
                    tip += params[i].name + '月' + '<br/>' + dotHtml + params[i].seriesName + '：' + params[i].value + '万元';
                }else if(a==2){
                    tip += params[i].name + '月' + '<br/>' + dotHtml + params[i].seriesName + '：' + params[i].value + '%';
                }
            }
        }
        return tip;
    }

</script>