国产suv精品一区二区33,粗暴调教玩弄np高h小说 ,久久久无码a片观看免费

ECharts的快速上手

ECharts 的入門使用特別簡單, 5分鐘就能夠上手. 他大體分為這幾個(gè)步驟

步驟1：引入 echarts.js 文件
echarts是一個(gè) js 的庫，當(dāng)然得先引入這個(gè)庫文件

<script src="js/echarts.min.js"></script>

步驟2：準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子
這個(gè)盒子通常來說就是我們熟悉的 div ，這個(gè) div 決定了圖表顯示在哪里

<div id="main" style="width: 600px;height:400px;"></div>

步驟3：初始化 echarts 實(shí)例對象
在這個(gè)步驟中, 需要指明圖表最終顯示在哪里的DOM元素

var myChart = echarts.init(document.getElementById('main'))

步驟4：準(zhǔn)備配置項(xiàng)
這步很關(guān)鍵，我們最終的效果，到底是顯示餅圖還是折線圖，基本上都是由配置項(xiàng)決定的

var option = {
  xAxis: {
    type: 'category',
    data: ['小明', '小紅', '小王']
 },
  yAxis: {
    type: 'value'
 },
  series: [
   {
      name: '語文',
      type: 'bar',
      data: [70, 92, 87],
   }
 ]
}

步驟5：將配置項(xiàng)設(shè)置給 echarts 實(shí)例對象

myChart.setOption(option)

通過簡單的5個(gè)步驟, 就能夠把一個(gè)簡單的柱狀圖給顯示在網(wǎng)頁中了.這幾個(gè)步驟中, 步驟4最重要,
一個(gè)圖表最終呈現(xiàn)什么樣子,完全取決于這個(gè)配置項(xiàng).所以對于不同的圖表, 除了配置項(xiàng)會(huì)發(fā)生改變之外,
其他的代碼都是固定不變的.

通用配置

使用 ECharts 繪制出來的圖表, 都天生就自帶一些功能, 這些功能是每一個(gè)圖表都具備的, 我們可以通過
配置, 對這些功能進(jìn)行設(shè)置.
1.標(biāo)題: title

var option = {
  title: {
    text: "成績",  // 標(biāo)題文字
    textStyle: {
      color: 'red' // 文字顏色
   },
    borderWidth: 5,  // 標(biāo)題邊框
    borderColor: 'green', // 標(biāo)題邊框顏色
    borderRadius: 5,  // 標(biāo)題邊框圓角
    left: 20, // 標(biāo)題的位置
    top: 20 // 標(biāo)題的位置
 }
}

image.png

2提示框: tooltip
tooltip 指的是當(dāng)鼠標(biāo)移入到圖表或者點(diǎn)擊圖表時(shí), 展示出的提示框
觸發(fā)類型: trigger

可選值有item\axis

觸發(fā)時(shí)機(jī): triggerOn

可選值有 mouseOver\click

格式化顯示: formatter
字符串模板

var option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    formatter: '{b}:{c}'
 }
}
// 這個(gè){b} 和 {c} 所代表的含義不需要去記, 在官方文檔中有詳細(xì)的描述

image.png

回調(diào)函數(shù)

var option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    formatter: function (arg) {
      return arg.name + ':' + arg.data
   }
 }
}

image.png

3.工具按鈕: toolbox
toolbox 是 ECharts 提供的工具欄, 內(nèi)置有導(dǎo)出圖片，數(shù)據(jù)視圖, 重置, 數(shù)據(jù)區(qū)域縮放, 動(dòng)態(tài)類型切
換五個(gè)工具
工具欄的按鈕是配置在 feature 的節(jié)點(diǎn)之下

var option = {
  toolbox: {
    feature: {
      saveAsImage: {}, // 將圖表保存為圖片
      dataView: {}, // 是否顯示出原始數(shù)據(jù)
      restore: {}, // 還原圖表
      dataZoom: {}, // 數(shù)據(jù)縮放
      magicType: { // 將圖表在不同類型之間切換,圖表的轉(zhuǎn)換需要數(shù)據(jù)的支持
        type: ['bar', 'line']
     }
   }
 }
}

image.png

5.圖例: legend
legend 是圖例,用于篩選類別,需要和 series 配合使用
legend 中的 data 是一個(gè)數(shù)組
legend 中的 data 的值需要和 series 數(shù)組中某組數(shù)據(jù)的 name 值一致

var option = {
  legend: {
    data: ['語文', '數(shù)學(xué)']
 },
  xAxis: {
    type: 'category',
    data: ['張三', '李四', '王五', '閏土', '小明', '茅臺(tái)', '二妞', '大強(qiáng)']
 },
  yAxis: {
    type: 'value'
 },
  series: [
   {
      name: '語文',
      type: 'bar',
      data: [88, 92, 63, 77, 94, 80, 72, 86]
   }, {

      name: '數(shù)學(xué)',
      type: 'bar',
      data: [93, 60, 61, 82, 95, 70, 71, 86]
   }
 ]
}

image.png

折線圖的實(shí)現(xiàn)步驟

1 ECharts 最基本的代碼結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
<script>
 var mCharts = echarts.init(document.querySelector("div"))
 var option = {}
 mCharts.setOption(option)
</script>
</body>
</html>

此時(shí) option 是一個(gè)空空如也的對象

2 準(zhǔn)備 x 軸的數(shù)據(jù)

var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
'10月', '11月', '12月']

3 準(zhǔn)備 y 軸的數(shù)據(jù)

var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800,
600]

4 準(zhǔn)備 option , 將 series 中的 type 的值設(shè)置為: line

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr
 },
  yAxis: {
    type: 'value'
 },
  series: [
   {
      type: 'line',
      data: yDataArr
   }
 ]
}

image.png

折線圖的常見效果

最大值\最小值

