Echarts图常用字段

后期持续更新。。。。。。

不然每次都要去文档里面找半天，记录一些常用的，节省下时间。

饼图

标签展示在内部

series: [
    {
      label:{
          show:true,
          position:'inner', //inside , top 
          formatter:'{d}%' //标签展示在内部
      },
    },
    hoverAnimation:false,//鼠标悬浮动画消失
    itemStyle: {//自定义饼块的颜色，可以定义很多，会按照循序取
                            normal: {
                                color: function (colors) {
                                    var colorList = [
                                        '#FCA761',
                                        '#3BB4BC',
                                        '#D9D9D9',
                                        '#3089FD',
                                        '#FF7448',
                                        '#AEC3FF',
                                    ];
                                    return colorList[colors.dataIndex];
                                }
                            }
                        },
  ]

 

 

 

 

 

柱图

  标题设置

title: {
    text: 'TOP5 供应商',
    left:'center',
    subtext: '', // 副标题
                    itemGap: 3, // 主副标题间距
                    x: 'center',
                    y: 'center',

                    textStyle: {   // 主标题样式
                        fontSize: '32',
                        fontWeight: '700',
                        color: 'black'
                    },
                    subtextStyle: {   // 副标题样式
                        fontSize: '24',
                        fontWeight: '700',
                        color: 'black'
                    }
  },

 

图例位置

legend: {
    top:'bottom',
    
    left: 'left',
    orient: 'vertical' //垂直展示，后续添加的
    
  },

 

分割线

xAxis: {
    type: 'value',
    axisLine:{
      show:false,
    },
    splitLine:{show: false}, //去除分割线
    axisLabel: {//轴标签
        show: false,
    },
    axisTick: {
        show: false   //刻度线
    },
  },

柱图的柱子颜色和宽度

series: [
    {
      barWidth:'20px',
      color:'#f2a673',
      name: '维修设备次数',
      type: 'bar',
      data: [100, 100, 100, 100, 100, 100],
        label: { //标签显示
            show: true,
            position: 'top', // 在上方显示
            formatter: function (oItem) {
                return oItem.value;
            }
        },
    },
  ]

缩放

dataZoom: {
    type: 'inside'
},

X轴展示全部数据，不间隔展示

xAxis: {
    type: 'category',
    axisLabel: {
      interval:0, //控制间隔展示，0则全部展示
      rotate: 45,//旋转角度
      fontSize: '20px'
    },
  },

折线图

series: [
                    {
                        name: '',
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line',
                        itemStyle: {
                            color: '#000000'
                        },
                        symbol: 'circle',     //设定为实心点
                        symbolSize: 8,   //设定实心点的大小
                    },
                   

                ]

 图位置间距

grid:{
                    // bottom:'5%',
                    right:'3%',
                    left:'15%',
                    containLabel: true, //标签不溢出
                },