echarts配置项说明

前端开发中经常需要用到echart

但是个人开发过程中基本每次过段时间  总是会忘记echart配置项 然后去翻官网  比较费时（echarts官网总是没有一看就懂的中文说明）

今天汇总一下常用的配置项

1.柱状图 折线图

option = {
  // 左上方黑色标题
  title: {
    text: 'Stacked Line'
  },
  // 鼠标放上去显示具体内容 不要这一项鼠标悬浮上去啥也没有
  tooltip: {
    trigger: 'axis'
  },
  // 顶部中间不同颜色的标记 名称 状态
  legend: {
    orient: 'vertical', // 垂直排列  默认不加这个是横向排列
    left: 'center',  // 左右位置
    data: ['Email'] // 对应series里面的name
  },
  // 图表距离上下左右距离
  grid: {
    left: '5%',
    right: '4%',
    bottom: '3%',
  },
  // 右上角乱七八糟的小功能 toolbox项通常不要即可
  toolbox: {
    show: true,
    feature: {
      dataZoom: {  // 区域缩放
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false }, // 数据视图
      magicType: { type: ['line', 'bar'] }, // 柱状图折线图切换
      restore: {}, // 还原
      saveAsImage: {} // 保存为图片
    }
  },
  // X轴
  xAxis: {
    type: 'category',
    boundaryGap: false, // 个人理解为折现的点 或者 柱状图  是否左右居中 这样加了就是靠左的
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  // Y轴
  yAxis: {
    type: 'value',
    name: "数量 (家)", // Y轴上面单位
    nameTextStyle: {
      padding: [0, 0, 0, -50], // Y轴单位间距
      color: '#88A3FC'         // Y轴单位颜色值
    },
  },
  series: [
    {
      name: 'Email',
      type: 'bar', // line 折线图  bar 柱状图 这两个用的最多
      stack: 'Total', // 是否累加 一般这一项不要
      data: [120, 132, 101, 134, 90, 230, 210], // 这里就是数据了
      barWidth: '20px', // 柱状图宽度 （折线图不必写这个属性）
      // itemStyle: {  // 自定义样式 颜色 单个颜色
      //  color: '#88A3FC'
      // }
      itemStyle: { // 渐变颜色
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1, // x1, y1, x2, y2 指定渐变的起点和终点位置
          [
            {offset: 0, color: 'red'}, // 渐变起始颜色
            {offset: 1, color: 'blue'} // 渐变结束颜色
          ]
        )
      }
    },
  ]
}

效果图

2.饼图 

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From', // 鼠标放上去显示的饼图名称
      type: 'pie',
      radius: ['40%', '70%'], // 小圆环和大圆环的百分比  实心的话写一个就行
      avoidLabelOverlap: false, // 确保标签不重叠 标签密级重叠可以设为true 这个属性可以不要
      itemStyle: {  // 饼图样式
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      // label: { // 是否显示中间文字 不推荐这种写法 这样写 那条线就没了
      //  show: true,
      // position: 'center'
      // },
      label: {
        normal: {
          show: true,
          position: 'outside', // 标签位置，'outside' 表示标签在扇形外侧
          color: 'red', // 标签文字颜色
          formatter: '{b}: {c} ({d}%)',
        }
      },
      emphasis: {  // 鼠标悬浮变大的文字
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: { // 是否展示每个饼的那条线
        show: true,
        lineStyle: {
          color: 'red' // 这里设置标签线的颜色为红色
        }
      },
      data: [
        { value: 1048, name: 'Search Engine', itemStyle: {color: '#ff4500'}}, // 自己设置某一块颜色
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

效果图