var option = {
  series: [
   {
    
        data: [
         {
            type: 'max',
            name: '最大值'
         }, {
            type: 'min',
            name: '最小值'
         }
       ]
     }
   }

image.png

平均值 markLine

var option = {
  series: [
   {
      ......
      markLine: {
        data: [
         {
            type: 'average',
            name: '平均值'
         }
       ]
     }
   }
 ]
}

image.png

標(biāo)注區(qū)間 markArea

var option = {
  series: [
   {
      ......
markArea: {
       data: [
       [
        {
          xAxis: '1月'
        }, {
          xAxis: '2月'
        }
       ],
       [
        {
          xAxis: '7月'
        }, {
          xAxis: '8月'
        }
       ]
      ]
     }
   }
 ]
}

image.png

線條控制

1.平滑線條 smooth

var option = {
  series: [
   {
      ......
smooth: true
   }
 ]
}

image.png

線條樣式 lineStyle

var option = {
  series: [
   {
      ......
      smooth: true,
      lineStyle: {
        color: 'green',
        type: 'dashed' // 可選值還有 dotted  solid
     }
   }
 ]
}

image.png

填充風(fēng)格 areaStyle

var option = {
  series: [
   {
      type: 'line',
      data: yDataArr,
      areaStyle: {
        color: 'pink'
     }
   }
 ]
}

image.png

緊挨邊緣 boundaryGap
boundaryGap 是設(shè)置給 x 軸的, 讓起點(diǎn)從 x 軸的0坐標(biāo)開始

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr,
    boundaryGap: false
 }
}

image.png

縮放, 脫離0值比例
如果每一組數(shù)據(jù)之間相差較少, 且都比0大很多, 那么有可能會(huì)出現(xiàn)這種情況

var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005,
3004, 3001, 3009]  // 此時(shí)y軸的數(shù)據(jù)都在3000附近, 每個(gè)數(shù)之間相差不多

image.png

這顯然不是我們想要的效果, 因此可以配置上 scale , 讓其擺脫0值比例
scale 配置
scale 應(yīng)該配置給 y 軸

var option = {
  yAxis: {
    type: 'value',
    scale: true
 }
}

image.png

堆疊圖

堆疊圖指的是, 同個(gè)類目軸上系列配置相同的 stack 值后，后一個(gè)系列的值會(huì)在前一個(gè)系列的值上相加
如果在一個(gè)圖表中有兩個(gè)或者多個(gè)折線圖, 在沒有使用堆疊配置的時(shí)候, 效果如下:

<script>
 var mCharts = echarts.init(document.querySelector("div"))
 var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
 var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
 var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
 var option = {
  xAxis: {
   type: 'category',
   data: xDataArr
 },
  yAxis: {
   type: 'value',
   scale: true
 },
  series: [
  {
    type: 'line',
    data: yDataArr1
  },
  {
    type: 'line',
    data: yDataArr2
  }
 ]
}
 mCharts.setOption(option)
</script>

image.png

使用了堆疊圖之后:

var option = {
  series: [
   {
      type: 'line',
      data: yDataArr1,
      stack: 'all'  // series中的每一個(gè)對象配置相同的stack值, 這個(gè)all可以任意寫
   },
   {
      type: 'line',
      data: yDataArr2,
      stack: 'all' // series中的每一個(gè)對象配置相同的stack值, 這個(gè)all可以任意寫
   }
 ]
}

image.png

藍(lán)色這條線的y軸起點(diǎn), 不再是y軸, 而是紅色這條線對應(yīng)的點(diǎn). 所以相當(dāng)于藍(lán)色是在紅色這條線的基
礎(chǔ)之上進(jìn)行繪制. 基于前一個(gè)圖表進(jìn)行堆疊

散點(diǎn)圖的實(shí)現(xiàn)步驟

1 ECharts 最基本的代碼結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
<script>
 var mCharts = echarts.init(document.querySelector("div"))
 var option = {}
 mCharts.setOption(option)
</script>
</body>
</html>

2 準(zhǔn)備 x 軸和 y 軸的數(shù)據(jù)

var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, {
"gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female",
"height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157,
"weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, {
"gender": "female", "height": 170, "weight": 59 }, { "gender": "female",
"height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166,
"weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, {
"gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female",
"height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9,
"weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, {
"gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female",
"height": 160, "weight": 50 }, { "gender": "female", "height": 147.2,
"weight": 49.8 },...此處省略...]

假設(shè)這個(gè)數(shù)據(jù)是從服務(wù)器獲取到的, 數(shù)組中的每一個(gè)元素都包含3個(gè)維度的數(shù)據(jù): 性別,身高,體重, 而
散點(diǎn)圖需要的數(shù)據(jù)是一個(gè)二維數(shù)組, 所以我們需要將從服務(wù)器獲取到的這部分?jǐn)?shù)據(jù),通過代碼生成散
點(diǎn)圖需要的數(shù)據(jù)

var axisData = []
for (var i = 0; i < data.length; i++) {
  var height = data[i].height
  var weight = data[i].weight
  var itemArr = [height, weight]
  axisData.push(itemArr)
}

axisData 就是一個(gè)二維數(shù)組, 數(shù)組中的每一個(gè)元素還是一個(gè)數(shù)組, 最內(nèi)層數(shù)組中有兩個(gè)元素, 一個(gè)
代表身高, 一個(gè)代表體重

3 準(zhǔn)備配置項(xiàng)
xAxis 和 yAxis 的 type 都要設(shè)置為 value
在 series 下設(shè)置 type:scatter

var option = {
  xAxis: {
    type: 'value'
 },
  yAxis: {
    type: 'value'
 },
  series: [
   {
      type: 'scatter',
      data: axisData
   }
 ]
}

4 調(diào)整配置項(xiàng), 脫離0值比例
給 xAxis 和 yAxis 配置 scale 的值為 true

var option = {
  xAxis: {
    type: 'value',
    scale: true
 },
  yAxis: {
    type: 'value',
    scale: true
 },
  series: [
   {
      type: 'scatter',
      data: axisData,
   }
 ]
}

image.png

散點(diǎn)圖的常見效果

