使用五步驟：

引入echart.js→準備顯示的盒子→初始化echarts例項物件→準備配置項→將配置項設定給echarts例項物件

通用配置(所有配置項都可以新增）

        // 標題
        title: {
          text: '期末語文成績',
          textStyle: {
            color: 'skyblue',
          },
          borderWidth: 3,
          borderColor: 'pink',
          borderRadius: 10,
          left: 50,
          top: 20,
        },
        // 提示
        tooltip: {
          trigger: 'item',
          triggerOn: 'click',
          formatter: function (arg) {
            return arg.name + '的成績是' + arg.data
          },
        },
        // 工具       
        toolbox: {
          feature: {
            saveAsImage: {},  //匯出圖片
            dataView: {},     //資料檢視(可操作)
            magicType: {      //動態型別切換(切換為其他檢視)
              type: ['bar', 'line'],
            },
            dataZoom: {},     //資料區域縮放
            restore: {},      //重置檢視
          },
        },
        //篩選 配合series使用 data中的值就是series陣列中每個物件的name值
   
 

直角座標系的常用配置

 var option = {
        grid: {
          show: true,
          borderWidth: 10,
          borderColor:'skyblue',
          width:100,
          height:80,
          left:100,
          top:100
        },
        xAxis: {
          type: 'category',
          data: xData,
          position:'top'
        },
        yAxis: {
          type: 'value',
          position:'right'
        },
     //區域縮放
            dataZoom: [
           //start|end:資料視窗分為起始|結束百分比
          { type: 'slider', xAxisIndex: 0, start: 0, end: 0 }, 
          { type: 'slider', yAxisIndex: 0 },
        ],
     }
 

柱狀圖

    var xDataArr = [
        '張三',
        '李四',
        '王五',
        '閏土',
        '小明',
        '茅臺',
        '二妞',
        '大強',
      ] // 準備x軸資料
      var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
      var yDataArr1 = [77, 82, 73, 67, 104, 80, 62, 96]
      let option = {
        legend: {
          data: ['語文', '英語'],
        },
        xAxis: {
          type: 'category',
          data: xDataArr,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '語文',
            type: 'bar',
            data: yDataArr,
            itemStyle: {
              color: {
                // 漸變方式
                type: 'linear',
                // 漸變方向
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                // 漸變區間及漸變顏色
                colorStops: [
                  { offset: 0, color: 'pink' },
                  { offset: 1, color: 'skyblue' },
                ],
              },
            },
            //標誌點呈現最大最小值
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            //標誌線呈現平均值
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
            //數值顯示屬性
            label: {
              show: true,
              rotate: 50,
              position: 'top',
            },
            //柱寬
            barWidth: '30%',
          },
          {
            name: '英語',
            type: 'bar',
            data: yDataArr1,
          },
        ],
      }
 

折線圖

 let option = {
        xAxis: {
          type: 'category',
          data: xDataArr,
          //橫軸第一個元素是否緊挨邊緣
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          //縱軸脫離0值比例
          scale: true,
        },
        series: [
          {
            name: '康師傅',
            type: 'line',
            data: yDataArr,
            markPoint: {
              data: [{ type: 'max' }, { type: 'min' }],
            },
            markLine: {
              data: [{ type: 'average' }],
            },
            // 標註區間
            markArea: {
              data: [
                [{ xAxis: '1月' }, { xAxis: '2月' }],
                [{ xAxis: '7月' }, { xAxis: '9月' }],
              ],
            },
            //平滑折線
            smooth: true,
            // 折線樣式
            lineStyle: {
              color: 'green',
              type: 'dotted', //dashed dotted solid
            },
            //折線生成面積的樣式
            areaStyle: {},
            //實現堆疊圖
            stack: 'all',
          },
          {
            name: '統一',
            type: 'line',
            data: yDataArr1,
            areaStyle: {},
            //實現堆疊圖
            stack: 'all',
          },
        ],
      }

散點圖[[],[],[]...]

data=[{},{}....]  資料  
 var axisData = []
      for (var i = 0; i < data.length; i++) {
        var height = data[i].height
        var weight = data[i].weight
        var newArr = [height, weight]
        axisData.push(newArr)
      }
      console.log(axisData)
      var mCharts = echarts.init(document.querySelector('div'))
      var option = {
        xAxis: {
          type: 'value',
          scale: true,
        },
        yAxis: {
          type: 'value',
          scale: true,
        },
        series: [
          {
            // type: 'scatter',
            type: 'effectScatter', // 指明圖表為帶漣漪動畫的散點圖
            showEffectOn: 'emphasis', // 出現漣漪動畫的時機 render emphasis滑鼠停滯上方時
            rippleEffect: {
              scale: 10, // 漣漪動畫時, 散點的縮放比例
            },
            data: axisData,
            // symbolSize: 30
            symbolSize: function (arg) {
              // 控制散點的大小
              // console.log(arg)
              var height = arg[0] / 100
              var weight = arg[1]
              // bmi = 體重kg / (身高m*身高m)   大於28,就代表肥胖
              var bmi = weight / (height * height)
              if (bmi > 28) {
                return 20
              }
              return 5
            },
            itemStyle: {
              // 控制散點的樣式
              color: function (arg) {
                // console.log(arg)
                var height = arg.data[0] / 100
                var weight = arg.data[1]
                // bmi = 體重kg / (身高m*身高m)   大於28,就代表肥胖
                var bmi = weight / (height * height)
                if (bmi > 28) {
                  return 'red'
                }
                return 'green'
              },
            },
          },
        ],
      }

