Echarts简单调用

柱状图

option = {
        color: ['#a02311','#2f4554'],//自定义颜色
        tooltip: {
            trigger: 'axis',
             //formatter: '{b} <br/> {a0}: {c0}%<br/>{a1}: {c1}% <br/>' //堆叠图，鼠标悬停数据后添加%
            formatter: function (params,ticket,callback) {//堆叠图，鼠标悬停数据后添加%，并且区分颜色
                var res = params[0].name;
                for (let i = 0, l = params.length; i < l; i++) {
                    res += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%';
                }
                return res;

            }
        },
        legend: {
            data: ['预算', '实际'],//与series中的name一一对应
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                show: true,
                interval:0,
                formatter:function(params) {//横坐标字数过多换行显示
                    var newParamsName = "";
                    var paramsNameNumber = params.length;
                    var provideNumber = 4;  //每块一行显示几个字
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "";
                            var start = p * provideNumber;
                            var end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr;
                        }

                    } else {
                        newParamsName = params;
                    }
                    return newParamsName
                }
            },
            data: ['电脑设备','电器设备','办公材料','电子设备','办公家具','通讯设备','软件','材料费','工本费','运输费','建筑材料','人力资源','其他零星','合计']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [{
            name: '预算',
            data: [10, 50, 15, 80, 70, 100, 90,100, 20, 50, 80, 70, 80, 30],
            type: 'bar',
            barGap: '-100%',//添加此配置项即为重叠效果
            //stack: 'one',//series的stack名字一样时为堆叠效果
        },{
            name: '实际',
            data: [100, 30, 50, 80, 70, 80, 30,80, 40, 50, 80, 70, 80, 100],
            type: 'bar',
            //stack: 'one',
        }]
    }

饼图

option = {
    title : {
            show: true,
            text: '饼图',
            x: 'center',
            //backgroundColor: '#f8ac59',//字体背景颜色
            textStyle:{//字体样式
                fontSize:24,
                textShadowColor: '#f8ac59',
                //color: '#FFFFFF',//字体颜色
                //fontWeight:'600',
            }
        },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie', 
            minAngle:15,//最小角度（最小模块占用饼图的角度）
            startAngle:120,//旋转
            radius: ['50%', '70%'],
            center : ['50%', '50%'],//圆的位置：【距左右的位置，距上下的位置】
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,//不显示
                    position: 'inner',//标签内置
                    formatter: '{b}: {d}%'//标签显示效果
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
}

折线图

option = {
    //横坐标可拖动效果，多用于横坐标数据很多的情况
    dataZoom: [
        {
            show: true,
            realtime: true,
            start: 0,
            end: 15
        },
        {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 15
        }
    ],
    xAxis: {
        type: 'category',
        //坐标轴刻度标签的相关设置。
        axisLabel: {
            interval: 0,
            rotate: "25"//横坐标旋转显示
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
            type: 'value',
            scale:true//scale设置为true后，坐标刻度不会强制包含零刻度。（注意：只在数值轴中（type:'value'）中有效）
            //设置纵坐标的最小值和最大值分别为数据的最小最大值
            //用于数据差距极小的数据显示波动
            /*min: function(value) {
                if(value.min == value.max){
                    return  0;
                }else{
                    return value.min;
                }
            },
            max: function(value) {
                if(value.min == value.max){
                    return  2;
                }else{
                    return  value.max;
                }
            }*/
        },
    series: [{
        data: [1.1120, 1.1121, 1.1122, 1.1130, 1.1125, 1.1126, 1.1122],
        type: 'line'
    }]
};

JS调用

...
<div id="pie" style="height: 300px"></div>
...

<script src="${ctxPath}/static/modular/common/shine.js"></script>//引入的echarts主题
<script>
var pie = echarts.init(document.getElementById('pie'));
//var pie = echarts.init(document.getElementById('pie'),'shine');调用主题
function getPie() {
    var ajax = new $ax(Feng.ctxPath + "后台URL", function (data) {
    var categories = [];
    var values = [];
    for (var i = 0; i < data.length; i++) {
        //数据拼接
        var dataArray = {};
        categories.push(data[i].A);
        dataArray.name = data[i].A;
        dataArray.value = data[i].B;
        values.push(dataArray);
    }
    option.title.show = false;
    option.legend.show = true;
    option.legend.data = categories;
    option.series[0].data = values;
    option.series[0].label.normal.show = false;
    option.series[0].center = ['55%', '50%'];
    pie.setOption(option1, true);//加上true可以使每次刷新数据时，图例会重绘
}, function (data) {
    Feng.error("获取***失败!");
});
    ajax.set("date",$("#date").val());//参数传递
    ajax.start();
}
//当调整浏览器窗口的大小时，发生 resize 事件。
window.addEventListener("resize", function () {
    pie.resize();
});
$(function () {
    getPie();
});
</script>