氣泡圖效果
要能夠達(dá)到氣泡圖的效果, 其實(shí)就是讓每一個(gè)散點(diǎn)的大小不同, 讓每一個(gè)散點(diǎn)的顏色不同
symbolSize控制散點(diǎn)的大小
itemStyle.color 控制散點(diǎn)的顏色
這兩個(gè)配置項(xiàng)都支持固定值的寫法, 也支持回調(diào)函數(shù)的寫法
固定值的寫法如下:

var option = {
  series: [
   {
      type: 'scatter',
      data: axisData,
      symbolSize: 25,
      itemStyle: {
        color: 'green',
     }
   }
 ]
}

image.png

回調(diào)函數(shù)的寫法如下:

var option = {
  series: [
   {
      type: 'scatter',
      data: axisData,
      symbolSize: function (arg) {
        var weight = arg[1]
        var height = arg[0] / 100
        // BMI > 28 則代表肥胖, 肥胖的人用大的散點(diǎn)標(biāo)識(shí), 正常的人用小散點(diǎn)標(biāo)識(shí)
        // BMI: 體重/ 身高*身高   kg m
        var bmi = weight / (height * height)
        if (bmi > 28) {
          return 20
       }
        return 5
     },
      itemStyle: {
        color: function (arg) {
          var weight = arg.data[1]
          var height = arg.data[0] / 100
          var bmi = weight / (height * height)
          if (bmi > 28) {
            return 'red'
         }
          return 'green'
       }
     }
   }
 ]
}

image.png

漣漪動(dòng)畫效果
type:effectScatter
將 type 的值從 scatter 設(shè)置為 effectScatter 就能夠產(chǎn)生漣漪動(dòng)畫的效果
rippleEffect
rippleEffect 可以配置漣漪動(dòng)畫的大小

var option = {
  series: [
   {
      type: 'effectScatter',
      rippleEffect:{
        scale:3
     }
   }
 ]
}

image.png

showEffectOn
showEffectOn 可以控制漣漪動(dòng)畫在什么時(shí)候產(chǎn)生, 它的可選值有兩個(gè): render 和 emphasis
render 代表界面渲染完成就開始漣漪動(dòng)畫
emphasis 代表鼠標(biāo)移過某個(gè)散點(diǎn)的時(shí)候, 該散點(diǎn)開始漣漪動(dòng)畫

var option = {
  series: [
   {
      type: 'effectScatter',
      showEffectOn: 'emphasis',
      rippleEffect:{
        scale:3
     }
   }
 ]
}

var option = {
series: [
{
type: 'effectScatter',
showEffectOn: 'emphasis',
rippleEffect:{
scale:3
}
}
]
}

結(jié)合地圖
散點(diǎn)圖也經(jīng)常結(jié)合地圖來進(jìn)行地圖區(qū)域的標(biāo)注, 這個(gè)效果將在講解地圖時(shí)實(shí)現(xiàn)

散點(diǎn)圖的特點(diǎn)
散點(diǎn)圖可以幫助我們推斷出不同維度數(shù)據(jù)之間的相關(guān)性, 比如上述例子中,看得出身高和體重是正相關(guān), 身
高越高, 體重越重
散點(diǎn)圖也經(jīng)常用在地圖的標(biāo)注上

直角坐標(biāo)系的常見配置

直角坐標(biāo)系的圖表指的是帶有x軸和y軸的圖表, 常見的直角坐標(biāo)系的圖表有: 柱狀圖折線圖散點(diǎn)圖
針對于直角坐標(biāo)系的圖表, 有一些通用的配置

配置1: 網(wǎng)格 grid
grid是用來控制直角坐標(biāo)系的布局和大小, x軸和y軸就是在grid的基礎(chǔ)上進(jìn)行繪制的
顯示 grid
show: true
grid 的邊框
borderWidth : 10
grid 的位置和大小
left top right bottom
width height

var option = {
  grid: {
    show: true, // 顯示grid
    borderWidth: 10, // grid的邊框?qū)挾?    borderColor: 'red', // grid的邊框顏色
    left: 100, // grid的位置
    top: 100,
    width: 300, // grid的大小
    height: 150
 }
}

配置2: 坐標(biāo)軸 axis
坐標(biāo)軸分為x軸和y軸, 一個(gè) grid 中最多有兩種位置的 x 軸和 y 軸
坐標(biāo)軸類型 type
value : 數(shù)值軸, 自動(dòng)會(huì)從目標(biāo)數(shù)據(jù)中讀取數(shù)據(jù)
category : 類目軸, 該類型必須通過 data 設(shè)置類目數(shù)據(jù)
坐標(biāo)軸位置
xAxis : 可取值為 top 或者 bottom
yAxis : 可取值為 left 或者 right

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr,
    position: 'top'
 },
  yAxis: {
    type: 'value',
    position: 'right'
 }
}

配置3: 區(qū)域縮放 dataZoom
dataZoom 用于區(qū)域縮放, 對數(shù)據(jù)范圍過濾, x軸和y軸都可以擁有, dataZoom 是一個(gè)數(shù)組, 意味著
可以配置多個(gè)區(qū)域縮放器
區(qū)域縮放類型 type
slider : 滑塊
inside : 內(nèi)置, 依靠鼠標(biāo)滾輪或者雙指縮放
產(chǎn)生作用的軸
xAxisIndex :設(shè)置縮放組件控制的是哪個(gè) x 軸, 一般寫0即可
yAxisIndex :設(shè)置縮放組件控制的是哪個(gè) y 軸, 一般寫0即可
指明初始狀態(tài)的縮放情況
start : 數(shù)據(jù)窗口范圍的起始百分比
end : 數(shù)據(jù)窗口范圍的結(jié)束百分比

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr
 },
  yAxis: {
    type: 'value'
 },
  dataZoom: [
   {
      type: 'slider',
      xAxisIndex: 0
   },
   {
      type: 'slider',
      yAxisIndex: 0,
      start: 0,
      end: 80
   }
 ]
}

image.png

需要注意的是, 針對于非直角坐標(biāo)系圖表, 比如餅圖 地圖 等, 以上三個(gè)配置可能就不會(huì)生效了

餅圖的實(shí)現(xiàn)步驟

1 ECharts 最基本的代碼結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {}
    mCharts.setOption(option)
  </script>
