APIcloud echarts构建折线图

效果图.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：绘制面积区域

gitHub:https://github.com/caocao123/earchStudy