echarts图表踩的坑 曲线图，折线图

看代码

show用于设置是否显示x轴那一条线 默认为true
Grid属性控制上下左右的间距
type:'dashed’虚线

interval:100, //值之间的间隔

y轴刻度线 “axisTick”:{ “show”:false }

grid: {//Grid属性控制上下左右的间距；有上下左右四个值right,top,bottom,left
   left: '4%',    
    containLabel: true  
 }

曲线图

在这里插入numberStatistics: function () {	// 折线图

                var myChartLine = echarts.init(document.getElementById('numberStatistics'));

                var option = {
                    title : {
                        // text: '报名人数',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal',
                            color: '#333'
                        },
                        y: 'top'
                    },
                    tooltip : {
                        trigger: 'axis',
                        backgroundColor: 'rgba(255,255,255,0.9)',
                        borderColor : '#EEE',
                        borderRadius : 4,
                        borderWidth: 1,
                        padding: 10,
                        textStyle: {
                            color: '#333'
                        }
                    },
                    grid: {//Grid属性控制上下左右的间距
                        left: '4%',    
                        containLabel: true  
                    },
                    calculable : true,
                    xAxis : [
                        {
                            name: '小时',
                            splitLine: {
                                lineStyle: {
                                    color: '#EEE'
                                }
                            },
                            type : 'category',
                            boundaryGap : false,
                            axisLine:{
                                show:false, //这里的show用于设置是否显示x轴那一条线 默认为true
                                lineStyle:{ //lineStyle里面写x轴那一条线的样式
                                    width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
                                }
                            },
                            data : ['0:00','2:00','4:00','6:00','8:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00']
                        },
                        
                        
                    ],
                    yAxis : [
                        {
                            name: '报名人数',
                            splitLine: {
                                lineStyle: {
                                    color: '#EEE',
                                    type:'dashed'//虚线
                                }
                            },
                            "axisTick":{       //y轴刻度线
                                "show":false
                            },
                            type : 'value',
                            axisLabel : {
                                formatter: '{value} '
                            },
                            axisLine:{
                                show:false, //这里的show用于设置是否显示y轴那一条线 默认为true
                                lineStyle:{ //lineStyle里面写y轴那一条线的样式
                                    // color:'#6FC6F3',//显示颜色
                                    width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
                                }
                            },
                            max: 1000,
                            min: 0,
                            interval:100, //值之间的间隔
                            //splitNumber: 5
                        }
                    ],
                    series : [
                        {
                            name:'报名人数',
                            type:'line',
                            data:[158, 161, 178, 440, 182, 673, 190,900,800,350,560,720],
                            smooth: true//曲线
                        }
                    ],
                    color: ['#00a0e9']
                };

                // 为echarts对象加载数据
                myChartLine.setOption(option);
            },代码片

折线图

坐标轴刻度与标签对齐

axisTick: {alignWithLabel: true }

x,y轴刻度线

“axisTick”:{ “show”:false }

值之间的间隔

interval:100,

最大值，最小值

max,min

var option = {
                    title : {
                        // text: '报名人数',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal',
                            color: '#333'
                        },
                        y: 'top'
                    },
                    tooltip : {
                        trigger: 'axis',
                        backgroundColor: 'rgba(255,255,255,0.9)',
                        borderColor : '#EEE',
                        borderRadius : 4,
                        borderWidth: 1,
                        padding: 10,
                        textStyle: {
                            color: '#333'
                        }
                    },
                    grid: {//Grid属性控制上下左右的间距
                        left: '4%',    
                        containLabel: true  
                    },
                    calculable : true,
                    xAxis : [
                        {
                            name: '论坛',
                            splitLine: {
                                lineStyle: {
                                    color: '#EEE'
                                }
                            },
                            max : 2,
                            min : 0,
                            splitNumber : 1,//间距
                            type : 'category',
                            // boundaryGap : false,
                            axisTick: {//坐标轴刻度与标签对齐
                                alignWithLabel: true
                            },
                            axisLine:{
                                show:false, //这里的show用于设置是否显示x轴那一条线 默认为true
                                lineStyle:{ //lineStyle里面写x轴那一条线的样式
                                    width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
                                }
                            },
                            data : ['新能源与未来','区块链与创新发展','冬奥与冰雪功能']
                        },
                        
                        
                    ],
                    yAxis : [
                        {
                            name: '报名人数',
                            splitLine: {
                                lineStyle: {
                                    color: '#EEE',
                                    type:'dashed'
                                }
                            },
                            type : 'value',
                            axisLabel : {
                                formatter: '{value} '
                            },
                            "axisTick":{       //y轴刻度线
                                "show":false
                            },
                            // "splitLine": {     //网格线
                                // "show": false
                            // },
                            axisLine:{
                                show:false, //这里的show用于设置是否显示y轴那一条线 默认为true
                                lineStyle:{ //lineStyle里面写y轴那一条线的样式
                                    // color:'#6FC6F3',//显示颜色
                                    width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
                                }
                            },
                            max: 500,
                            min: 0,
                            interval:100, //值之间的间隔
                            //splitNumber: 5
                        }
                    ],
                    series : [
                        {
                            name:'报名人数',
                            type: 'bar',
                            barWidth : 30,//柱图宽度
                            data:[158,350,260],
                            
                        }
                    ],
                    color: ['#00a0e9']
                };