Echarts的一些总结

Echarts是专注做统计图表的插件，其本质是使用canvas进行图表的绘制。而如今它的属性和配置也是越来越丰富。基本的配置很简单，比如饼状图，就是数据和要显示的文字和颜色，柱状图，就是横纵坐标和数据。

eg：

饼图

statusDataoption = {
                            title : {
                                text: \'按状态统计\',
                                x: \'center\'
                            },
                            tooltip: {
                                trigger: \'item\',
                                formatter: "{b} : ({d}%)"
                            },
                            legend: {
                                orient: \'vertical\',
                                left: \'left\',
                                top:\'\',
                                data: [\'草稿的活动数\', \'审核中的活动数\', \'进行中的活动数\', \'已结束的活动数\']
                            },
                            series : [
                                {
                                    name: \'\',
                                    type: \'pie\',
                                    radius : \'55%\',
                                    center: [\'50%\', \'50%\'],
                                    data:[
                                        {value:data.data.draftCount, name:\'草稿的活动数\n\'+data.data.draftCount+\'个\',  itemStyle:{
                                            normal:{color:\'#C33531\'}
                                        }},
                                        {value:data.data.auditingCount, name:\'审核中的活动数\n\'+data.data.auditingCount+\'个\', itemStyle:{
                                            normal:{color:\'#D38265\'}
                                        }},
                                        {value:data.data.ongoingCount, name:\'进行中的活动数\n\'+data.data.ongoingCount+\'个\',  itemStyle:{
                                            normal:{color:\'#9FDABE\'}
                                        }},
                                        {value:data.data.hasEndCount, name:\'已结束的活动数\n\'+data.data.hasEndCount+\'个\',  itemStyle:{
                                            normal:{color:\'#61A0A9\'}
                                        }}
                                    ],
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: \'rgba(0, 0, 0, 0.5)\',
                                            label :{
                                                show : true ,
                                                formatter : \'{b}{d}%\'
                                            }
                                        }
                                    },
                                    //roleCode:[\'JS004\',\'JS005\',\'JS006\',\'JS007\',\'JS008\',\'JS001\',\'JS002\',\'JS003\']
                                }
                            ]
                        };
                        
                        statusChart.setOption(statusDataoption);

　　　　　　

　　　　　　statusChart.on(\'click\', function (params) {

　　　　　　　　window.location.href=url;
　　　　　　});

柱状图：

termDataoption = {
                            title : {
                                text: \'学年活动数及参与人数\'
                            },
                            tooltip : {
                                trigger: \'axis\'
                            },
                            legend: {
                                data:[\'活动数\',\'活动参与人数\']
                            },
                            toolbox: {
                                show : true,
                                //解决保存为图片显示不全
                                x:\'950\',
                                feature : {
                                    mark : {show: true},
                                    dataView : {show: true, readOnly: false},
                                    magicType : {show: true, type: [\'line\', \'bar\']},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : \'category\',
                                    data : data.data.termNames
                                }
                            ],
                            yAxis : [
                                {
                                    type : \'value\'
                                }
                            ],
                            series : [
                                {
                                    name:\'活动数\',
                                    type:\'bar\',
                                    data:data.data.qnums,
                                    stack: \'个\',
                                    //barWidth: 200/data.data.qnums.length,
                                    //barWidth: 30,
                                    /*markPoint : {
                                        data : [
                                            {type : \'max\', name: \'最大值\'},
                                            {type : \'min\', name: \'最小值\'}
                                        ]
                                    },*/
                                    markLine : {
                                        data : [
                                            {type : \'average\', name: \'平均值\'}
                                        ]
                                    },
                                    itemStyle:{
                                        normal:{
                                            color:\'#8FDCDD\',
                                            label: {
                                                show: true,
                                                position: \'insideBottom\',
                                                textStyle: {
                                                  color: \'green\'
                                                }
                                            }
                                        }
                                    }
                                },
                                {
                                    name:\'活动参与人数\',
                                    type:\'bar\',
                                    data:data.data.joinnums,
                                    stack: \'人\',
                                    //barWidth: 200/data.data.joinnums.length,
                                    //barWidth: 30,
                                    /*markPoint : {
                                        data : [
                                            {name : \'年最高\', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                                            {name : \'年最低\', value : 2.3, xAxis: 11, yAxis: 3}
                                        ]
                                    },*/
                                    markLine : {
                                        data : [
                                            {type : \'average\', name : \'平均值\'}
                                        ]
                                    },
                                    itemStyle:{
                                        normal:{
                                            color:\'#D16E6B\',
                                            label: {
                                                    show: true,
                                                    position: \'insideBottom\',
                                                    textStyle: {
                                                      color: \'green\'
                                                    }
                                                }
                                        }
                                    }
                                }
                            ],
                            /*dataZoom: [
                                {
                                    type: \'slider\',
                                    show: true,
                                    xAxisIndex: [0],
                                    handleSize: 20,//滑动条的 左右2个滑动条的大小
                                    height: 8,//组件高度
                                    left: 30, //左边的距离
                                    right: 40,//右边的距离
                                    bottom: 30,//右边的距离
                                    handleColor: \'#ddd\',//h滑动图标的颜色
                                    handleStyle: {
                                        borderColor: "#cacaca",
                                        borderWidth: "1",
                                        shadowBlur: 2,
                                        background: "#ddd",
                                        shadowColor: "#ddd",
                                    },
                                    fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                        //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                                        //给第一个设置0，第四个设置1，就是垂直渐变
                                        offset: 0,
                                        color: \'#1eb5e5\'
                                    }, {
                                        offset: 1,
                                        color: \'#5ccbb1\'
                                    }]),
                                    backgroundColor: \'#ddd\',//两边未选中的滑动条区域的颜色
                                    showDataShadow: false,//是否显示数据阴影 默认auto
                                    showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                                    handleIcon: \'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z\',
                                    filterMode: \'filter\',
                                },
                                //下面这个属性是里面拖到
                                {
                                    type: \'inside\',
                                    show: true,
                                    xAxisIndex: [0],
                                    start: 1,
                                    end: 100
                                }
                            ]*/
                        };
                        termChart.setOption(termDataoption);

其中柱状图有自带的右上角工具栏，可以转换折线图和查看数据，保存为图片等。

在开发中遇到一些问题：

首先是保存为图片的图标的title，会显示不全，解决方法是如上的给其设置一共x宽度，根据自身设置的图表宽度和需要进行设置；

其次是饼图的一些自定义formatter；再次是柱状图的显示具体数据（鼠标移动上去也会显示数据），数据的显示位置设置--echarts bar series下的label position：inside，top，bottom，left，right。即上中下左右，还可以对其进行组合，如insideBottom。需要说明的一点就是设置insideTop的时候，如果数据较小或者为0，那么会出现文字跑到坐标轴下方去了甚至和X轴上的文字重合。当然这些也可以通过一些稍微复杂的自定义配置进行避免。

最后就是宽度问题，如果X轴已知，就不需要考虑这些，直接设置固定的宽度或自适应即可，而对于如果X轴也未知的情况下，显然设置固定宽度不太可行，除非设置超出滚动和画布的动态宽度，若不设置barWidth，则组件会自己自适应设置宽度，我们当然也可以自己做自适应，拿一个宽度除以数据的数量，或者其他更精确的公式。

与此同时就会考虑到滚动条，组件有自带的dataZoom可以进行设置。

 

此处也引用一处教详细的echarts笔记

https://www.cnblogs.com/goloving/p/9008165.html