E-charts使用总结

标签：折线   参数   SM   lse   center   ref   htm   代码   anim   

绘图网格图表的相关配置

• 配置代码

let opt = {
    // 控制整个图表
    grid:{
        top:20
    }
}

• 文档地址：http://echarts.baidu.com/option.html#grid

图表指标展示按钮位置设置：

配置代码：

let opt ={

    // 指标按钮控制： 可是设置的参数有 left 、top 、right、bottom ... 等等 
    legend:{
        bottom : 10
    },
};

• 文档地址 ： http://echarts.baidu.com/option.html#legend

图表内容区的配置 series

• 配置代码

let opt ={
    series: {
        type:‘line‘, // 图表类型必须配置
        
        smooth: false,   // 是否平滑过渡( 直线或者弧线 )
        
        lineStyle:{ //折线样式
            width:4
        },
        animation:true, // 绘制动画
        
        //折线图坐标小圆点 ，如果 false 则只有在 鼠标 hover 的时候显示。
        showSymbol: false
    },
};

坐标轴配置

• 配置代码

let opt = {
    legend:{
        bottom : 10
    },
    // X轴配置
    xAxis: {
        type: ‘category‘,                    
        boundaryGap: true,// 两侧留白
        
        splitLine:{show: false},//去除网格线
        
        // splitArea : {show : true},//保留网格区域 
        
        //坐标轴配置
        axisLine: {
            show:true,
            lineStyle: {
                // type: ‘solid‘,
                color: ‘#999999‘,//左边线的颜色
                // width:‘2‘//坐标线的宽度
            }
        },
        // 刻度线设置
        axisTick:{
            show:true,
            inside:true
        },
        // 坐标轴文字设置
        nameTextStyle:{
            align: ‘center‘
        }
    },
    // Y轴配置
    yAxis :{
        type : ‘value‘,
        splitLine:{show: false},//去除网格线
        axisLine: {
            show:true,
            lineStyle: {
                color:‘#999999‘,
            }
        }, 
        axisTick:{
            show:true,
            inside:true
        },
        min:10                                   
    }
}

• 文档地址：http://echarts.baidu.com/option.html#xAxis

E-charts使用总结

标签：折线   参数   SM   lse   center   ref   htm   代码   anim   

原文地址：https://www.cnblogs.com/koala0521/p/9177142.html