echarts配置项

option = {
	title: { // 标题设置
        text: '成绩展示', // 标题文字
        textStyle: { // 标题文字样式设置
          color: 'red'
        },
        borderWidth: 5, // 标题边框宽度
        borderColor: 'blue', // 标题边框颜色
        borderRadius: 5, // 标题边框圆角
        left: 50, // 标题距离左边的距离
        top: 10 // 标题距离顶部的距离
      },
      tooltip: { // 工具提示
        // trigger: 'item' ,//工具提示的类型 item代表的是每个柱本身, axis代表的是坐标轴
        trigger: 'axis',
        triggerOn: 'click', // 触发时机, click代表点击, mouseOver代表鼠标移过
        // formatter: '{b} 的成绩是 {c}'
        formatter: function(arg){ // 文字格式化
          console.log('arg',arg);
          return arg[0].name + '的分数是:' + arg[0].data
        }
      },
      toolbox: { // 工具箱按钮
        feature: {
          saveAsImage: {}, // 导出图片
          dataView: {}, // 数据视图
          restore: {}, // 重置
          dataZoom: {}, // 区域缩放
          magicType: {
            type: ['bar', 'line']
          } // 动态图表类型的切换
        }
      },
      legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图			例可以帮助我们对图表进行筛选
        data: []
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: []
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          data: []
        }
      ]
    }
  //折线图
     xAxis: {
        type: 'category',
        data: xDataArr,
        boundaryGap: false // x轴的第1个元素是否与y轴有距离
      },
      yAxis: {
        type: 'value',
        scale: true //自动适配y轴，不需要必须从0开始
      },
      series: [
        {
          name: '白象',
          data: yDataArr,
          type: 'line',
          markPoint: { // 标记点
            data: [
              {
                type: 'max'
              },
              {
                type: 'min'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average'
              }
            ]
          },
          markArea: { // 标记区域
            data: [
              [
                {
                  xAxis: '1月'
                },
                {
                  xAxis: '2月'
                }
              ],
              [
                {
                  xAxis: '7月'
                },
                {
                  xAxis: '8月'
                }
              ]
            ]
          },
          smooth: true, // 是否为平滑线
          lineStyle: { // 线的样式设置
            color: 'green',
            type: 'solid' // dashed dotted solid
          },
          areaStyle: { // 线和x轴形成的区域设置
            color: 'pink'
          }
        }
      ]
      //直角坐标系的常用配置
      grid: { // 坐标轴容器
        show: true, // 是否可见
        borderWidth: 10, // 边框的宽度
        borderColor: 'red', // 边框的颜色
        left: 120, // 边框的位置
        top: 120,
        width: 300, // 边框的大小
        height: 150
      },
      xAxis: {
        type: 'category',
        data: xDataArr,
        position: 'top' // 控制坐标轴的位置
      },
      yAxis: {
        type: 'value',
        position: 'right' // 控制坐标轴的位置
      },
       dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'slider', // 缩放的类型  slide代表滑块  inside代表依靠鼠标滚轮
          // type: 'inside'
          xAxisIndex: 0
        },
        {
          type: 'slider',
          yAxisIndex: 0,
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],
       toolbox: {
        feature: {
          dataZoom: {}
        }
      }
      //饼图常见效果
       option = {
      series: [
        {
          type: 'pie',
          data: [],
          label: { // 饼图文字的显示
            show: true, // 显示文字
            //formatter: 'hehe' // 决定文字显示的内容
            formatter: function(arg){
              // console.log(arg)
              return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
          },
          // radius: 20 // 饼图的半径
          // radius: '20%' // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
          // radius: ['50%', '75%'] // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
          roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的
          // selectedMode: 'single' // 选中的效果,能够将选中的区域偏离圆点一小段距离
          selectedMode: 'multiple',
          selectedOffset: 30
        }
      ]
    }