echarts常用属性

项目使用了echarts的图表，经过这几天的使用，总结出平时项目中比较用的多的属性，在这里做一个分享

先给你们看一下我项目的数据看板ui图，页面结构也是比较复杂的

首先我们配置echarts，建议最好下载离线的js,优点就是加载比云网址快很多

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

 var  orderTime = echarts.init(document.getElementById('orderTime'));
                var option = {
                    grid:{
                        top:20,
                        left:100,
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: [00,01,02,03,04,05,06,07,08,09,10],
                        show:true,
                        axisTick:{
                            show:false,
                        },
                        splitLine:{
                            show:true,
                            lineStyle:{
                                color:['grey'],
                                width:1,
                                type:'solid'
                            }
                        },
                        nameTextStyle:{
                            color:'#ffffff'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        show:true,
                        axisTick:{
                            show:false,
                        },
                        splitLine:{
                            show:true,
                            lineStyle:{
                                color:['grey'],
                                width:1,
                                type:'dashed'
                            }
                        },
                        nameTextStyle:{
                            color:'#ffffff'
                        }
                    },
                    series: [
                        {
                            data:[1,2,3,4,5,6,7,8,9,10],
                            type: 'line',
                            areaStyle: {},
                            color:'#E03A69 '
                        },

                    ]
                };
                orderTime.setOption(option);

这样图表就生成了

 

常用属性：

grid：{ //图表距离div容器的距离
       top:可用具体数值，也可%
        bottom：可用具体数值，也可%
        right:可用具体数值，也可%
        left:可用具体数值，也可%
}
xAxis:{
        show:true,//是否展示x轴
        axisLine:{  
        }，
        splitLine:{//内部轴线的样式
           show:true, 
           lineStyle:{ 
              color,颜色
              width，宽度
              type:'solid'，实线/虚线 
           }
        }
}
yAxis:{}这个的配置和xAxis是差不多一样的，就不做重复
series: [
{//一个对象代表一个图表，多个图表显示在一个一根轴上，就在后面依次添加一个对象
    type: 'bar', //折线还是柱状或饼图
    data:[],显示的数值
    color: //折线还是柱状或饼图的颜色
    label: {
        show: true,
        position: 'right', 值的展示方式

  },
    barWidth:20,柱状图的宽度，
areaStyle: {}，面积阴影

},
]

 今天大概写到这里，等有空后我会在系统性的整理折线图，柱状图和饼图所用到的属性，再见，准备下班，哈哈哈哈