</body>
</html>

2 準(zhǔn)備數(shù)據(jù)

var pieData = [
 {
    value: 11231,
    name: "淘寶",
 },
 {
    value: 22673,
    name: "京東"
 },
 {
    value: 6123,
    name: "唯品會(huì)"
 },
 {
    value: 8989,
    name: "1號店"
 },
 {
    value: 6700,
    name: "聚美優(yōu)品"
 }
]

3 準(zhǔn)備配置項(xiàng) 在 series 下設(shè)置 type:pie

var option = {
  series: [
   {
      type: 'pie',
      data: pieData
   }
 ]
}

image.png

注意:
餅圖的數(shù)據(jù)是由 name 和 value 組成的字典所形成的數(shù)組
餅圖無須配置 xAxis 和 yAxis

餅圖的常見效果

顯示數(shù)值
label.show : 顯示文字
label.formatter : 格式化文字

var option = {
  series: [
  {
    type: 'pie',
    data: pieData,
    label: {
     show: true,
     formatter: function (arg) {
      return arg.data.name + '平臺(tái)' + arg.data.value + '元\n' +
arg.percent + '%'
    }
   }
  }
 ]

南丁格爾圖
南丁格爾圖指的是每一個(gè)扇形的半徑隨著數(shù)據(jù)的大小而不同, 數(shù)值占比越大, 扇形的半徑也就越大
roseType:'radius'

 var option = {
  series: [
{
    type: 'pie',
    data: pieData,
    label: {
     show: true,
     formatter: function (arg) {
      return arg.data.name + '平臺(tái)' + arg.data.value + '元\n' +
arg.percent + '%'
    }
   },
    roseType: 'radius'
  }
 ]
}

image.png

選中效果
selectedMode: 'multiple'
選中模式，表示是否支持多個(gè)選中，默認(rèn)關(guān)閉，支持布爾值和字符串，字符串取值可
選 'single' ， 'multiple' ，分別表示單選還是多選
selectedOffset: 30
選中扇區(qū)的偏移距離

var option = {
  series: [
  {
    type: 'pie',
    data: pieData,
    selectedMode: 'multiple', //
    selectedOffset: 30
  }
 ]
}

image.png

圓環(huán)
radius
餅圖的半徑。可以為如下類型：
number ：直接指定外半徑值。 string ：例如， '20%' ，表示外半徑為可視區(qū)尺寸（容器高寬中
較小一項(xiàng)）的 20% 長度。 Array. ：數(shù)組的第一項(xiàng)是內(nèi)半徑，第二項(xiàng)是外半徑, 通過 Array , 可以
將餅圖設(shè)置為圓環(huán)圖

var option = {
  series: [
   {
      type: 'pie',
      data: pieData,
      radius: ['50%', '70%']
   }
 ]
}

image.png

地圖

-地圖圖表的使用方式
百度地圖API : 使用百度地圖的 api , 它能夠在線聯(lián)網(wǎng)展示地圖, 百度地圖需要申請 ak
矢量地圖 : 可以離線展示地圖, 需要開發(fā)者準(zhǔn)備矢量地圖數(shù)據(jù)
接下來的實(shí)現(xiàn)是通過矢量圖的方式來實(shí)現(xiàn)的

矢量地圖的實(shí)現(xiàn)步驟

1 ECharts 最基本的代碼結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {}
    mCharts.setOption(option)
  </script>
</body>
</html>

2 準(zhǔn)備中國的矢量 json 文件, 放到 json/map/ 目錄之下

image.png
3 使用 Ajax 獲取 china.json

$.get('json/map/china.json', function (chinaJson) {
})

4 在Ajax的回調(diào)函數(shù)中, 往 echarts 全局對象注冊地圖的 json 數(shù)據(jù)
echarts.registerMap('chinaMap', chinaJson)

$.get('json/map/china.json', function (chinaJson) {
 echarts.registerMap('chinaMap', chinaJson)
})

5 獲取完數(shù)據(jù)之后, 需要配置 geo 節(jié)點(diǎn), 再次的 setOption
type : 'map'
map : 'chinaMap'

var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (chinaJson) {
  echarts.registerMap('chinaMap', chinaJson)
  var option = {
    geo: {
      type: 'map',// map是一個(gè)固定的值
      map: 'chinaMap',//chinaMap需要和registerMap中的第一個(gè)參數(shù)保持一致
   }
 };
  mCharts.setOption(option)
})

image.png

注意: 需要注意的是, 由于在代碼中使用了 Ajax , 所以, 關(guān)于此文件的打開, 不能以 file 的協(xié)議打開, 應(yīng)
該將其置于 HTTP 的服務(wù)之下方可正常展示地圖

地圖的常見配置

縮放拖動(dòng): roam

var option = {
  geo: {
    type: 'map',// map是一個(gè)固定的值
    map: 'chinaMap',//chinaMap需要和registerMap中的第一個(gè)參數(shù)保持一致,
    roam: true, // 運(yùn)行使用鼠標(biāo)進(jìn)行拖動(dòng)和縮放
 }
}

名稱顯示: label

var option = {
  geo: {
    type: 'map',// map是一個(gè)固定的值
    map: 'chinaMap',//chinaMap需要和registerMap中的第一個(gè)參數(shù)保持一致,
    roam: true,
    label: {
      show: true
   }
 }
}

image.png

初始縮放比例: zoom
地圖中心點(diǎn): center

var option = {
  geo: {
    type: 'map',// map是一個(gè)固定的值
    map: 'chinaMap',//chinaMap需要和registerMap中的第一個(gè)參數(shù)保持一致,
    roam: true,
    label: {
      show: true
   },
    zoom: 0.8, // 地圖的縮放比例, 大于1代表放大, 小于1代表縮小
    center: [87.617733, 43.792818] // 當(dāng)前視角的中心點(diǎn)，用經(jīng)緯度表示
 }
}

image.png

地圖的常見效果

顯示某個(gè)區(qū)域
準(zhǔn)備安徽省的矢量地圖數(shù)據(jù)

