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:'草稿的活动数 '+data.data.draftCount+'个', itemStyle:{ normal:{color:'#C33531'} }}, {value:data.data.auditingCount, name:'审核中的活动数 '+data.data.auditingCount+'个', itemStyle:{ normal:{color:'#D38265'} }}, {value:data.data.ongoingCount, name:'进行中的活动数 '+data.data.ongoingCount+'个', itemStyle:{ normal:{color:'#9FDABE'} }}, {value:data.data.hasEndCount, name:'已结束的活动数 '+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