记录一下开发中Echarts的应用

1、对这个趋势图进行总结

（１）图例组件legend

legend: {
    selectedMode: false, // 取消图例上的点击事件
    orient: 'horizontal',　// 横着展示
    top: 0,
    left: 15,
    padding: [1, 0],
    data: legentData, // legentData
    textStyle: {　// 字体样式变化
        fontSize: '11px',
        color: '#999999',
        lineHeight: 15,
    },
    icon: 'circle',
    itemGap: 8, // 图例每项之间的间隔
    itemHeight: 8, // 改变圆圈大小
    itemWidth: 8, // 改变圆圈的宽度
},
复制代码

• legend. type

图例的类型。可选值：’plain’普通图例。缺省就是普通图例。’scroll’可滚动翻页的图例。当图例数量较多时可以使用。

• legend. icon

图例项的 icon：’circle'(圆形)、’rect'(矩形)、’roundRect'(圆矩形)、’triangle'(三角形)、’diamond'(菱形)、’pin'(倒水滴)、’arrow'(箭头)、’none'(无)

• legend. data

图例的数据数组

• legend. orient

图例列表的布局朝向。’horizontal'(水平)、’vertical'(垂直)

• legend. padding

图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

• legend. itemGap

图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。

• legend. itemWidth

图例标记的图形宽度。（icon的宽度）

• legend. itemHeight

图例标记的图形高度。（icon的高度）

• legend. selectedMode 

图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。true的时候点击图例的某一项消失

（２）tooltip提示框组件

tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
        lineStyle: { // 指示线的样式设置
            color: 'rgba(0,0,0,0.1)'
        }
    },
    textStyle: {
        color: '#999999',
        fontSize: 10,
        lineHeight: 20,
    },
    backgroundColor: ' #FFFFFF',
    extraCssText: 'z-index:0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); padding: 5px 10px;', // 额外附加到浮层的 css 样式
    formatter: function(params) {// 提示框浮层内容格式器
        let domStr = '';
        let time = params[0].name;

        domStr += '<div>' +
        '<p style="line-height: 20px;">' + time + '</p>';
        for(let i = 0; i < params.length; i++) {
            let param = params[i];
            let seriesName = param.seriesName;// 图例名称
            let value = param.value;// y轴值
            if(!value) {
                return;
            }
            let mark = _this.handleTip(seriesName, Number(value));
            domStr +=
            '<div style="display: flex; align-items: center;  justify-content: space-between;font-size: 12px;line-height: 20px;">'
                + '<p>'
                    + '<span style="margin-right: 5px;width:24px;display: inline-block;font-weight: 700;'
                        + `${mark === '偏高' ? 'color:#FA6400' : mark === '偏低' ? 'color: #29CCB1' : 'color: #333333'}`
                        + '">'
                        + value
                    + '</span>'
                    + '<span style="font-size: 10px; padding: 1px 2px;margin-right: 10px;border-radius: 2px;'
                        + `${mark === '偏高' ? 'background: #FFF3EB;color:#FA6400' : mark === '偏低' ? 'background: #E6FAF7;color: #29CCB1' : ''}`
                        + '">'
                        + `${mark ? mark : ''}`
                    + '</span>'
                + '</p>'
                + '<p>' + seriesName + '</p>'
            + '</div>';
        }
        domStr += '</div>';
        return domStr;
    }
},
复制代码

（３）y轴

yAxis: {
    name: unitLabel[healthRecordType],　// 设置ｙ轴名称
    nameGap: 20, // 坐标轴名称与轴线之间的距离。
    nameTextStyle: {
        padding: [0, 0, 0, -20] // 四个数字分别为上右下左与原位置距离
    },
    min: 0,
    max: vMax,
    // max: Math.ceil(verticalMax * (1 + 0.2)),
    // splitNumber: 5,　// y轴分割线的个数
    interval: vMax / 5,
    type: 'value',
    axisTick: {// 在坐标轴上保证刻度线和标签对其
        show: false, // 去掉刻度线
        alignWithLabel: true
    },
    axisLine: {//　去掉y轴
        show: false,
        lineStyle: {
            color: '#999'
        },
        textStyle: {
            color: '#999',
            fontSize: '12',
            align: 'right'
        }
    }
},
复制代码

（4）x轴

对时间的处理

 // 获取当前时间的前三十天 方法
handleDate = () => {
    let date = [];
    let oneDay = 24 * 3600 * 1000;
    let base = new Date();
    for (var i = 0; i < 30; i++) {
        let model = base - oneDay * i;
        var now = new Date(model);
        let dateStr = moment(now).format('YYYY-MM-DD');
        date.push(dateStr);
    }
    return date.reverse();
}
复制代码

echarts 的x轴

xAxis: {
    type: 'category',
    boundaryGap: true, // 坐标轴两边留白策略
    interval: 'auto',
    data: dateList,
    show: true,
    axisTick: {// 在坐标轴上保证刻度线和标签对其
        show: false, // 去掉刻度线
        alignWithLabel: true
    },
    axisLine: {//　去掉x轴
        show: false,
        lineStyle: {
            color: '#999'
        },
        textStyle: {
            color: '#999',
            fontSize: '12',
        }
    },
    axisLabel: {// 对x轴的刻度线的字体进行处理
        formatter: function (value) {
            let dateStr = moment(value).format('MMDD');
            return dateStr;
        }
    }
},

复制代码

（5）grid

折线图的位置

grid: { 
    top: '20%', 
    left: '16px', 
    right: '16px', 
    bottom: '5%', 
    containLabel: true 
},
复制代码