image.png
加載安徽省地圖的矢量數(shù)據(jù)

$.get('json/map/anhui.json', function (anhuiJson) {
})

在Ajax的回調(diào)函數(shù)中注冊地圖矢量數(shù)據(jù)
echarts.registerMap('anhui', anhuiJson)
配置 geo 的 type:'map' , map:'anhui'
通過 zoom 調(diào)整縮放比例
通過 center 調(diào)整中心點(diǎn)

<script>
  var mCharts = echarts.init(document.querySelector("div"))
  $.get('json/map/anhui.json', function (anhuiJson) {
    console.log(anhuiJson)
    echarts.registerMap('anhui', anhuiJson)
    var option = {
      geo: {
type: 'map',
        map: 'anhui',
        label: {
          show: true
       },
        zoom: 1.2,
        center: [116.507676, 31.752889]
     }
   };
    mCharts.setOption(option)
 })
</script>

image.png

不同城市顏色不同

1.顯示基本的中國地圖

<body>
  <div style="width: 600px;height:400px;border:1px solid red"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    $.get('json/map/china.json', function (chinaJson) {
      echarts.registerMap('chinaMap', chinaJson)
      var option = {
        geo: {
          type: 'map',
          map: 'chinaMap',
          roam: true,
          label: {
            show: true
         }
       }
     }
      mCharts.setOption(option)
   })
  </script>
</body>
</html>

2.準(zhǔn)備好城市空氣質(zhì)量的數(shù)據(jù), 并且將數(shù)據(jù)設(shè)置給 series