餅圖[{name:xx,value:yy},{name:xx,value:yy}...]

      var option = {
        series: [
          {
            type: 'pie',
            data: pieData,
            label: {
              show: true,
              formatter: function (arg) {
                return (
                  '在' +
                  arg.name +
                  '花費了' +
                  arg.value +
                  '元 佔比' +
                  arg.percent +
                  '%'
                )
              },
            },
            // radius: 40,    設定半徑
            // radius:["50%","75%"]    //圓環圖
            roseType: 'radius', //南丁格爾圖  根據半徑據數值決定
            selectedMode: 'single', //single|multiple 單個|多個選中偏移
            selectedOffset: 30,   //偏移量
          },
        ],
      }

地圖基本操作

準備基礎模板→準備地圖資料→使用Ajax獲取地圖資料， 在Ajax的回撥函式中, 往 echarts 全域性物件註冊地圖的 json 資料→配置 geo 節點→將series下的資料與geo關聯起來type: 'map',geoIndex: 0→結合visualMap實現控制

     $.get('/map/china.json', function (ret) {
        echarts.registerMap('chinaMap', ret)
        let option = {
          geo: {
            type: 'map',
            map: 'chinaMap',
            roam: true, //設定允許縮放
            label: {
              show: true,
            },
            zoom: 1, //初始化縮放比例
            /*  center: [87.6, 43.79], 設定地圖中心經緯度 */
          },
          series: [
            {
              type: 'map',
              geoIndex: 0, //關聯第一個geo
              data: airData,
            },
            {
              data: scatterDate,
              type: 'effectScatter',
              coordinateSystem: 'geo', //指明散點使用的座標系統
              rippleEffect: {
                scale: 10,
              },
            },
          ],
          visualMap: {
            min: 0,
            max: 300,
            // 控制顏色漸變範圍
            inRange: {
              color: ['white', 'red'],
            },
            // 範圍控制
            calculable: true,
          },
        }
        mCharts.setOption(option)
      })

雷達圖

let HW = [80, 90, 80, 82, 90]
      let ZX = [70, 80, 71, 77, 72]
      let dataMax = [
        { name: '易用性', max: 100 },
        { name: '功能', max: 100 },
        { name: '拍照', max: 100 },
        { name: '跑分', max: 100 },
        { name: '續航', max: 100 },
      ]
      let option = {
        legend: {
          data: ['華為手機', '中興手機'],
        },
        radar: {
          // 設定各個維度的最大值
          indicator: dataMax,
          // 指定雷達圖形
          shape:'circle'
        },
        series: [
          {
            data: [
              { name: '華為手機', value: HW },
              { name: '中興手機', value: ZX },
            ],
            type: 'radar',
            label: {
              show: true,
            },
            // 為雷達面積填充陰影
            areaStyle:{}
          },
        ],
      }

儀表盤

 let gaugeData = [{ value: 80,itemStyle:{color:'skyblue'}}, { value: 66,itemStyle:{color:'pink'}}]
      let option = {
        series: [
          {
            type: 'gauge',
            data: gaugeData,
            // 設定儀表盤數值範圍
            min:10,   
            max:90
          },
        ],
      }

圖表自適應的實現

    //監聽視窗變化  
    window.onresize = function(){
        mCharts.resize()     //mCharts是圖表例項變化
      }

圖表的動畫

    //載入動畫
    mCharts.showLoading()
    //隱藏動畫
    mCharts.hideLOading()
    //增量動畫
    通過事件產生新的option，然後setOption(新的option),新舊option會相互整合
    //動畫的配置
    animation:true||false    //開啟關閉動畫
    animationDuration:2000    //動畫持續時間
    animationEasing:'linear'   //緩動動畫
    animationThreshold:10     //動畫元素的閾值 超過該值動畫將不會顯現

API

echarts方法：
echarts.connect([mCharts,mcharts2])    //將兩個圖表關聯起來 比如儲存圖表1選項就可以圖一圖二一起儲存
​
echarts例項方法：
/*事件繫結|解綁 on|off,
 滑鼠事件包括click、dbclick、mousedown、mousemove、mouseup
 Echarts事件包括legendselectchanged、datazoom、pieselectchanged、mapselectchanged*/
mcharts.on|off('事件',function(arg){arg是包含事件資訊的物件})
//主動觸發事件dispatchAction
mcharts.dispatchAction({
    type:'事件型別',
    seriesIndex:'系列索引'
    dataIndex:'資料索引'
})
//清空圖表例項 可以重新mcharts.setOption(option)
mcharts.clear()
//清除圖表例項 不可恢復
mcharts.dispose()