1.title

标题组件，包含主标题和副标题。

        title: {
           // 主标题
          text: '主要标题写这里',
          // 副标题
          subtext: '副标题写这里',
          //调整位置
          x: 'center',
          y: 'center',
          top: '38%',
          textStyle: {
            fontSize: 30
          }
        },

2.grid

主要用来调整grid 组件（图表）离容器各个方向的距离

3.tooltip

提示框组件。

        tooltip: {
          trigger: 'item'   //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
        },
        tooltip: {
          trigger: 'axis'   //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          formatter: '{b1}({a1}): {c1}<br />{b2}({a2}): {c2}<br />{b0}({a0}): {c0}%' //显示的数据格式（字符串模板）
        },

折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）

饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

4.legend

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。 可通过itemWidth和itemHeight更改图例标记的图形高宽，通过right，top等改变在容器中的位置

5.xAxis

直角坐标系 grid 中的 x 轴

  xAxis: [
          {
          //  'value' 数值轴，适用于连续数据。
          // 'category'类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 [series.data]或 [dataset.source] 中取，或者可通过 [xAxis.data]设置类目数据
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],

6.yAxis

直角坐标系 grid 中的 y 轴

 yAxis: [
          {
            type: 'value',
               show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
                axisTick:{
                  show:false // 不显示坐标轴刻度线
                    },
                axisLine: {
                  show: false, // 不显示坐标轴线
                },
                axisLabel: {
                  show: false, // 不显示坐标轴上的文字
                },
                splitLine:{
                 show:false // 不显示网格线
                },
          }
        ]

7.series

常用的扇形，柱形和折线如下

          {
            //  name: 'PieData',
            type: 'pie',
            // 数组的第一项是内半径，第二项是外半径
            radius: ['60%', '70%'],
            //是否启用防止标签重叠策略，默认开启
            avoidLabelOverlap: false,
            //图形样式
            itemStyle: {
              borderRadius: 10,
              //图形的描边颜色
              borderColor: '#fff',
              borderWidth: 2
            },
            //饼图图形上的文本标签，可用于说明图形的一些数据信息
            label: {
              show: false,
              position: 'center'
            },
            // 高亮状态的扇区和标签样式。(中间位置显示)
            emphasis: {
              label: {
                show: false,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            //标签的视觉引导线配置
            labelLine: {
              show: false
            },
            data: [
              {
                value: 111,
                name: '良好率',
                itemStyle: {
                  color: '#017aff'
                }
              },
              {
                value: 222,
                name: '一般率',
                itemStyle: {
                  color: '#f8b04b'
                }
              },
              {
                value: 333,
                name: '较差率',
                itemStyle: {
                  color: '#ef6278'
                }
              }
            ]
          }

  {
            name: '完成率',
            type: 'line',
            data: [5, 12, 60, 50, 20, 40, 30, 75, 60, 10, 23, 54],
            itemStyle: {
              color: '#ef6278'
            }
          },

 {
            name: '2070年',
            type: 'bar',
            data: [60, 50, 20, 40, 30, 75, 60, 10, 23, 54, 22, 78],
            //宽度
            barWidth: 15,
            //颜色和四角调整
            itemStyle: {
              color: '#feba14',
              barBorderRadius: [7, 7, 0, 0]
            }