echart图表折线图的学习

echart图表折线图的学习

echart图表折线图的学习

• 首先需要引入Echart
  
• Echart需要一个有宽高的正常容器
  
  *我们接下来要在js中获取DOM然后进行下一步操作
  
  ehcart.init()
  *获取了DOM我们要开始设置Echart内容，然后放在DOM中
  
  var option ={} 这个对象就是我们来设置echart内容的对象，所有操作都在这里进行

---

• 整体效果
  
  要注意::javascript的type是 javascript

上面的就是基本配置，配置好后就可以上手学习了

下面展示一些 代码片。

 var myApp = echarts.init(document.getElementById('app'));
        var option ={
                title:{
                    text:'折线图',
                    subtext:'没啥写的',//副标题
                    x:'center'
                },
                legend:{
                    data:['llr'],
                    // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平）| 'vertical'（垂直）
                    orient:'horizontal' ,
                    // 默认放置全图居中     x坐标
                    // x:'left',
                    // 默认放置全图顶端  Y坐标
                    // y:'top'
                },
                grid:{//直角坐标系网格
                    top:'16%',//   y:'16%'
                    left:'3%',
                    right:'8%',
                    bottom:'3%',
                    containLabel:true//grid区域是否包含坐标轴的刻度标签。
                },
                tooltip:{// 坐标轴指示器配置
                    // 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                    // 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                    // 'none'什么都不触发   trigger触发类型
                    trigger:'axis',//效果是一条线
                    position:['50%','50%'],//提示框信息出现的位置，默认是跟随鼠标显示
                    borderWidth:2,
                    padding:[5,10],
                    borderColor:'yellow',
                    textStyle:{
                        color:'red',
                        fontSize:15,
                        height:20,
                        lineHeight:20,
                    },
                    axisPointer:{
                        type:'cross',//X Y 指示器类型  默认直线   line 直线  shadow阴影  none无   cross十字准星
                        // axis:'y',//致使其坐标轴，默认auto   x  y  radius angle auto 就是横竖选择(没事还是默认好)
                        snap:false,//指示器自动吸附 到点上  ，默认是自动
                        label:{//指示器文本样式
                            color:'#0f0',
                            // show 
                            margin:3
                        },
                        animation:true,
                        animationThreshold:200
                    }
                },
                xAxis: {
                    name:'周几',
                    type: 'category',//类目轴    坐标轴类型
                    boundaryGap: true  ,//坐标轴两边留白，就是数据不粘着Y轴显示
                    axisTick:{//底部 x 坐标轴刻度相关设置
                        show:true,
                        alignWithLabel:true,//在boundaryGap为true时才能生效 可以保证刻度线和标签对齐
                        interval:1,//隔一个刻度显示
                        length:10,//刻度长短
                        inside:true,//坐标轴刻度是否朝内   默认朝外
                        lineStyle:{
                            // color:'',
                            shadowBlur:10,//阴影  必须要有阴影颜色
                            shadowColor:'red',
                            shadowOffsetX:70,//阴影偏移距离
                        }
                    },
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLine:{//坐标轴轴线设置 x轴线设置
                        // show:
                    
                        lineStyle:{//坐标轴样式
                            // 设置x轴颜色
                            color:'#912CEE',
                            shadowBlur:10,
                            // shadowColor:'#0f0',
                            // opactiy:0.5
                        }
                    },
                    
                    nameLocation:'center',//坐标轴名称 Name '周几' 位置   start  center end
                    nameTextStyle:{//坐标轴名称样式设置
                        color:'red',
                        fontStyle:'italic',
                        fontSize:20,
                        // align:'left'//文字水平对齐方式，默认auto
                        // verticalAlign:'top',
                        // backgroundColor:'red' 
                    },
                    nameGap:-100,  //坐标轴名称与轴线之间的距离
                    inverse:true,//反向坐标轴
                    // splitNumber:10,  //在类目轴中无效   坐标轴的分割段数
                }, 
                yAxis: {
                    
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    name:'访问量',
                    markArea:{//标域
                        data: [ [{
                            name: '标域',
                            // x:'20%', //标域位置
                            // y:'20%',
                            xAxis: 'Tue'
                        }, {
                            xAxis: 'Fri'
                        }], [{
                            name: 'Series.markArea',
                            xAxis: 'Sun'
                        }, {
                            xAxis: 'Sat'
                        }] ]
                    }
                }]
            }
        myApp.setOption(option);

多学习多总结多挑战