echarts属性集合和踩过的坑

众所周知，用echarts做报表对开发者是很方便的事情，我们只需要在不同的项目中引入对应的包，返回对应的数据格式，echars就能帮助我们解析出来想要的效果。

具体数据格式和实现效果可以借鉴管网实例

https://www.echartsjs.com/examples/

我在这里把echarts相关的属性整理一下

下面是一个常见的折线图

option:{
                       title: {
                            text: '折线图例',
                            top:'4%',                    --名称距离容器的距离，可以写像素，也可以写百分比(可以是负数呦)，对应的还有bottom,left,right
                            textStyle:{
                                color:'#fff',              --   字体颜色
                                fontSize:'100%'      --字体大小，当然也可以是像素，也可以是百分比
                            }
                        },
         tooltip: {
        trigger: 'axis'                                   --这个属性实现鼠标滑到对应位置时数据悬浮展示效果，里面trigger可以自己定义规则
    },
                legend: {                                 --这里面是图标示例相关的属性，正常情况下我们可能会像下面这样写，效果如图

                    data:['一期','二期','生活用水','2.5万吨'],
                    top:'4%',
                    icon: "circle",   //  这个字段控制形状  类型包括 circle(圆)，rect (长方形)，roundRect(带圆弧的长方形)，triangle(三角形)，diamond(棱形)，pin(椭圆)，arrow(类似于飞镖)，none(无)

                    itemWidth: 10,  // 设置宽度

                    itemHeight: 10, // 设置高度

                    itemGap: 40 // 设置间距
                    orient: 'horizontal'    //展示方向
                },

我们会发现图例都展示在一行里，可是当我们data中数据很多的时候，会发现展示不开，即使用 orient 属性设置成竖向展示仍展示不开

其实legend也可以像series一样做成数组的形式的，比如下面这样，然后用top，bottom，left，right等属性摆放一下就可以了，就像下面的效果

legend: [

{

right: '-5%',

orient: 'horizontal',

data:['一期','二期','生活用水'],

top:'0%',

},{

right: '-2%',

data:['2.5万吨'],

top:'10%',

},

],

                grid:{
                            top:'22%',                        --这里是距离容器的距离
                            bottom:'14%',
                            left: '12%',
                            right:'8%',
                        },       

有时候我们会发现X轴和Y轴的数据跟我们实际的位置不一样

就是type这个属性在作怪，根据官网说法，类目轴的data中，二维数组的的第一项代表索引，而非x轴的值 ，只要把type改成value就好啦，Y轴也是一样
                xAxis: {
                    type: 'category'         //类型，categoryX轴的值，vlaue才是我们实际的值
                    boundaryGap: false,
                    data: ['9时','10时','11时'],

                    interval:1,  有时候我们容器很小，发现展示不开，这两个属性就可以用到了，这里1就是隔一个展示一个，2就是隔两个展示一个

                    rotate:1,   这个是让字体倾斜，放的是角度值  范围是好像是    -90到90

                  axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: '#fff',              //坐标线的颜色
                                    width:'2'                   //坐标线的宽度
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff'                //坐标值得具体的颜色
                                    fontSize:'90%'           //坐标值大小
                                }
                            },

    splitLine:{show: false}     //是否展示分割线
                        }
   
               series: {   //这个就不多数说了
                    {
                        name:'2.5万吨',
                        type:'line',
                        stack: '总量',
                         color:'#BA55D3',
                        data:[ 12.1, 11, 13, 13, 12.5, 13, 11]
                    }
                ]
            },

再说一下仪表盘的一些属性吧

{

name:'二期水厂',

type:'gauge',              //类型就是仪表盘

min:0,                        //从0开始

max:100,                   //最大到100

splitNumber:5,         //分割成五份

center : ['75%', '29%'],                         //距离父容器的位置

radius: '46%',                                        //角度

axisLine: {                                   // 坐标轴线       外边那一圈

lineStyle: {                                  // 属性lineStyle控制线条样式

color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],            这里的0.2，0.8是外边一圈的范围

width: 2,

shadowColor : '#fff', //默认透明

shadowBlur: 10

}

},

axisLabel: {                                      //  坐标轴小标记

textStyle: {                                       // 属性lineStyle控制线条样式

fontWeight: 'bolder',

color: '#fff',

shadowColor : '#fff', //默认透明

shadowBlur: 10,

fontSize:'50%'

}

},

axisTick: {                          // 小分隔线

length :'10%', // 属性length控制线长

lineStyle: { // 属性lineStyle控制线条样式

color: 'auto',

shadowColor : '#fff', //默认透明

shadowBlur: 10

}

},

splitLine: {                          // 大分隔线

length :'20%', // 属性length控制线长

lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式

width:3,              //分割线宽度

color: 'auto',

shadowColor : '#fff', //默认透明

shadowBlur: 10

}

},

pointer: {                           //那个大的指针

shadowColor : '#fff', //默认透明

shadowBlur: 5,

length:'85%',

width:'6%'

},

title : {                            就是那个pa相关

textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE

fontWeight: 'bolder',

fontSize: '70%',

fontStyle: 'italic',

color: '#fff',

shadowColor : '#fff', //默认透明

shadowBlur: 10

}

},

detail : {             底下值得属性

// backgroundColor: 'rgba(30,144,255,0.8)',

borderWidth: 0,

borderColor: '#fff',

shadowColor : '#fff', //默认透明

shadowBlur: '10%',

offsetCenter: [0, '70%'], // x, y，单位px

textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE

fontWeight: 'bolder',

color: '#48D1CC',

fontSize:'90%'

}

}

最后说一下移动端自适应的问题，里面有个media属性，看官方文档

https://www.echartsjs.com/tutorial.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94