ECharts常用组件使用心得

       ECharts功能很强大，官网有专门的配置项说明，使用其实还是蛮方便的。只是不熟悉图表项对应的配置项名称，查找起来也是耗不少时间，后来网上找到ECharts6大公共组件详解。我常用到的是title、legend、tooltip、dataZoom、visualMap这五项，除此以外还常用到grid、xAxis、yAxis、series这四个配置项，各配置项在折线图中对应关系如下图：

     图一

<script src="js/lib/echarts/echarts.min.js"></script>
<div class="chartBox js-chartBox">
     <div class="box-bg-default">
           <div id="pressChart" style="width: 100%; height: 4.4rem;"></div>
     </div>
     <div class="cell-flex-start padder-trbl_diff text-xs-default">
           <div class="icon-circle margin-r_md">收缩压</div>
           <div class="icon-circle icon-circle_a margin-r_md">舒张压</div>
           <div class="icon-circle icon-circle_b">异常</div>
     </div>
</div>
<script>
$(function() {
    var pressChart = echarts.init(document.getElementById('pressChart'));
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {  //坐标轴指示器
                type : 'line',
                lineStyle: {  // 直线指示器样式设置
                    color: '#999',  // 纵向竖虚线的颜色
                    type: 'dashed'
                },          
            },  
        },
        toolbox: {
            show : false
        },
        grid:{
            left:'2%',
            right:'6%',
            top:'15%',
            bottom:40,
            containLabel:true,
        },
        xAxis : [
            {
                type: 'category',
                nameGap: 5, 
                name: '',
                boundaryGap : false,
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:"#e8e8e8"  //坐标轴x轴颜色
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                },
                axisTick:{
                    inside: true,  //坐标轴刻度线显示
                    lineStyle: {
                        color: '#e8e8e8'
                    }
                },
                splitLine:{show: false},//去除网格线
                data : ['12-07','12-08','12-09','12-10','12-11','12-12','12-13']
            }
        ],
        yAxis : [
            {
                type : 'value',
                min:20,  //y轴最小数值
                max:200,  //y轴最大数值
                name:'mmHg',
                nameGap: 13, 
                offset:-4,