作为新入前端坑的技术小白，想要在这里把自己工作上应用到的插件，或者写过的方法整理出来，既是巩固了自己的记忆，又是温习了一遍知识。在这里，把我当时写代码时所理解的表述出来，如果有幸被各位大神看到，还望指点二三。多谢~~
一 创建echarts 实例
首先，要在自己的页面内引入相关的js，这个不用多说，echarts网站的教程上代码展示的很好，简单易懂。
二 配置指标项参数及数据
echarts为我们提供了能够满足各种需求的图形，如柱状图，饼图，气泡图，折线图等。每类图的option都有自己都有的参数项，我们可以根据不同的需要加入需要的参数项，这里也不多说明，以下将通过一个实例来具体应用具体说明。
三 显示图表
最后，就是通过mychart.setOption(option);展示出你的图表。（注：这里的mychart是展示图表的容器的id，option是配置项的名称）最后的最后关于显示图表，要插一句。当时我第一次接触echarts这个插件，忘记给放图表的div加宽高，以为它只要继承父亲的宽高就可以了，结果导致这个图表虽然在DOM树里已经存在这个节点，审查元素查找时也有了canvas，但是就是在页面中没有展示出来。所以对于小小白来说，一定要记得给它一个固定的宽高。关于这个固定的宽高，还有一个需要注意的就是，如果你给宽高设置的是100%，当你没有数据的时候，这个宽的100%会默认将单位转换为‘px’。（我记得这个小坑在我对接数据的时候浪费了我一些时间找出问题，终于在文档里找到原因，在这里提一嘴，避免掉坑。）
四 实例说明
先来说下需求：当时客户想要一个堆叠柱状图来展示业务数据，但是最下面的柱体用蓝色虚线表示最低人数，接着是一个白色虚线柱体来表示最低人数至最多人数。还有一个柱体来表示实际人数，这个实际人数有三种情况，分别是超移到出最高人数，低于最低人数及处于最高及最低人数之间。要求当我鼠标移上白色虚线框时，可以看到当前的人数区间，即最低人数和最多人数；当移至实际人数的柱体时要看到当前的实际人数，以及它与区间的差值。这里的不同类型的实际人数要求用不同颜色尽心区分，三种情况不可能同时存在。下面写了个假数据的，将样式展现出来。
var opData ={
"data":[
{
"xname":"A",
"daname":"实际人数（缺口人数）",
"yvalue":60,
"lessNum":20,
"minnum":80,
"maxnum":120,
"fzz":80,
"fzz2":40
},
{
"xname":"B",
"daname":"实际人数（超出人数）",
"yvalue":175,
"lessNum":25,
"minnum":90,
"maxnum":150,
"fzz":90,
"fzz2":60
},
{
"xname":"C",
"daname":"实际人数（之间人数）",
"yvalue":158,
"lessNum":0,
"minnum":120,
"maxnum":180,
"fzz":120,
"fzz2":56
},
]
};
function analysis(data){
var end_obj = [];
for(i in data){
var obj = {name:'', datas:[]};
obj.name = data[i].daname;
obj.value = data[i]['yvalue'];
obj.datas[0] = data[i]['lessNum'];
obj.datas[1] = data[i]['minnum'];
obj.datas[2] = data[i]['maxnum'];
end_obj.push(obj);
}
return end_obj;
}
var xData = [];
for(var i in opData.data){
xData.push(opData.data[i]["xname"]);
}
// 辅助线1
var fuzhu1 =[];
for(var j in opData.data){
var fz1 = {name:''};
fz1.name = "辅助";
fz1.value = opData.data[j]["fzz"]
fuzhu1.push(fz1);
}
// 辅助线2
var fz2 =[40,60,56];
var fuzhu2 =[];
for(var j in opData.data){
var fz2 = {name:'', mydata:[]};
fz2.name = "辅助";
fz2.value = opData.data[j]["fzz2"];
fz2.mydata[0] = opData.data[j]["minnum"];
fz2.mydata[1] = opData.data[j]['maxnum'];
fuzhu2.push(fz2);
}
var option = {
backgroundColor:"#0F2353",
tooltip: {
trigger: 'item',//是否节点触发
padding: 5,
formatter: function(a){
//2:max 1:min
var charv;
var result;
if(a.seriesName == "辅助"){
if(!("mydata" in a.data)){
}else{
return ('优秀人数:'+a.data.mydata[1]+'</br>最低人数:'+a.data.mydata[0]);
}
}else{
if(a.value > a.data.datas[2]){
// 超出人数
charv = a.value-a.data.datas[2];
result = '参数名称:'+a['name']+'</br>实际人数:'+a['value']+'<br>超出人数:'+charv;
}else if(a.value <a.data.datas[1]){
// 缺口人数
charv = a.data.datas[1] - a.value;
result = '参数名称:'+a['name']+'</br>实际人数:'+a['value']+'<br>缺口人数:'+charv;
}
else{
// 之间人数
charv =0;
result = '参数名称:'+a['name']+'</br>实际人数:'+a['value'];
}
return result;
}
}
},
legend: {
textStyle:{
color: '#fff'
}
},
xAxis: [
{
type: 'category',
axisLine:{
lineStyle:{
color:'#fff'
}
},
data:xData
}
],
yAxis: [
{
type: 'value',
name: '人数',
axisLabel: {
formatter: '{value} '
} ,
axisLine:{
lineStyle:{
color:'#fff'
}
}
}
],
series: [
{
name:'辅助',
type:'bar',
stack: '总量',
barWidth:'50px',
itemStyle:{
normal:{
barBorderColor:'rgba(19,240,221,1)',
borderType:"dashed",
color:'rgba(0,0,0,0)'
}
},
data:fz1,
zlevel:0,
},
{
name: '缺口人数',
type: 'bar',
stack: '缺口',
barWidth:'50px',
data: [60, 0, 0],
itemStyle:{
normal: {
barBorderWidth:15,
color: function(params) {
// build a color map as your need.
var colorList = ['#f40102','#7afc35','#3267ff'];
if(params.value <= params.data.datas[1]){
return colorList[0];
}else if(params.value>params.data.datas[1] && params.value < params.data.datas[2]){
return colorList[1];
}else{
return colorList[2];
}
}
}
},
barGap:'-100%',
zlevel:100,
},
{
// 优秀至最低人数
name: '辅助',
type: 'bar',
stack: '总量',
barWidth:'50',
label: {
normal: {
show: false,
position: 'insideRight'
}
},
itemStyle:{
color:'#334',
normal:{
color: 'transparent',
barBorderColor: '#fff',
// borderWidth:'20',
barBorderWidth:3,
barBorderRadius:0,
borderType:"dashed"
}
},
data: fz2,
zlevel:10
}
]
}
option.series[0].data = fuzhu1;
option.series[1].data = analysis(opData.data);
option.series[2].data = fuzhu2;
说明：
1.‘stack’:数据堆叠，在同一个类目轴上配置相同值，则数据可以堆叠展示
2. 'barBorderWidth' : 柱体边线的宽度
3.‘barGap’: 柱间距离，可以是‘px’,也可以是‘%’，正数向右，负值向左
4. ‘zlevel’: zlevel大的canvas在zlevel小的上面（这个当时是为了让被柱体盖住的虚线框hover可以触发，现在这种方法不需要这个配置项）
以上~~~