echarts常用配置

标题组件：title

option = {
  title:{
    text:"主标题测试",
    textStyle:{//主标题样式
      color:"red",
      fontStyle:"oblique",
      fontWeight:"bolder",
      fontFamily:"Kaiti",
      fontSize:20,
      lineHeight:20,
    },
    subtext:"副标题测试",
    subtextStyle:{
      color:"blue",
      fontStyle:"normal",
      fontWeight:"bold",
      fontFamily:"微软雅黑",
      fontSize:16,
      lineHeight:20,
    },
    textAlign:"center",
    left:"50%",//也可以是具体的数值：20，类似的还有top,bottom,right
    top:'40%',
    backgroundColor:'#fff',//(默认透明transparent) rgb,rgba,#fff都能用
    shadowColor:'black',
    shadowBlur:15,
    //注意：此配置项生效的前提是，设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor
    shadowOffsetX:5, 
    shadowOffsetY:5,
  }
};

效果图

图例组件：legend

option = {
  legend: {//
    left:"center",
    orient:'horizontal',//水平，垂直（vertical）
    itemGap:10,
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    //data中的名称必须与series中的每个数据的name相对应，
    //如果series中的name未出现data中的数据名称，则不显示图例，但数据会显示
  },
  
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
 
  series:[
      {
      name: 'Email',
      type: 'bar',
      stack: 'a',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'bar',
      stack: 'a',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'b',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'b',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '',
      type: 'line',
      stack: 'borderWidth',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
    ]
};

效果图

网格组件：grid

option = {
  grid: {
    left: "5%",
    top: "5%",
    right: "5%",
    bottom: "10%"
  },
  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisTick: {
      alignWithLabel: true
     //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
    }
  }],
  yAxis: [{
    type: "value"
  }],
  series: [{
    name: "直接访问",
    type: "bar",
    barWidth: "60%",
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
};

效果图

两轴：xAxis,yAxis

option = {
  xAxis: [{
    name:'星期',
    nameLocation:'end',
    //'start','center','middle','end'
    nameTextStyle:{
      color:'blue',
      fontSize:20,
      //....
    },
    nameGap:30,//距离轴的距离
    type: "category",
    //'value':数值轴，适用于连续数据
    //'category'  类目轴，适用于离散的类目数据。
    data: [
      {
        value:"Mon",
        textStyle:{
          color:'red',
        }
      },
      {
        value:"Tue",
        textStyle:{
          color:'blue',
        }
      },
      {
        value:"Wed",
        textStyle:{
          color:'rgb(200,240,6)',
        }
      },
       {
        value:"Thu",
        textStyle:{
          color:'rgb(100,290,236)',
        }
      },
       {
        value:"Fri",
        textStyle:{
          color:'rgb(10,450,66)',
        }
      },
       {
        value:"Sat",
        textStyle:{
          color:'yellow',
        }
      },
       {
        value:"Sun",
        textStyle:{
          color:'black',
        }
      }
    ],
   
  }],
  yAxis: [{
    name:'访问量',
    nameLocation:'center',
    nameTextStyle:{
      color:'blue',
      fontSize:18,
      padding:[111111110,40,30,400]//此时第一个数设置无效
      //....
    },
    nameRotate:90,//当使用 nameLocation:'center'时默认为90
    //当nameRotate:0，时padding：[0,0,30,400] 只有第2个值有效
    type: "value",
    min:40,//刻度最小值
    max:450,//刻度最大值
    axisLabel:{//标签刻度样式
      rotate:50,//刻度标签旋转的角度,
      //在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
      formatter:'{value} 个人',
      backgroundColor:'rgb(2,233,44)',
      //样式设置基本都类似
    }
    
  }],
  series: [{
    name: "直接访问",
    type: "bar",
    barWidth: "60%",
    data: [50, 70, 200, 334, 390, 330, 220]
  }]
}

效果图

雷达坐标：radar

option = {
  
  radar: {
    center:['50%', '50%'],//center: [400, 300],
    shape: 'circle',//polygon(默认)
    radius:200,//'75%' 圆的半径
    indicator: [//指标
      { name: '指标一', max: 6500 },
      { name: '指标二', max: 16000 },
      { name: '指标三', max: 30000 },
      { name: '指标四', max: 38000 },
      { name: '指标五', max: 52000 },
      { name: '指标六', max: 25000 }
    ],
     name:{//指标名称样式
      color:'rgb(20,33,232)',//black,#333
      fontStyle:'normal',
      //...fontWeight,fontFamily.......
    },
     nameGap:20,
    axisTick:{//刻度
      show:true,//默认关闭
      //...和上面的例子中的用法基本类似
    }
  },
  
};

效果图：

提示框组件：tooltip

option = {
   tooltip:{
    show:true,
    trigger:'item',//触发类型
    //‘item’数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
    //'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
    //'none',什么都不触发。
    //showContent:true,//是否显示提示框浮层，默认显示
    formatter:'{b}: {c}',
    //模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
  //折线（区域）图、柱状（条形）图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
   axisPointer:{
     type:'cross',//则此时坐标系会自动选择显示哪个轴的 axisPointer
   }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

效果图：

系列：series

option :{
  series:[
    {
      type:'line',//折线;bar柱状图，pie饼图，scatter散点，radar雷达图
      name:'系列名称',//用于tooltip的显示，legend 的图例筛选
      xAxisIndex:0,//默认为0
       //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
      yAxisIndex:1,
      //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用
      symbol:'circle',
      symbolSize:4,
      stack:'a',//数据堆叠，同个类目轴上系列配置相同的stack值后
       //后一个系列的值会在前一个系列的值上相加。
      label:{
         //图形上的文本标签样式可用于说明图形的一些数据信息，比如值，名称等
          show:true,
          // 绝对的像素值
          position: [10, 10],
          // 相对的百分比
          //position: ['50%', '50%']
          color:'#fff',
          fontStyle:'oblique',
          //.....
      },
      areaStyle:{//区域填充样式
         color:"#000"
      },
      lineStyle:{
        type : 'solid',
      },
      emphasis:{ //折线图的高亮状态。\
        focus:'none',//不淡出其它图形(默认), 
        //'self' 只聚焦（不淡出）当前高亮的数据的图形
        //'series' 聚焦当前高亮的数据所在的系列的所有图形。
        label:{
          //设置标签样式
        },
      },
      data:[
            {
              name:'数据项名称',
              value:[],//单个数据项的数值
            }     
        ],
        markLine:{
          //图表标线。
        }
    },
    ]
};

常用组件介绍到此结束，想知道更多组件详情请移步：https://echarts.apache.org/zh/option.html#title