效果图.gif
如上效果图，对于如何讲解，我觉得这个没有什么好说的，个人感觉都是一些配置的信息技术。
后面我直接给出gitHub的地址信息
echarts配置文档：http://echarts.baidu.com/option.html#title
主要的JS代码
var resultData = '';//全局的数据
$(function(){
resultData = data;
histogram('histogramParent__zhexian', resultData.monthSalsePickPrePart[0]);
});
/**
* @date:2018/4/24 14:17
* @id 父元素的id
* @path obj 对象
*/
function histogram(id, obj) {
var yearList = [], qtyList = [];//年份，重量集合
var color = "#92DCFB";
for (var i in obj.detail) {
yearList.push(obj.detail[i].title);
qtyList.push(obj.detail[i].value);
}
//这里初始化echarts
var myChart = echarts.init($api.byId(id));
var app = {};
option = null;
option = {
tooltip: {//设置浮动框使用
trigger: 'axis',
axisPointer: {//坐标轴指示器配置项
type: 'line' //直线指示器
},
},
toolbox: {//是否显示工具
show: true,
},
grid: {//直角坐标系内绘图网格
left: '1%', //可以设置向右边移动一定距离
height: 200,//控制整个折线框的高度
containLabel: true//grid 区域是否包含坐标轴的刻度标签。
},
xAxis: [{//定义X轴
type: 'category',//坐标轴类型。
boundaryGap: false,//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
类目轴中 `boundaryGap` 可以配置为 `true` 和 `false`。默认为 `true`，这时候[刻度](http://echarts.baidu.com/option.html#xAxis.axisTick)只是作为分隔线，标签和数据点都会在两个[刻度](http://echarts.baidu.com/option.html#xAxis.axisTick)之间的带(band)中间
data: yearList,
axisLabel: {//刻度标签文字的颜色
color: color,
interval: yearList.length == 12 ? 2 : 0 //坐标轴刻度标签的显示间隔，在类目轴中有效。可以设置成 0 强制显示所有标签。
},
axisLine: {//坐标轴颜色
lineStyle: {//坐标轴颜色
color: color,
},
},
}],
yAxis: [{
name: '吨',
type: 'value',//坐标轴类型。
axisLabel: {//刻度标签文字的颜色
textStyle: {
color: color,
fontSize: '12'
},
},
axisLine: {
lineStyle: {//坐标轴颜色
color: color,
},
},
}],
series: [{
data: qtyList,
name: '出货量',
type: 'line',
showAllSymbol: true,//是否显示全部圆点，显示全部小标签
symbolSize: 5,//标记的大小
smooth: true,//是否平滑的显示
/* label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
normal: {
show: true,//是否显示标签。
position: 'insideBottom',//标签的位置。
fontSize: 12,//文字的字体大小
color: color,//文字的颜色。
formatter: function (value, index) {
return value.value;
}
},
},*/
itemStyle: {//线条的样式
normal: {
color: color,
lineStyle: {
width: 2,
}
}
},
areaStyle: {//区域填充样式
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(146, 220, 251, 0.8)'
}, {
offset: 1,
color: 'rgba(146, 220, 251, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
echarts.init($api.byId(id));是初始化echarts
tooltip与toolbox共同设置浮框的效果
grid:可以控制折线框的距左边距离右边的距离
height: 200:控制整个折线框的高度
containLabel:boolean值类型，控制是否要显示坐标轴上的刻度
xAxis：定义X轴
type: 'category': 类目轴，用于显示文字
data:数据集合
axisLabel:设置刻度标签属性
interval:坐标轴刻度标签的显示间隔，在类目轴中有效。可以设置成 0 强制显示所有标签。
axisLine:设置坐标轴属性
series://设置图标类型
type: 'line',设置图表类型为折线
showAllSymbol: true,显示折线图上所有小标签
itemStyle：定义折线样式
areaStyle：绘制面积区域