var airData = [{ name: '北京', value: 39.92 },{ name: '天津', value:
39.13 },{ name: '上海', value: 31.22 },{ name: '重慶', value: 66 },{
name: '河北', value: 147 },{ name: '河南', value: 113 },{ name: '云南',
value: 25.04 },{ name: '遼寧', value: 50 },{ name: '黑龍江', value: 114
},{ name: '湖南', value: 175 },{ name: '安徽', value: 117 },{ name: '山
東', value: 92 },{ name: '新疆', value: 84 },{ name: '江蘇', value: 67 },
{ name: '浙江', value: 84 },{ name: '江西', value: 96 },{ name: '湖北',
value: 273 },{ name: '廣西', value: 59 },{ name: '甘肅', value: 99 },{
name: '山西', value: 39 },{ name: '內(nèi)蒙古', value: 58 },{ name: '陜西',
value: 61 },{ name: '吉林', value: 51 },{ name: '福建', value: 29 },{
name: '貴州', value: 71 },{ name: '廣東', value: 38 },{ name: '青海',
value: 57 },{ name: '西藏', value: 24 },{ name: '四川', value: 58 },{
name: '寧夏', value: 52 },{ name: '海南', value: 54 },{ name: '臺(tái)灣',
value: 88 },{ name: '香港', value: 66 },{ name: '澳門', value: 77 },{
name: '南海諸島', value: 55 }]
......
var option = {
  ......
  series: [
   {
      data: airData
   }
 ]
}

3.將 series 下的數(shù)據(jù)和 geo 關(guān)聯(lián)起來
geoIndex: 0
type: 'map'

var option = {
  series: [
   {
      data: airData,
      geoIndex: 0,
      type: 'map'
   }
 ]
}

4.結(jié)合 visualMap 配合使用
visualMap 是視覺映射組件, 和之前區(qū)域縮放 dataZoom 很類似, 可以做數(shù)據(jù)的過濾. 只不過
dataZoom 主要使用在直角坐標(biāo)系的圖表, 而 visualMap 主要使用在地圖或者餅圖中

var option = {
  geo: {
    type: 'map',
    map: 'chinaMap',
    roam: true,
    label: {
      show: true
   }
 },
series: [
   {
      data: airData,
      geoIndex: 0,
      type: 'map'
   }
 ],
  visualMap: {
    min: 0, // 最小值
    max: 300, // 最大值
    inRange: {
      color: ['white', 'red'] // 顏色的范圍
   },
    calculable: true // 是否顯示拖拽用的手柄（手柄能拖拽調(diào)整選中范圍）
 }
}

地圖和散點(diǎn)圖結(jié)合

1.給 series 這個(gè)數(shù)組下增加新的對象
2.準(zhǔn)備好散點(diǎn)數(shù)據(jù),設(shè)置給新對象的 data

var scatterData = [
 {
    value: [117.283042, 31.86119] // 散點(diǎn)的坐標(biāo), 使用的是經(jīng)緯度
 }
]

3.配置新對象的 type

type:effectScatter

讓散點(diǎn)圖使用地圖坐標(biāo)系統(tǒng)

coordinateSystem: 'geo'

讓漣漪的效果更加明顯

rippleEffect: {  scale: 10 }

var option = {
  series: [
   {
      data: airData,
      geoIndex: 0,
      type: 'map'
   }, {
      data: scatterData,
      type: 'effectScatter',
      coordinateSystem: 'geo',
      rippleEffect: {
        scale: 10
     }
   }
 ]
}

image.png

雷達(dá)圖

1 ECharts 最基本的代碼結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
<script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {}
    mCharts.setOption(option)
  </script>
</body>
</html>

2 定義各個(gè)維度的最大值

var dataMax = [
 {
    name: '易用性', max: 100
 },
 {
    name: '功能', max: 100
 },
 {
    name: '拍照', max: 100
 },
 {
    name: '跑分', max: 100
 },
 {
    name: '續(xù)航', max: 100
 }
]

3 準(zhǔn)備具體產(chǎn)品的數(shù)據(jù)

var hwScore = [80, 90, 80, 82, 90]
var zxScore = [70, 82, 75, 70, 78]

4 在 series 下設(shè)置 type:radar

var option = {
  radar: {
    indicator: dataMax
 },
  series: [
   {
      type: 'radar',
      data: [
       {
          name: '華為手機(jī)1',
          value: hwScore
       },
       {
          name: '中興手機(jī)1',
          value: zxScore
       }
     ]
   }
 ]
}

image.png

雷達(dá)圖的常見效果

顯示數(shù)值 label

var option = {
  series: [
   {
      type: 'radar',
      label: {
        show: true
     },
      data: [
       {
          name: '華為手機(jī)1',
          value: hwScore
       },
       {
          name: '中興手機(jī)1',
          value: zxScore
       }
     ]
   }
 ]
}

image.png

區(qū)域面積 areaStyle

var option = {
  series: [
   {
      type: 'radar',
      label: {
        show: true
     },
      areaStyle: {},
      data: [
       {
          name: '華為手機(jī)1',
          value: hwScore
       },
       {
          name: '中興手機(jī)1',
          value: zxScore
       }
     ]
   }
 ]
}

image.png

繪制類型 shape
雷達(dá)圖繪制類型，支持 'polygon' 和 'circle'
'polygon' : 多邊形
'circle' 圓形

 var option = {
  radar: {
   indicator: dataMax,
   shape: 'circle'
 },
  series: [
  {
    type: 'radar',
    label: {
      show: true
   },
    data: [
    {
      name: '華為手機(jī)1',
      value: hwScore
    },
    {
      name: '中興手機(jī)1',
      value: zxScore
    }
   ]
  }
 ]
}

image.png

儀表盤圖

1 ECharts 最基本的代碼結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {}
    mCharts.setOption(option)
  </script>
</body>
</html>

2: 準(zhǔn)備數(shù)據(jù), 設(shè)置給 series 下的 data

data:[97]

3: 在 series 下設(shè)置 type:gauge

var option = {
  series: [
   {
      type: 'gauge',
      data: [{
        value: 97,
     }]
   }
 ]
}

image.png

儀表盤的常見效果

數(shù)值范圍: max min
多個(gè)指針: 增加data中數(shù)組的元素
多個(gè)指針顏色的差異: itemStyle

var option = {
  series: [
    {
      type: 'gauge',
      data: [{
        value: 97,
        itemStyle: {
          color: 'pink'
        }
      }, {
        value: 85,
        itemStyle: {
          color: 'green'
        }
      }],
      min: 50
    }
  ]
}

image.png

主題

默認(rèn)主題
ECharts 中默認(rèn)內(nèi)置了兩套主題: light dark
在初始化對象方法 init 中可以指明

var chart = echarts.init(dom, 'light')
var chart = echarts.init(dom, 'dark')

自定義主題

1.在主題編輯器中編輯主題
主題編輯器的地址為: https://www.echartsjs.com/theme-builder/
在該地址中, 你可以定義一個(gè)主題的很多方面的內(nèi)容:

image.png
2.下載主題, 是一個(gè) js 文件
在線編輯完主題之后, 可以點(diǎn)擊下載主題按鈕, 下載主題的js文件

image.png
3.引入主題 js 文件

<script src="js/echarts.min.js"></script>
<script src="js/itcast.js"></script>

其中, itcast.js 就是下載下來的主題文件

4.在 init 方法中使用主題

var mCharts = echarts.init(document.querySelector("div"), 'itcast')

init方法中的第二個(gè)參數(shù)itcast就是主題的名稱, 這個(gè)名稱叫什么我們可以在itcast.js的代碼中
看出

image.png

調(diào)色盤

它是一組顏色，圖形、系列會(huì)自動(dòng)從其中選擇顏色, 不斷的循環(huán)從頭取到尾, 再從頭取到尾, 如此往復(fù).

主題調(diào)色盤

echarts.registerTheme('itcast', {
  "color": [
    "#893448",
    "#d95850",
    "#eb8146",
    "#ffb248",
    "#f2d643",
    "#ebdba4"
 ],
  "backgroundColor": "rgba(242,234,191,0.15)",
  ......
})

全局調(diào)色盤
全局調(diào)色盤是在 option 下增加一個(gè) color 的數(shù)組

var option = {
  // 全局調(diào)色盤
  color: ['red', 'green', 'blue'],
  ......
}
mCharts.setOption(option)

局部調(diào)色盤
局部調(diào)色盤就是在 series 下增加一個(gè) color 的數(shù)組

var option = {
  // 全局調(diào)色盤
  color: ['red', 'green', 'blue'],
  series: [
   {
      type: 'pie',
      data: pieData,
      // 局部調(diào)色盤
      color: ['pink', 'yellow', 'black']
   }
 ]
}
mCharts.setOption(option)

需要注意一點(diǎn)的是, 如果全局的調(diào)色盤和局部的調(diào)色盤都設(shè)置了, 局部調(diào)色盤會(huì)產(chǎn)生效果, 這里面遵循的是就近原則

漸變顏色的實(shí)現(xiàn)

在 ECharts 中, 支持線性漸變和徑向漸變兩種顏色漸變的方式
線性漸變
線性漸變的類型為 linear , 他需要配置線性的方向, 通過 x, y, x2, y2 即可進(jìn)行配置
x , y , x2 , y2 , 范圍從 0 - 1，相當(dāng)于在圖形包圍盒中的百分比，如果 global 為 true ，則
該四個(gè)值是絕對的像素位置
在下述代碼中的 0 0 0 1 意味著從上往下進(jìn)行漸變

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="js/echarts.min.js"></script>
</head>
<body>
 <div style="width: 600px;height:400px"></div>
 <script>
 var mCharts = echarts.init(document.querySelector("div"))
 var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺(tái)', '二妞', '大
強(qiáng)']
 var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
 var option = {
  xAxis: {
   type: 'category',
   data: xDataArr
 },
  yAxis: {
   type: 'value'
 },
  series: [
  {
    type: 'bar',
    data: yDataArr,
    itemStyle: {
     color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
       offset: 0, color: 'red' // 0% 處的顏色
     }, {
       offset: 1, color: 'blue' // 100% 處的顏色
     }],
      globalCoord: false // 缺省為 false
    }
   }
  }
 ]
};
 mCharts.setOption(option)
</script>
</body>
</html>

image.png

