浅谈Echarts 使用配置

古城微笑少年丶 2022-08-20 12:19 231阅读 0赞

[官方文档][Link 1]

#### **一、Echarts折线图的配置** ####

##### **（1）去掉折线图的边框线及其加入阴影效果** #####

lineStyle: {
        normal: {
         type: 'solid',
         /*color:"#28a5fc",*/
         color:"red",
          opacity :"0.5"
        }
     }

如下图所示：  
![这里写图片描述][20160227145114454]

--------------------

##### **（2）设置移动折线图的 “上下左右” 的位置** #####

代码片段：

grid:{
        x:40,
        y:20,
        x2:20,
        y2:60,
        show:true,  //表示开启
        borderColor:"#e4e4e4",//折线图的边宽颜色
        shadowBlur:50,
        containLabel:50,
     }

--------------------

##### **（3）设置折线图的 “x轴的、y轴” 数值区域** #####

{
        type: 'value',
        max: 80,//区域最大值，同时还可设置[0,'100%']，来自适应最大值
        interval:20,//每隔区域20
        axisLabel:{
            textStyle:{
                 color:"#a7aab3"//x轴，y轴的数字颜色，如图1
            }
        },
        axisLine:{
       //x轴、y轴的深色轴线，如图2
            show: true,
            lineStyle:{
                  color:"red",
            }
        },axisTick:{
       //图3所示
            show: false,
        }
    }

图1：  
![这里写图片描述][20160229175751213]

图2：  
![这里写图片描述][20160229182842000]

图3：  
![这里写图片描述][20160229183026220]

--------------------

##### **（4）网格边框线（y轴内绘边框线）** #####

splitLine: {
       //终于找到了，背景图的内置表格中“边框”的颜色线条 这个是x跟y轴轴的线 
       show: true,  
       lineStyle:{
            color:"#e4e4e4",    
            type:"solid"
       }
    }

如下图所示：

![y轴内绘边框线][y]

网格边框线（x轴内绘边框线）

![X轴内绘边框线][X]

--------------------

##### **（5）x轴跟y轴的颜色及其字体** #####

axisLabel:{
          show:true,
          textStyle:{
                fontSize:"8px",
                color:"red",
                align:"center"
          },formatter:function(e){ 
             return e;
          }
    }

如图所示：  
![这里写图片描述][20160309144249872]

##### **（6）轴体颜色渐变效果** #####

