Echars统计图的使用

V2AS问路

Echars统计图的使用

阅读原文时间：2023年07月11日阅读：2

第一步去官网挑选自己需要的图形了。官网地址：https://echarts.baidu.com/

第二步按照官网的demo，下载需要的js组件并放到自己的项目中。

第三步仿照demo创建需要的div，并在js中将方法原模原样的复制过去，运行测试是否能够在页面显示出来，以此来检查最基本的js组件有木有引对等最不应该犯得小错误。

第四步确定demo在自己的项目中可以正常显示之后，就可以对自己的数据进行处理了。按照demo的数据格式进行拼接，可以通过后台进行拼接，也可以在js中进行拼接。

以下是我个人对于基本的柱形图、饼状图、折线图的使用代码。

因为这是在原来项目上进行修改，而且项目比较老了，不想动后台，直接将后台传输到前台的页面在js中进行处理了。

柱形图：

后台返回到页面的信息如下

¨C13C¨C14C¨C15C¨C16C¨C17C¨C18C¨C19C¨C20C¨C21C¨C22C¨C23C¨C35C¨C36C¨C37C¨C38C¨C39C¨C40C¨C41C¨C42C¨C43C¨C44C¨C45C

jsp代码（片段）

js代码（片段）

                                    } else {  
                                        // 将旧标签的值赋给新标签  
                                        newParamsName = arrayObj;  
                                    }  
                                    //将最终的字符串返回  
                                    return newParamsName  
                        }

                    }\*/  
                },  
                yAxis: {},  
                series: \[{  
                    name: '备案通过节目和栏目',  
                    type: 'bar',  
                    itemStyle: {  
                        normal:{  
                            color:"#4169E1"  
                        }  
                    },  
                    data: **arrayVal //重点拼接数据之二**  
                }\]  
            };  
            // 使用刚指定的配置项和数据显示图表。  
           ** myChart.setOption(option);**  
    }else{  
        alert("暂无数据")  
    }  
    }  
});

};

饼状图：

后台返回到页面的数据

|11427.842

jsp代码同上

js代码：

            seriesdata += '{"name":"' + strName.match(reg3).toString().replace(/\\'/g,"") + '","value":' + strNum.substring(6,strNum.length) + '},';  
            //console.log(strName);

            //arrayData.push("{"+strNum+","+strName+"}");  
        }  
         if (legenddata.length > 1) {  
             legenddata = legenddata.substring(0, legenddata.length - 1);  
         }  
         if (seriesdata.length > 1) {  
             seriesdata = seriesdata.substring(0, seriesdata.length - 1);  
         }  
        legenddata += '\]';  
        seriesdata += '\]';

        var arr1 = res.split('|')\[0\];  
        var arr2 = res.split('|')\[1\];  
        var caption = '类型平均时长统计';  
        if(avgOrSumTime == 1){  
         caption = '类型总时长统计';  
        }else if(avgOrSumTime == 2){  
             caption = '节目总备案时长';  
        }else if(avgOrSumTime == 3){  
             caption = '栏目总备案时长';  
        }else if(avgOrSumTime == 4){  
             caption = '全部总备案时长';  
        }  
        option = {  
                title : {  
                    text: '类型总时长统计',  
                    subtext: '',  
                    x:'center'  
                },  
                tooltip : {  
                    trigger: 'item',  
                    formatter: "{a} <br/>{b} : {c} ({d}%)"  
                },  
                legend: {  
                    orient: 'vertical',  
                    left: 'left',  
                    data: $.parseJSON(legenddata)  //需要重点拼接的数据之一  
                },  
                series : \[  
                    {  
                        name: '数据来源',  
                        type: 'pie',  
                        radius : '55%',  
                        center: \['50%', '60%'\],  
                        data: $.parseJSON(seriesdata),  //需要重点拼接的数据之二  
                        itemStyle: {  
                            emphasis: {  
                                shadowBlur: 10,  
                                shadowOffsetX: 0,  
                                shadowColor: 'rgba(0, 0, 0, 0.5)'  
                            }  
                        }  
                    }  
                \]  
            };  
         myChart.setOption(option);  
    }else{  
        alert("暂无数据")  
    }  
    }  
});

};

折线图：

后台返回页面数据（片段）：

¨C76C¨C77C¨C78C¨C79C¨C80C¨C81C¨C82C¨C83C¨C84C¨C85C¨C86C¨C87C¨C88C¨C89C¨C90C¨C91C¨C92C¨C93C¨C94C¨C95C¨C96C¨C97C¨C98C¨C99C¨C100C¨C101C¨C102C¨C103C¨C104C¨C105C <set …