Web开发：小结Apache Echarts官网上常用的配置项（前端可视化图表）

目录

一、须知

二、Title

三、 Legend

四、Grid

---

一、须知

配置项官方文档：点此进入。

我总结了比较常用的功能，写进注释里面，附带链接分享和效果图展示。（更新中....）

二、Title

option = {
  title: {
    text: 'Weekly Sales',//标题文本
    textStyle: {
      color: '#333',  // 标题文本颜色
      fontWeight: 'bold',  // 标题文本字体粗细，可选'normal','bold','bolder','lighter'
      fontSize: 18,  // 标题文本字体大小
    },
    subtext: 'Unit: Pieces',  // 副标题文本内容
    subtextStyle: {
      color: '#aaa',  // 副标题文本颜色
      fontStyle: 'normal',  // 副标题文本字体风格
      fontWeight: 'normal',  // 副标题文本字体粗细
      fontSize: 14  // 副标题文本字体大小
    },
    textAlign: 'auto',  // 标题文本水平对齐方式，可选值：'auto'、'left'、'right'、'center'
    padding: [10, 10, 10, 10],  // 标题的内边距，上右下左
    itemGap: 10,  // 主副标题之间的间距
    left: 'center',  // 标题组件离容器左侧的距离，可选'left', 'center', 'right'，20，'20%'
    top:'top'  // 标题组件离容器顶部的距离，可选'top', 'middle', 'bottom'，20，'20%'
  },
  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'
    }
  ]
};

【分享链接：点此进入】

【实现效果】

三、 Legend

option = {
  title: {
    text: 'Referer of a Website',
    left: 'center'
  },
  tooltip: {
    trigger: 'item', // 提示框触发类型为数据项触发
    formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示框内容格式器:显示series的name、data的name、data的value和百分比
  },
  legend: {
    orient: 'vertical', // 图例布局方式为垂直，可选'horizontal','vertical'
    left: 'left', // 图例组件离容器左侧的距离，可选'left', 'center', 'right'
    itemHeight: 14, // 图例的高
    itemWidth: 14, // 图例的宽
    itemGap: 20, // 图例之间的间隔
    padding: [40, 20, 10, 5], // 上、右、下、左的内边距（移动位置）
    textStyle: {
      color: '#333', // 图例文字颜色
      fontSize: 12 // 图例文字大小
    },
    data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads'] // 图例数据，与series中的name对应
  },
  series: [
    {
      name: 'Access From',
      type: 'pie', // 图表类型为饼图
      radius: '50%', // 饼图半径，可设置为相对的百分比或绝对的像素值
      center: ['50%', '60%'], // 饼图的中心（圆心）坐标，支持绝对像素和相对百分比
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      label: {
        show: true, // 是否显示标签
        formatter: '{b} : {c} ({d}%)', // 显示data的name、data的value和百分比
        fontSize: 12 // 标签文字大小
      },
      labelLine: {
        show: true // 是否显示标签的视觉引导线
      },
      emphasis: {//鼠标悬浮阴影
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      animationType: 'scale', // 数据更新动画的类型
      animationEasing: 'elasticOut', // 数据更新动画的缓动效果
      animationDelay: function (idx) { // 数据更新动画的延迟
        return idx * 50;
      }
    }
  ]
};

【分享链接】

【实现效果】

四、Grid

option = {
  grid: {
    show: true,
    left: '10%', // 网格左边距
    top: 60, // 网格顶边距
    borderWidth: 1 // 网格边框宽度
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    show: true, // 显示提示框
    trigger: 'axis', // 触发类型，鼠标悬停显示提示框
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'line' // 指示器类型为直线
    }
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
};

【实现链接】