normal: { 
    
     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(40, 182, 252, 0.85)' }, { offset: 1, color: 'rgba(28, 159, 255, 0.2)' }]) }

**效果图：**

![这里写图片描述][20160518173400965]

![这里写图片描述][20160518173448566]

##### **最后效果代码附上：** #####

option = {
    tooltip : {
       trigger: 'axis'
    },
    title: {
       x: 'center',
       text: '',
    }
    ,legend: {
       top: 'bottom',
       data:['意向'],
    },grid:{
        x:10,
        y:20,
        x2:30,
        y2:20,
        show:true,
        borderColor:"#e4e4e4",//网格边框线
        shadowColor:"#e4e4e4",
        borderWidth:"0.2",
        containLabel:true,
    },toolbox: {
       show: true,
       feature: {
           mark: {show: true},
           dataView: {show: true, readOnly: false},
           magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
           restore: {show: true},
           saveAsImage: {show: true}
       }
    },xAxis: [
       {
           type: 'category',
           splitNumber:6,
           boundaryGap: false,
           data: date,
           axisLabel:{
            textStyle:{
                color:"#a7aab3"
        }
    },
     axisLine:{
       //x轴的横坐标边框线
        show: false
     },axisTick:{
        show: false,
     },axisLabel:{
        show:true,
        textStyle:{
            fontSize:"8px",
            color:"#a7aab3",
            align:"center"
        },formatter:function(e){
            return e;
        }
     },
     splitLine: {
       //终于找到了，背景图的内置表格中“边框”的颜色线条 这个是x轴的竖线
     show: true,
    lineStyle:{
    color:"#e4e4e4",
    type:"solid"
           }
       }
    }
    ],yAxis: [
    {
       type: 'value',
       max: yAxisMax,
       splitNumber:5,
       interval:interval,
       axisLabel:{
        textStyle:{
            color:"#a7aab3"
        },
       },
       axisLine:{
        show: true,
        lineStyle:{
            color:"#e4e4e4"
        }
       },axisTick:{
        show: false,
       },axisLabel:{
        show:true,
        textStyle:{
            fontSize:"8px",
            color:"#a7aab3"
        }
       },splitLine: {
       //终于找到了，背景图的内置表格中“边框”的颜色线条 这个是y轴的横线
         show: true,
         lineStyle:{
                    color:"#e4e4e4",
                    type:"solid",
                 }
             }
         }
       ],dataZoom: {
           type: 'inside',
           start: 23,
           end: 100,
       },lineStyle: {
        normal: {
            type: 'solid',
            color:"#28a5fc",
            opacity :"0.5"
        }
    },
    backgroundColor:"#FFFFFF",//背景颜色
    borderWidth:0.1,
    series: [
           {
               name:'成交', 
               type:'line',
               /*smooth:true,//true,表示曲线，false,表示折线 symbol: 'none',//是否显示折线图气泡*/
               stack: 'a',
               show :false,
               lineStyle:{
       //折线的颜色
                normal: {
                    color:"#1ba0fc",
                    width:1.5,
                    //shadowBlur:80
                   },
               },
               areaStyle: {
                   normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                           offset: 0,
                           color: 'rgba(40, 182, 252, 0.85)'
                       }, {
                           offset: 1,
                           color: 'rgba(28, 159, 255, 0.2)'
                       }])
                   }
               },itemStyle:{
                normal:{
                    color:"#e4e4e4",
                    barBorderColor:"#e4e4e4",
                }
               },
               data: data
           }
       ]
    };

![这里写图片描述][20160309145420173]

--------------------

##### **（7）文案与轴线的距离**  #####

xAxis: [{
        axisLabel: {
            textStyle: {
                color: "#a7aab3",
                fontSize: "18",
            },
            margin: 16,//刻度标签与轴线之间的距离。
        }
    
    }],

![文案与轴线间的距离][SouthEast]

--------------------

##### **（8）文案与轴线的距离**  #####

markPoint: {
        symbolSize:60,//标记的大小
        label:{
            normal:{
                textStyle:{
                    fontSize: 19,//文字的大小
                }
            }
        }
    }

![文案与轴线的距离][SouthEast 1]

--------------------

#### **二、饼图的配置** ####

##### **（9）饼图字体大小修改 fontSize** #####

series: [{
        name: '比例',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        label: {
            normal: {
                formatter: '{b}:{c}: ({d}%)',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 15
                }
            }
        }
    }]

--------------------

[Link 1]: http://echarts.baidu.com/echarts2/doc/doc.html#ItemStyle
[20160227145114454]: /images/20220731/8ec6d2221230410a815ca1f2229f4461.png
[20160229175751213]: /images/20220731/6c647d1fbb2e472193b356177634b379.png
[20160229182842000]: /images/20220731/05187558594b46ce9e3d740f7f6c4ad0.png
[20160229183026220]: /images/20220731/7cbe67fc569b488bab7c93f0108393e2.png
[y]: /images/20220731/cd2de783a6704ac783f28b1d4b4ef5ff.png
[X]: /images/20220731/465dc05acdbd444595801d3e5d260ee1.png
[20160309144249872]: /images/20220731/1699d597b82f49db800a7e0a82495b9a.png
[20160518173400965]: /images/20220731/d6c2e1ff1580497985a3bd5185659a04.png
[20160518173448566]: /images/20220731/d3ed0431a2ab457d9a15c884badab3b4.png
[20160309145420173]: /images/20220731/67527f6088384483bc220e2e1d91b720.png
[SouthEast]: /images/20220731/56afaa3844764bcda0b7246217f6bee7.png
[SouthEast 1]: /images/20220731/8509fe9a317d4df7b0d1395c2646d89a.png