echarts图中使用到的属性及对应的作用，饼图实例、折线图实例

1、grid用于表示离容器上下左右的距离，可以使用数值，亦可使用百分比。

grid: {
     top: '65',
     right: '10%',//百分比
     left: '89',
     bottom: '60' //数值
},  

2、tooltip

tooltip: {
    trigger: 'axis',//用于柱状图折线图等存在坐标轴的图表中。
    // trigger: 'item',//用于散点图、饼图等无类目轴的图表中
      
    //设置背景色，边框颜色、边框宽度
    backgroundColor: 'rgba(4, 10, 13, 0.6)',
    borderColor: '#48607f',
    borderWidth: 1,
      
    //设置悬浮显示的字体大小、颜色、字体
    textStyle: {
        fontSize: 16,
        color: '#eeeeef',
        fontFamily: 'PingFang-SC-Medium',
    },
    padding:[10,25],
      
    //设置当鼠标悬浮时，指示器的展示方式
    axisPointer: {
        //type:阴影指示器,通过shadowStyle设置阴影颜色及透明度。type类型shadow与shadowStyle想对应。
        //type可为line、shadow、none、cross
        type: "shadow",
        shadowStyle:{
          color:'rgba(173,190,223,0.15)',
        },
        label: {
          show: false
        }
    },
    //对于悬浮框中带有特殊样式的，可使用如下方式进行设置。
    formatter: function(params){
        let data1 = formatData(params[0].value);
        let data2 = formatData(params[1].value || 0);
        let data3 = bytesToSize(params[2].value || 0);
        let data4 = bytesToSize(params[3].value || 0);
        let res = params[0].name+`<br/>`+
          `<div style=" 10px;height: 10px;margin-right: 8px;background-color: #058cff;display: inline-block"></div>`+'数据总量：'+data4+`<br/>`+
          `<div style=" 10px;height: 10px;border-radius:5px;margin-right: 8px;background-color: #058cff;display: inline-block"></div>`+'数据总条数：'+data2+'条'+`<br/>`+
          `<div style=" 10px;height: 10px;margin-right: 8px;background-color: #10a474;display: inline-block"></div>`+'数据增量：'+data3+`<br/>`+
          `<div style=" 10px;height: 10px;border-radius:5px;margin-right: 8px;background-color: #10a474;display: inline-block"></div>`+'数据增加条数：'+data1+'条'
        return res;
    }
},

3、legend图例

legend: {
  type: 'scroll',//设置legend滚动条的出现
  orient: 'horizontal',//图例列表的布局朝向，横向还是纵向  vertical纵向，horizontal横向
  data:legends,//图例列表
  bottom:0,
  right:60,
   195,
  //图例标记大小样式设置
  icon: 'circle',
  itemWidth: 10,
  itemHeight: 10,
  itemGap:10,//图例之间的间隔（横向或纵向，根据orient来判断）
  textStyle: {
    color: '#fff',
    fontSize: 16,
    fontFamily: 'PingFang-SC-Medium',
    padding: [0,0,0,10]，
    //rich可以自定义文本样式
    rich: {
        name: {
            fontSize: 17,
            fontFamily: 'PingFang',
            backgroundColor: 'rgba(1, 9, 23, 0)',
            borderRadius: 2,
            color: '#fff',
            // padding: [5, 10, 5, 6],
            //  52,
        },
        count: {
            fontSize: 17,
             58,
            align: 'right',
            color: '#fff',
            padding: [5, 0, 10, 0],
        }
    }
  },
  formatter: function (name) {
    const index = data.findIndex(item => item.name === name);
    const count =  data[index].value;
    const label = `{name|使用name样式}` + `{count|使用count样式}`;
    return label;
  },
},

 以下，我们将通过例子对上面的属性进行展示。首先以饼图为例，可将代码直接复制至https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all 可直观感受效果。

let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
let seriesData = [{
        name: "项目A花费",
        value: "3720",
        unit: "百万"
    },
    {
        name: "项目B类花费",
        value: "2920",
        unit: "百万"
    },
    {
        name: "项目C类花费",
        value: "2200",
        unit: "百万"
    },
    {
        name: "项目D类花费",
        value: "1420",
        unit: "百万"
    }
];



let nameData = [];
seriesData.forEach((item) => {
    nameData.push(item.name)
});

