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