徑向漸變
線性漸變的類型為 radial , 他需要配置徑向的方向, 通過 x , y , r 即可進(jìn)行配置
前三個(gè)參數(shù)分別是圓心 x , y 和半徑，取值同線性漸變
在下述代碼中的 0.5 0.5 0.5 意味著從柱的重點(diǎn)點(diǎn), 向外徑向擴(kuò)散半徑為寬度一半的圓

series: [
  {
     itemStyle: {
       color: {
         type: 'radial',
         x: 0.5,
         y: 0.5,
         r: 0.5,
         colorStops: [{
           offset: 0, color: 'red' // 0% 處的顏色
        }, {
           offset: 1, color: 'blue' // 100% 處的顏色
        }],
         global: false // 缺省為 false
      }
    }
  }
]

image.png

樣式

直接樣式
itemStyle
textStyle
lineStyle
areaStyle
label

data: [
 {
value: 11231,
name: "淘寶",
itemStyle: {
color: 'black'
}
}
]
title: {
  text: '我是標(biāo)題',
  textStyle: {
    color: 'red'
 }
}
label: {
color: 'green'
}

這些樣式一般都可以設(shè)置顏色或者背景或者字體等樣式, 他們會(huì)覆蓋主題中的樣式
高亮樣式
圖表中, 其實(shí)有很多元素都是有兩種狀態(tài)的, 一種是默認(rèn)狀態(tài), 另外一種就是鼠標(biāo)滑過或者點(diǎn)擊形成
的高亮狀態(tài). 而高亮樣式是針對于元素的高亮狀態(tài)設(shè)定的樣式
那它的使用也非常簡單,在 emphasis 中包裹原先的 itemStyle 等等, 我們來試一下

series: [
{
type: 'pie',
label: {
color: 'green'
},
emphasis: {
label: {
color: 'red'
},
},
data: [{
value: 11231,
name: "淘寶",
itemStyle: {
color: 'black'
},
emphasis: {
itemStyle: {
color: 'blue'
},
}
},

自適應(yīng)

步驟1: 監(jiān)聽窗口大小變化事件
步驟2: 在事件處理函數(shù)中調(diào)用 ECharts 實(shí)例對象的 resize 即可

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style=" height:400px;border:1px solid red"></div>
<script>
  var mCharts = echarts.init(document.querySelector("div"))
  var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺(tái)', '二妞', '大
強(qiáng)']
  var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
  var option = {
    xAxis: {
      type: 'category',
      data: xDataArr
   },
    yAxis: {
      type: 'value'
   },
    series: [
     {
        type: 'bar',
        data: yDataArr
     }
   ]
 };
mCharts.setOption(option)
  // 監(jiān)聽window大小變化的事件
  window.onresize = function () {
    // 調(diào)用echarts示例對象的resize方法
    mCharts.resize()
 }
  // window.onresize = mCharts.resize
</script>
</body>
</html>

動(dòng)畫的使用

加載動(dòng)畫
eCharts 已經(jīng)內(nèi)置好了加載數(shù)據(jù)的動(dòng)畫, 我們只需要在合適的時(shí)機(jī)顯示或者隱藏即可
顯示加載動(dòng)畫

mCharts.showLoading()
一般, 我們會(huì)在獲取圖表數(shù)據(jù)之前 顯示加載動(dòng)畫

image.png

隱藏加載動(dòng)畫

mCharts.hideLoading()
一般, 我們會(huì)在獲取圖表數(shù)據(jù)之后 隱藏加載動(dòng)畫, 顯示圖表

增量動(dòng)畫

所有數(shù)據(jù)的更新都通過 setOption 實(shí)現(xiàn), 我們不用考慮數(shù)據(jù)到底產(chǎn)生了那些變化, ECharts 會(huì)找到兩組
數(shù)據(jù)之間的差異然后通過合適的動(dòng)畫去表現(xiàn)數(shù)據(jù)的變化。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
<button>修改數(shù)據(jù)</button>
  <button id="btnAdd">增加數(shù)據(jù)</button>
<script>
  var mCharts = echarts.init(document.querySelector("div"))
  var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺(tái)', '二妞', '大強(qiáng)']
  var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
  var option = {
    xAxis: {
      type: 'category',
      data: xDataArr
   },
    yAxis: {
      type: 'value'
   },
    series: [
     {
        type: 'bar',
        data: yDataArr
     }
   ]
 };
  mCharts.setOption(option)
  var btn = document.querySelector('button');
  btn.onclick = function () {
    var newArr = [68, 62, 93, 67, 64, 90, 52, 36]
    // setOption的方法可以被調(diào)用多次
    // 新的option 和舊的option配置
    // 新舊option配置項(xiàng)他們之間不是替換的關(guān)系,是相互整合的關(guān)系
    // 我們在設(shè)置新的option的時(shí)候,只需要考慮到將變化的配置項(xiàng)配置就可以了
    var option = {
      series: [
       {
          data: newArr,
       }
     ]
   };
    mCharts.setOption(option)
 }
  var btnAdd = document.querySelector('#btnAdd')
  btnAdd.onclick = function () {
    setInterval(function () {
      //增加數(shù)據(jù)
      xDataArr.push('小明')
      yDataArr.push(parseInt(50 + Math.random() * 10))
      var option = {
        xAxis: {
          data: xDataArr
       },
        series: [
         {
            data: yDataArr
         }
       ]
     }
      mCharts.setOption(option)
   }, 1000)
 }
</script>
</body>
</html>

動(dòng)畫的配置

開啟動(dòng)畫
animation: true
動(dòng)畫時(shí)長
animationDuration: 5000
緩動(dòng)動(dòng)畫
animationEasing : 'bounceOut'
linear ,線性變化, 這樣動(dòng)畫效果會(huì)很均勻
bounceOut ,這樣動(dòng)畫效果會(huì)有一個(gè)回彈效果
緩動(dòng)動(dòng)畫的可選值如下圖:

image.png

動(dòng)畫閾值
animationThreshold: 8
單種形式的元素?cái)?shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫

交互API

全局echarts對象

全局 echarts 對象是引入 echarts.js 文件之后就可以直接使用的
echarts.init

初始化ECharts實(shí)例對象
使用主題
echarts.registerTheme
注冊主題
只有注冊過的主題,才能在init方法中使用該主題
echarts.registerMap

// 注冊地圖數(shù)據(jù)
$.get('json/map/china.json', function (chinaJson) {
      echarts.registerMap('china', chinaJson);
});
geo組件使用地圖數(shù)據(jù)
var option = {
  geo: {
     type: 'map',
     map: 'china',
 },
})

echarts.connect
一個(gè)頁面中可以有多個(gè)獨(dú)立的圖表
每一個(gè)圖表對應(yīng)一個(gè) ECharts 實(shí)例對象
connect 可以實(shí)現(xiàn)多圖關(guān)聯(lián)，傳入聯(lián)動(dòng)目標(biāo)為 EChart 實(shí)例，支持?jǐn)?shù)組

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
  <script src="js/jquery.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px;border:1px solid red"></div>
  <div style="width: 600px;height:400px;border:1px solid green" id="div1">