option = {
    grid:{
        show:true,
        top:60,
        bottom:'20%',
        left:60,
        right:'10%'
        
    },
    backgroundColor: 'rgba(0,0,0,0)',
    color: ['#1a79c9', '#71bcff', '#29b3cc', '#39c77f', '#f99b37', '#ef5150', '#f9db63'],
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255,255,255,0.85)',
      borderWidth: 1,
      borderColor:'rgba(238,238,238,0.85)',
      // remToPx(230/75),
      height:96,
      marginTop:16,
      marginLeft:13,
      textStyle: {
        fontSize: 26,
        color: '#353535',
        fontFamily: 'PingFang-SC-Medium',
      },
      axisPointer:{
        type: 'none',
      },
      formatter: function(params){
        return '<span style="display:inline-block;margin-left:13px;margin-right:13px;border-radius:10px;12px;height:12px;background-color:' + params.color + ';"></span>'+params.name +  '<br/>' +'&nbsp;&nbsp;&nbsp;&nbsp;'+ params.value + params.data.unit
        // return '{name|' + params.name + '}' + '
' + '{name|' + (params.data.value/sum*100).toFixed(2)% + '}'
      },
    },
    legend: {
        orient: 'vertical',
        icon: 'circle',
        x: '61.7%',
        y: 'center',
        data: seriesData,
        itemWidth: 12,
        itemHeight: 12,
        align: 'left',
        //由于长度超出的使用…展示，故通过tooltip显示标签内容
        tooltip:{
            show:true,
        },
        textStyle: {
            rich: {
                name: {
                    align: 'left',
                    // 100,
                     170,
                    fontSize: 24,
                    color: '#353535',
                    padding: [0, 0, 0, 3],
                    fontFamily: 'PingFang-SC-Medium'
                },
                value: {
                    align: 'right',
                     70,
                    fontSize: 24,
                    color: '#353535',
                    fontWeight: 'bold',
                    padding: [0, 90, 0, 24],
                    fontFamily: 'PingFang-SC-Medium'
                },
                unit: {
                    fontSize: 24,
                    color: '#353535',
                    fontWeight: 'bold',
                    fontFamily: 'PingFang-SC-Medium'
                },

            }
        },
        formatter: function(name) {
            let res = seriesData.filter(v => v.name === name);
            res = res[0] || {};
            //标签长度大于5时隐藏
            if(name.length>5){
                name = name.slice(0,5) + '...'
            }
            return '{name|' + name + '}  {value|' + res.value + res.unit + '}'
        }
    },
    series: [{
        type: 'pie',
        radius: [107, 157],
        padding: [58, 84, 80, 65],
        center: ['29.6%', '47.57%'],
        data: seriesData,
        hoverAnimation: false,
        label: {
            show: false,
        },
    }]
};

结果如图所示：

        

 折线图为例：

let colorList = ['rgb(26, 121, 200)', 'rgb(57, 199, 127)', 'rgb(249, 155, 55)'];
let colorStop = ['rgba(26, 121, 200, 0.2)', 'rgba(26, 121, 200, 0)', 'rgba(57, 199, 127, 0.2)', 'rgba(57, 199, 127, 0)', 'rgba(249, 155, 55, 0.2)', 'rgba(249, 155, 55, 0)'];
// console.log('aaa' ,colorStop);
let series = [];
let data = {
    data: [6.5, 19.6, -4.6, 5.2],
    name: "标题",
    stack: null,
    type: "line",
    xaxis: ["**制造业", "*******制造业", "******制造业", "**********制造业"],
    yaxis: ["%"]
}


series.push({
    name: data.name,
    type: 'line',
    symbol: 'emptyCircle',
    // showSymbol: !data.series[i].closeSymbolShow,
    symbolSize: 0,
    data: data.data,
    lineStyle: {
        type: 'solid',
         3,
    },
    areaStyle: {
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: colorStop[0] // 0% 处的颜色
            }, {
                offset: 1,
                color: colorStop[1], // 100% 处的颜色
            }],
            // opacity: 0.2,
            global: false // 缺省为 false
        }
    }
})

let paddingTop = '-20';
option = {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    color: colorList,
    grid: {
        left: 20,
        right: 40,
        top: 114,
        bottom: 65,
        containLabel: true
    },
    legend: {
        textStyle: {
            color: "#000",
            fontSize: 20,
            fontFamily: 'PingFang-SC-Medium',
            padding: [0, 0, 0, 5]
        },
        itemGap: 6,
        show: false,
        itemHeight: 14,
        itemWidth: 30,
        right: '5%',
        top: '13%',
        // icon: "circle",
        data: data.legends,
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(9, 20, 37, 0.75)',
        borderColor: '#48607f',
        borderWidth: 1,
        textStyle: {
            fontSize: 18,
            color: '#fff',
            align: 'left',
            fontFamily: 'PingFang-SC-Medium',
        },
        padding: [10, 25],
        axisPointer: {
            // type: 'line',
            type:'shadow',
            label: {
                show: false,
                backgroundColor: '#333'
            }
        }
    },
    xAxis: {
        show: true,
        triggerEvent: true,
        type: 'category',
        nameGap: 15,
        axisTick: {
            show: false,
        },
        //存在负数时，使用横线区分正负
        axisLine: {
            show: true,
            lineStyle: {
                color: '#F02934',
                 1,
                type: "dashed"
            }
        },
        splitLine: {
            //竖线是否显示show,若显示，则通过lineStyle设置颜色，线的类型，宽度
            show: true,
            lineStyle: {
                color: '#e1e1e1',
                type: "solid",
                // type: "dashed",
                 1,
            }
        },
        axisLabel: {
            rotate: 30,
            margin: 60,
            //判断横坐标名称的长度，长度超过固定值，超出部分进行换行处理。
            formatter: function(value) {
                var res = '';
                if (value.length > 7) {
                    res = value.substring(0, 7) + '
' + value.substring(7);
                } else {
                    res = value;
                }
                return res;
            },
            textStyle: {
                fontSize: 22,
                fontFamily: 'PingFang-SC-Medium',
                // padding: [remToPx(20/75), 0, 0, 0],

                align: "center",
                __verticalAlign: 'middle',
                color: '#838383'
            },
        },
        data: data.xaxis
    },
    yAxis: {
        show: true,
        name: data.yaxis,
        nameTextStyle: {
            fontSize: 22,
            fontFamily: 'PingFang-SC-Medium',
            color: '#838383'
        },
        type: 'value',
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle: {
                 1,
                color: '#aaa',
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                 1,
                // type: "dashed",
                type:"solid",
                color: '#e1e1e1'
            }
        },
        axisLabel: {
            textStyle: {
                fontSize: 22,
                fontFamily: 'PingFang-SC-Medium',
                color: '#838383'
            }
        }
    },
    series: series
};