echarts的各种配置

echarts很简单，只需要按照echarts官网的实例引入就行，但是往往给我们的设计图有设计师的各种想法，比如颜色，间距等等，基本上大部分时间都是在想该怎么调，下面来整理下曾今在做echarts时遇到的哪些坑。

第一点，坐标轴离边框的距离过小导致数据显示不全,比如这样

那我们只需要设置    grid:{
          x: 19,
          y: 50,
          x2: 90,
          y2: 15
    ｝就可以啦，一张图让你明白上面x,y4个参数代表啥，然后调就可以啦

2.x轴每个点的名称太长，设计师要求斜着放，字体颜色黑色太丑，要换个颜色，坐标颜色，宽度也要改，什么什么的，那就这样设置

注意，x轴和y轴都是可以倾斜的，而且设置也是一样一样的，只是放置位置不一样，一个是在xAxis，一个在yAxis，配置如下

          axisLine: {

            lineStyle: {

              type: 'solid',

              color: '#fff', // 左边线的颜色

              width: '2'// 坐标线的宽度

            }

          },

          axisLabel: {

            interval: 0,

            rotate: 35, // x轴数据倾斜角度

            show: true,

            textStyle: {

              color: '#0FEBFF'

            }

          }

ok,就是这么顺滑。如下

3.关于颜色，比如这种估计会吐槽你，这是什么古老色彩配置，必须改，这个时候不慌，先让设计出颜色，然后一行代码的事，具体配置如下

直接在option里面定义颜色color: ['#4CB0E5', "#46DAA4", "#00D2FF", "#F36511", "#D8C344", "#DD045D"],，然后就是这样子的

4.比如像这种堆叠区域图设计觉得太丑，要你给它设计个渐变颜色，来增强层次感

在series里面直接加

          itemStyle: {

            color: new echarts.graphic.LinearGradient(

              0, 0, 0, 1,

              [

                { offset: 0, color: '#83bff6' },

                { offset: 0.5, color: '#188df0' },

                { offset: 1, color: '#188df0' }

              ]

            )

          },

完全不虚他

5.滑块的设置，比如这种选中与补选中，设计师让你换种颜色

直接在dataZoom里面设置

        fillerColor: '#269cdb',
        backgroundColor: '#33384b',

具体配置如下

        dataZoom: [

          {

            start: 0, // 默认为0

            end: 100 - 1500 / 31, // 默认为100

            type: 'slider',

            show: true,

            xAxisIndex: [0],

            handleSize: 0, // 滑动条的 左右2个滑动条的大小

            height: 10, // 组件高度

            left: '10%', // 左边的距离

            right: '10%', // 右边的距离

            bottom: 0, // 右边的距离

            borderColor: '#000',

            fillerColor: '#269cdb',

            borderRadius: 5,

            backgroundColor: '#33384b', // 两边未选中的滑动条区域的颜色

            showDataShadow: false, // 是否显示数据阴影 默认auto

            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true

            realtime: true, // 是否实时更新

            filterMode: 'filter'

          },

          // 下面这个属性是里面拖到

          {

            type: 'inside',

            show: true,

            xAxisIndex: [0],

            start: 0, // 默认为1

            end: 100 - 1500 / 31 // 默认为100

          }

        ]，

ok今天就先到这，后面再慢慢补充