</div>
<script>
  var mCharts = echarts.init(document.querySelector("div"), 'itcast')
  var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺(tái)', '二妞', '大
強(qiáng)']
  var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
  var option = {
    xAxis: {
      type: 'category',
      data: xDataArr
   },
    toolbox: {
      feature: {
        saveAsImage: {}
     }
   },
    yAxis: {
      type: 'value'
},
    series: [
     {
        type: 'bar',
        data: yDataArr
     }
   ]
 };
  mCharts.setOption(option)
  $.get('json/map/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson)
    var mCharts2 = echarts.init(document.querySelector('#div1'));
    var option2 = {
      geo: {
        type: 'map',
        map: 'china'
     }
   }
    mCharts2.setOption(option2)
    echarts.connect([mCharts, mCharts2])
 })
</script>
</body>
</html>

這樣, 由于我們打開了toolbox中的saveAsImage, 所以會(huì)出現(xiàn)下載圖片的按鈕. 而通過
echarts.connect([mCharts, mCharts2]) , 此時(shí)點(diǎn)擊下載圖片按鈕, 保存下來的圖片就是兩個(gè)圖
表的圖片了.

echartsInstance對象

eChartsInstance 對象是通過 echarts.init 方法調(diào)用之后得到的

echartsInstance.setOption
設(shè)置或修改圖表實(shí)例的配置項(xiàng)以及數(shù)據(jù)
多次調(diào)用setOption方法
合并新的配置和舊的配置
增量動(dòng)畫
echartsInstance.resize

重新計(jì)算和繪制圖表
一般和window對象的resize事件結(jié)合使用
window.onresize = function(){
  myChart.resize();
}

echartsInstance.on echartsInstance.off
綁定或者解綁事件處理函數(shù)
鼠標(biāo)事件

常見事件: 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup' 等
事件參數(shù) arg:  和事件相關(guān)的數(shù)據(jù)信息
mCharts.on('click', function (arg) {
  // console.log(arg)
  console.log('餅圖被點(diǎn)擊了')
})
解綁事件:
mCharts.off('click')

ECharts 事件

常見事件:
legendselectchanged、'datazoom'、'pieselectchanged'、'mapselectchanged'
等
事件參數(shù) arg:  和事件相關(guān)的數(shù)據(jù)信息
mCharts.on('legendselectchanged', function (arg) {
  console.log(arg)
  console.log('圖例選擇發(fā)生了改變...')
})

echartsInstance.dispatchAction
主動(dòng)觸發(fā)某些行為, 使用代碼模擬用戶的行為

// 觸發(fā)高亮的行為
mCharts.dispatchAction({
  type: "highlight",
  seriesIndex: 0,
  dataIndex: 1
})
// 觸發(fā)顯示提示框的行為
mCharts.dispatchAction({
  type: "showTip",
  seriesIndex: 0,
  dataIndex: 3
})

echartsInstance.clear
清空當(dāng)前實(shí)例，會(huì)移除實(shí)例中所有的組件和圖表
清空之后可以再次 setOption
echartsInstance.dispose
銷毀實(shí)例
銷毀后實(shí)例無法再被使用

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

01Echarts的基本使用

01Echarts的基本使用

ECharts的快速上手

相關(guān)配置

通用配置

折線圖的實(shí)現(xiàn)步驟

折線圖的常見效果

線條控制

堆疊圖

散點(diǎn)圖的實(shí)現(xiàn)步驟

散點(diǎn)圖的常見效果

直角坐標(biāo)系的常見配置

餅圖的實(shí)現(xiàn)步驟

餅圖的常見效果

地圖

矢量地圖的實(shí)現(xiàn)步驟

地圖的常見配置

地圖的常見效果

不同城市顏色不同

地圖和散點(diǎn)圖結(jié)合

雷達(dá)圖

雷達(dá)圖的常見效果

儀表盤圖

儀表盤的常見效果

主題

自定義主題

調(diào)色盤

漸變顏色的實(shí)現(xiàn)

樣式

自適應(yīng)

動(dòng)畫的使用

增量動(dòng)畫

動(dòng)畫的配置

交互API

全局echarts對象

echartsInstance對象

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

01Echarts的基本使用

ECharts的快速上手

相關(guān)配置

通用配置

折線圖的實(shí)現(xiàn)步驟

折線圖的常見效果

線條控制

堆疊圖

散點(diǎn)圖的實(shí)現(xiàn)步驟

散點(diǎn)圖的常見效果

直角坐標(biāo)系的常見配置

餅圖的實(shí)現(xiàn)步驟

餅圖的常見效果

地圖

矢量地圖的實(shí)現(xiàn)步驟

地圖的常見配置

地圖的常見效果

不同城市顏色不同

地圖和散點(diǎn)圖結(jié)合

雷達(dá)圖

雷達(dá)圖的常見效果

儀表盤圖

儀表盤的常見效果

主題

自定義主題

調(diào)色盤

漸變顏色的實(shí)現(xiàn)

樣式

自適應(yīng)

動(dòng)畫的使用

增量動(dòng)畫

動(dòng)畫的配置

交互API

全局echarts對象

echartsInstance對象

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频