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