ECharts3.0折线图------------手把手教你每一项的样式设计

刚到公司接到一个几乎全是图表的项目,之前从没接触过EChart,不得以慢慢学

现在把我的经验贡献出来

代码及详细解释如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>AzzanTest</title>  
 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>  
</head>  
<body>

<div id="main" style="width: 250px;height:200px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            tooltip : {  //提示框
                trigger: 'axis',  //触发类型(坐标轴触发)
                alwaysShowContent:false,  //是否永远显示提示框的内容
                backgroundColor:'rgba(32,174,252,0.7)', //提示框的背景颜色
                textStyle:{  //提示框浮层的文本样式


                },
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    name:'(月)',        //X轴名称单位
                    nameLocation:'end', //名称的位置
                    nameTextStyle:{     //名称的样式
                        color:'#999',
                        fontSize:'12px'
                    },
                    nameGap:0,  //名称与X轴的距离
                    boundaryGap: true,//坐标的刻度是否在中间
                    min:'3',//坐标轴刻度最小值
                    max:'dataMax', //坐标轴刻度的最大值
                    axisLine:{//坐标轴线条相关设置(颜色等)
                        lineStyle:{
                            color:'#ccc'
                        }
                    },
                    axisTick:{ //坐标轴刻度相关设置
                        length:'0' //我把长度设置成0了
                    },
                    axisLabel:{ //坐标轴刻度标签
                        margin:7, //刻度标签与轴线之间的距离
                        textStyle:{
                            color:"#999",  //坐标轴刻度文字的颜色
                            fontSize:'12px' //坐标轴刻度文字的大小
                        }
                    },
                    data : ['3','4','5','6','7','8','9','10']

                }
            ],//X轴设置
            yAxis : [
                {
                    type : 'value', //类型数值轴
                    name:'(人)',    //坐标轴名称
                    nameTextStyle:{     //名称的样式
                        color:'#999',
                        fontSize:'12px'
                    },
                    nameGap:3,  //名称与Y轴的距离
                    axisTick:{ //坐标轴刻度相关设置
                        length:'0' //我设置成0了
                    },
                    axisLine:{//坐标轴线条相关设置(颜色等)
                        lineStyle:{
                            color:'#ccc'
                        }
                    },
                    axisLabel:{//坐标轴标签相关设置,距离颜色等
                        margin:7,
                        //formatter: '{value} °C',//标签内容内置的格式转化器比如这个表示在后面加一个c
                        textStyle:{
                            color:"#999",  //坐标轴刻度文字的颜色
                            fontSize:'12px' //坐标轴刻度文字的大小
                        },
                    },
                    splitLine:{    //坐标轴分隔线。默认数值轴显示，类目轴不显示。
                        show:false
                    }
                }
            ],
            grid:{ //直角坐标系内绘图网格
                left:36  //由于1000显示被挡住了,所以我让他左移36px;这个功能类似于paddingleft
            },
            series : [  //系列列表
                {
                    name:'人',   //系列名称 用于tooltip的显示
                    type:'line',
                    data:[360, 500, 400, 600, 530, 840, 540,350],
                    itemStyle:{  //折线拐点的样式
                        normal:{
                            color:'#20aefc',  //折线拐点的颜色
                        }
                    },
                    lineStyle:{  //线条的样式
                        normal:{
                            color:'#20aefc',  //折线颜色
                        }
                    },
                    areaStyle:{ //区域填充样式
                        normal:{
                            //线性渐变
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0, color: '#b1e3fe' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#fff' // 100% 处的颜色
                            }], false)
                        }
                    },
                    markPoint : { //图标标注
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }

            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</div>

</body>  
</html>

ECharts3.0折线图------------手把手教你每一项的样式设计

相关推荐