echart图标js中的字段意思

var org='1';
function curOrgUp(org){
    var myChart = echarts.init(document.getElementById('container'));

    // 指定图表的配置项和数据
    var option = {
        //--------------    标题 title  ----------------
        title: {
            // text: '主标题',
            // textStyle:{                    //---主标题内容样式
            //     color:'#fff'
            // },

            // subtext:'副标题',            //---副标题内容样式
            // subtextStyle:{
            //     color:'#bbb'
            // }
            padding: [0, 0, 0, 0]                //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位

        },

        //----------------   图例 legend  -----------------
        legend: {
            type: 'plain',
            top: '20',                    //----图例相对容器位置,top\bottom\left\right
            selected: {
                '销量': true,            //----图例选择,图形加载出来会显示选择的图例,默认为true
            },
            textStyle: {                    //----图例内容样式
                color: '#30395E',                //---所有图例的字体颜色
            },
            tooltip: {                    //图例提示框,默认不显示
                show: true,
                color: 'red',
            },
            data: [                        //----图例内容
                {
                    name: '',
                    icon: 'circle',            //----图例的外框样式
                    textStyle: {
                        color: '#30395E',        //----单独设置某一个图例的颜色
                    }
                }
            ],
        },

        //--------------   提示框 -----------------
        tooltip: {
            show: true,                    //---是否显示提示框,默认为true
            trigger: 'item',                //---数据项图形触发
            axisPointer: {                //---指示样式
                type: 'shadow',
                axis: 'auto',

            },
            padding: 5,
            textStyle: {                    //---提示框内容样式
                color: "#fff",
            },
        },

        //-------------  grid区域  ----------------
        grid: {
            show: false,                    //---是否显示直角坐标系网格
            top: 20,                        //---相对位置,top\bottom\left\right
            containLabel: false,            //---grid 区域是否包含坐标轴的刻度标签
            tooltip: {                    //---鼠标焦点放在图形上,产生的提示框
                show: true,
                trigger: 'item',            //---触发类型
                backgroundColor: 'rgba(255,255,255,0.9)',
                textStyle: {
                    color: '#30395E',
                },
            }
        },

        //-------------   x轴   -------------------
        xAxis: {
            show: true,                    //---是否显示
            position: 'bottom',            //---x轴位置
            offset: 0,                    //---x轴相对于默认位置的偏移
            type: 'category',            //---轴类型,默认'category'
            // name:'',                //---轴名称
            nameLocation: 'end',            //---轴名称相对位置
            nameTextStyle: {                //---坐标轴名称样式
                color: "#30395E",
                padding: [5, 0, 0, -5],    //---坐标轴名称相对位置
            },
            nameGap: 15,                    //---坐标轴名称与轴线之间的距离
            axisLine: {                    //---坐标轴 轴线
                show: true,                    //---是否显示

                //------------------- 箭头 -------------------------
                // symbol:['none', 'arrow'],    //---是否显示轴线箭头
                //------------------- 线 -------------------------
                lineStyle: {
                    color: '#30395E',
                    width: 1,
                    type: 'solid',
                },
            },
            axisTick: {                    //---坐标轴 刻度
                show: true,                    //---是否显示
                inside: true,                //---是否朝内
                length: 3,                    //---长度
                lineStyle: {
                    //color:'red',            //---默认取轴线的颜色
                    width: 1,
                    type: 'solid',
                },
            },
            axisLabel: {                    //---坐标轴 标签
                show: true,                    //---是否显示
                inside: false,                //---是否朝内
                align: "center",
                verticalAlign: "middle",
                rotate: -50,
                //---旋转角度
                margin: 30,                    //---刻度标签与轴线之间的距离
                //color:'red',                //---默认取轴线的颜色
            },
            splitLine: {                    //---grid 区域中的分隔线
                show: false,                    //---是否显示,'category'类目轴不显示,此时我的X轴为类目轴,splitLine属性是无意义的
                lineStyle: {
                    //color:'red',
                    //width:1,
                    //type:'solid',
                },
            },
            splitArea: {                    //--网格区域
                show: false,                    //---是否显示,默认false
            },
            data: [],
        },

        //----------------------  y轴  ------------------------
        yAxis: {
            show: true,                    //---是否显示
            position: 'left',            //---y轴位置
            offset: 0,                //---y轴相对于默认位置的偏移
            boundaryGap: [0, "20%"],
            type: 'value',            //---轴类型,默认'category'
            // name:'',                //---轴名称
            nameLocation: 'end',            //---轴名称相对位置value
            nameTextStyle: {                //---坐标轴名称样式
                color: "#30395E",
                padding: [5, 0, 0, 5],    //---坐标轴名称相对位置
            },
            nameGap: 15,                    //---坐标轴名称与轴线之间的距离

            axisLine: {                    //---坐标轴 轴线
                show: true,                    //---是否显示

                //------------------- 箭头 -------------------------
                // symbol:['none', 'arrow'],    //---是否显示轴线箭头

                //------------------- 线 -------------------------
                lineStyle: {
                    color: '#30395E',
                    width: 1,
                    type: 'solid',
                },
            },
            axisTick: {                    //---坐标轴 刻度
                show: true,                    //---是否显示
                inside: true,                //---是否朝内
                length: 1,                    //---长度
                lineStyle: {
                    //color:'red',            //---默认取轴线的颜色
                    width: 1,
                    type: 'solid',
                },
            },
            axisLabel: {                    //---坐标轴 标签
                show: true,                    //---是否显示
                inside: false,                //---是否朝内
                rotate: 0,                    //---旋转角度
                margin: 8,                    //---刻度标签与轴线之间的距离
                //color:'red',                //---默认取轴线的颜色
            },
            splitLine: {                    //---grid 区域中的分隔线
                show: true,                    //---是否显示,'category'类目轴不显示,此时我的y轴为类目轴,splitLine属性是有意义的
                lineStyle: {
                    color: '#CFD3DC',
                    width: 1,
                    type: 'solid',            //---类型
                },
            },
            splitArea: {                    //--网格区域
                show: false,                    //---是否显示,默认false
            },
        },

        //------------ 内容数据  -----------------
        series: [
            {
                // name: '',                //---系列名称
                type: 'bar',                //---类型
                legendHoverLink: true,        //---是否启用图例 hover 时的联动高亮
                label: {                        //---图形上的文本标签
                    show: false,
                    position: 'insideTop',    //---相对位置
                    rotate: 0,                //---旋转角度
                    color: '#1F4AB1',
                },
                itemStyle: {                    //---图形形状
                    color: '#1F4AB1',
                    barBorderRadius: [0, 0, 0, 0],
                },
                barWidth: '24',                //---柱形宽度
                barCategoryGap: '25%',        //---柱形间距
                legend: {
                    data: ['数值'],
                    top: '30'
                },
                data: []
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    $.ajax({
        url: "/kms/knowledgeView/docOrgNumView.do",
        type: "POST",
        data:{type: org},
        dataType: "json",
        success: function (data) {
            option = {
                xAxis: {
                    data: data.datas.xAxis
                },
                series: [{
                    data: data.datas.data
                }]
            }
            myChart.setOption(option);
        }
    });
}

 2.controller返回时的数据

  @Override
    public Map<String, Object> docOrgNumData(KnowledgeSearchVo vo) {
//        Map<String,Object> datas=new HashMap<String,Object>();
//        List<KnowledgeViewModel> list=knowledgeViewDao.docOrgNum(vo);
//        List<String> xAxis=new ArrayList<String>();
//        List<Integer> data=new ArrayList<Integer>();
//        for(KnowledgeViewModel m : list){
//            xAxis.add(m.getOrgName());
//            data.add(m.getNum());
//        }
//        datas.put("xAxis",xAxis);
//        datas.put("data",data);

        Map<String,Object> datas=new HashMap<String,Object>();
        List<KnowledgeViewModel> list=null;
        //type:1为本年处所上传知识量、2为本年处所浏览知识量、3为本年处所下载知识量、4为本年处所总积分
        if (vo.getType().equals("1")){
            list=knowledgeViewDao.docOrgNum(vo);
        }else if (vo.getType().equals("2")){
            list=knowledgeViewDao.docOrgViewCount(vo);
        }else if(vo.getType().equals("3")){
            list=knowledgeViewDao.docOrgDownCount(vo);
        }else {
            list=knowledgeViewDao.docOrgTotalScore(vo);
        }

        List<String> xAxis=new ArrayList<String>();
        List<Integer> data=new ArrayList<Integer>();
        for(KnowledgeViewModel m : list){
            xAxis.add(m.getOrgName());
            data.add(m.getNum());
        }
        datas.put("xAxis",xAxis);
        datas.put("data",data);
        return datas;
    }

 

posted @ 2021-11-03 10:02  java璀璨小菜鸟  阅读(85)  评论(0)    收藏  举报