欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ECharts數(shù)據(jù)可視化基本使用之常用圖表類型

 更新時(shí)間：2023年11月23日 11:07:50   作者：馬驍堯  
這篇文章主要給大家介紹了關(guān)于ECharts數(shù)據(jù)可視化基本使用之常用圖表類型的相關(guān)資料,echarts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫(kù),提供直觀,生動(dòng),可交互,可個(gè)性化定制的數(shù)據(jù)可視化圖表,需要的朋友可以參考下

內(nèi)容有點(diǎn)長(zhǎng)，建議先收藏

一.柱狀圖

柱狀圖是通過條形長(zhǎng)度來表現(xiàn)數(shù)據(jù)大小的一種圖表，柱狀圖的設(shè)置是將series里的type設(shè)置為bar

1.基本柱狀圖  

1.1最簡(jiǎn)單的柱狀圖

設(shè)置好type即可

<script type="text/javascript">
    // 因?yàn)樵揹emo會(huì)經(jīng)常更該，所以要銷毀前一個(gè)圖表
    echarts.init(document.getElementById('div')).dispose();
    //定義
    var myChart = echarts.init(document.getElementById('div'));
    var option= {
        xAxis:{
            data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期天']
        },
        yAxis:{},
        series :[
            {type:'bar',
            data:[12,31,67,32,13,42,36,]}
        ]
    }
  myChart.setOption(option);
 
</script>

1.2多系列柱狀圖 

但我們?cè)趕eries系列中設(shè)置多個(gè)type為bar時(shí)，就有多個(gè)柱狀圖

var option= {
        xAxis:{
            data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期天']
        },
        yAxis:{},
        series :[
            {type:'bar',
            data:[12,31,67,32,13,42,36,]},
            {type:'bar',
            data:[23,15,67,34,17,53,41]}
  ]
    }

1.3柱狀圖的樣式         

（1）柱條樣式

柱條的樣式可以通過 series.itemStyle 設(shè)置，包括：

  • 柱條的顏色（color）；
  • 柱條的描邊顏色（borderColor）、寬度（borderWidth）、樣式（borderType）；
  • 柱條圓角的半徑（barBorderRadius）；
  • 柱條透明度（opacity）；
  • 陰影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。
 series :[
            //單個(gè)數(shù)據(jù)設(shè)置柱狀樣式
            {type:'bar',
            data:[12,31,67,{
                value :34,
                itemStyle:{
                    color: 'green',
                    borderColor: 'backer',
                    opacity: 0.6
                }
            },13,42,36,]},
           //全局設(shè)置柱狀樣式
            {type:'bar',
            data:[23,15,67,34,17,53,41],
                itemStyle:{
                color:'#91cc3',
                    borderColor:'red',
                    borderType:'dashsed',
                    opacity:0.5
                }}
  ]

（2）柱條的寬度和高度

柱條的寬度用barwidth表示，barwidth：20%，表示柱每個(gè)條寬度占類目的20%；高度用barheght表示，方法和寬度一樣

（3）柱條間距

柱條間距分為兩種，一種是不同系列在同一類目下的距離 barGap，另一種是類目與類目的距離 barCategoryGap。

type:'bar',
            data:[12,31,67,34,13,42,36,],
            barGap:'20%',
                barCategoryGap:'40%'

例如上面：barGap：‘20%’表示不同系列在同一類目下柱條間距占類目的20%，而barCategroyGap：‘40%’表示每個(gè)類目右側(cè)的柱條空間占類目的40% 

（4）為柱條添加背景顏色

添加背景圖片可以簡(jiǎn)單地用showBackground開啟，并且可以通過 backgroundStyle配置。

 series :[
            //單個(gè)數(shù)據(jù)設(shè)置柱狀樣式
            {type:'bar',
            data:[12,31,67,34,13,42,36,],
            barGap:'20%',
                barCategoryGap:'40%',
                //背景顏色設(shè)置
                showBackground:true,
                backgroundstyle:{
                color: 'rgba(220,220,220,0.8)'
                }
            },
           //全局設(shè)置柱狀樣式
            {type:'bar',
            data:[23,15,67,34,17,53,41],
                itemStyle:{
                color:'#91cc3',
                    borderColor:'red',
                    borderType:'dashsed',
                    opacity:0.5
                }}
  ]

2.堆疊柱狀圖

堆疊柱狀圖不僅可以表現(xiàn)不同系列的值，還可以表現(xiàn)它們之和的變化，堆疊柱狀圖的設(shè)置很簡(jiǎn)單，只要在一個(gè)系列中用stack且設(shè)置堆疊的參數(shù)，就可以實(shí)現(xiàn)多個(gè)具有相同stack參數(shù)的系列進(jìn)行堆疊

series :[
            //單個(gè)數(shù)據(jù)設(shè)置柱狀樣式
            {type:'bar',
            data:[12,31,67,34,13,42,36,],
            barGap:'20%',
                barCategoryGap:'40%',
                //背景顏色設(shè)置
                showBackground:true,
                backgroundstyle:{
                color: 'rgba(220,220,220,0.8)'
                },
            stack:'x',
                },
           //全局設(shè)置柱狀樣式
            {type:'bar',
                stack: 'x',
            data:[23,15,67,34,17,53,41],
                itemStyle:{
                color:'#91cc3',
                    borderColor:'red',
                    borderType:'dashsed',
                    opacity:0.5
                }}
  ]

3.動(dòng)態(tài)排序柱狀圖

  1. 柱狀圖系列的 realtimeSort 設(shè)為 true，表示開啟該系列的動(dòng)態(tài)排序效果
  2. yAxis.inverse 設(shè)為 true，表示 Y 軸從下往上是從小到大的排列
  3. yAxis.animationDuration 建議設(shè)為 300，表示第一次柱條排序動(dòng)畫的時(shí)長(zhǎng)
  4. yAxis.animationDurationUpdate 建議設(shè)為 300，表示第一次后柱條排序動(dòng)畫的時(shí)長(zhǎng)
  5. 如果想只顯示前 n 名，將 yAxis.max 設(shè)為 n - 1，否則顯示所有柱條
  6. xAxis.max 建議設(shè)為 'dataMax' 表示用數(shù)據(jù)的最大值作為 X 軸最大值，視覺效果更好
  7. 如果想要實(shí)時(shí)改變標(biāo)簽，需要將 series.label.valueAnimation 設(shè)為 true
  8. animationDuration 設(shè)為 0，表示第一份數(shù)據(jù)不需要從 0 開始動(dòng)畫（如果希望從 0 開始則設(shè)為和 animationDurationUpdate 相同的值）
  9. animationDurationUpdate 建議設(shè)為 3000 表示每次更新動(dòng)畫時(shí)長(zhǎng)，這一數(shù)值應(yīng)與調(diào)用 setOption 改變數(shù)據(jù)的頻率相同
  10. 以 animationDurationUpdate 的頻率調(diào)用 setInterval，更新數(shù)據(jù)值，顯示下一個(gè)時(shí)間點(diǎn)對(duì)應(yīng)的柱條排序
var data = [];
for (let i = 0; i < 5; ++i) {
  data.push(Math.round(Math.random() * 200));
}
 
option = {
  xAxis: {
    max: 'dataMax'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],
    inverse: true,
    animationDuration: 300,
    animationDurationUpdate: 300,
    max: 2 // only the largest 3 bars will be displayed
  },
  series: [
    {
      realtimeSort: true,
      name: 'X',
      type: 'bar',
      data: data,
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }
  ],
  legend: {
    show: true
  },
  animationDuration: 3000,
  animationDurationUpdate: 3000,
  animationEasing: 'linear',
  animationEasingUpdate: 'linear'
};
 
function update() {
  var data = option.series[0].data;
  for (var i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
      data[i] += Math.round(Math.random() * 2000);
    } else {
      data[i] += Math.round(Math.random() * 200);
    }
  }
  myChart.setOption(option);
}
 
setInterval(function() {
  update();
}, 3000);

動(dòng)態(tài)圖 

4.階梯瀑布圖

我們可以使用堆疊的柱狀圖模擬該效果，

假設(shè)數(shù)據(jù)數(shù)組中的值是表示對(duì)前一個(gè)值的增減：

var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];

也就是第一個(gè)數(shù)據(jù)是 900，第二個(gè)數(shù)據(jù) 345 表示的是在 900 的基礎(chǔ)上增加了 345……將這個(gè)數(shù)據(jù)展示為階梯瀑布圖時(shí)，我們可以使用三個(gè)系列：第一個(gè)是不可交互的透明系列，用來實(shí)現(xiàn)“懸空”的柱狀圖效果；第二個(gè)系列用來表示正數(shù)；第三個(gè)系列用來表示負(fù)數(shù)。

var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
var help = [];
var positive = [];
var negative = [];
for (var i = 0, sum = 0; i < data.length; ++i) {
  if (data[i] >= 0) {
    positive.push(data[i]);
    negative.push('-');
  } else {
    positive.push('-');
    negative.push(-data[i]);
  }
 
  if (i === 0) {
    help.push(0);
  } else {
    sum += data[i - 1];
    if (data[i] < 0) {
      help.push(sum + data[i]);
    } else {
      help.push(sum);
    }
  }
}
 
option = {
  title: {
    text: 'Waterfall'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: (function() {
      var list = [];
      for (var i = 1; i <= 11; i++) {
        list.push('Oct/' + i);
      }
      return list;
    })()
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      stack: 'all',
      itemStyle: {
        normal: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        },
        emphasis: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        }
      },
      data: help
    },
    {
      name: 'positive',
      type: 'bar',
      stack: 'all',
      data: positive
    },
    {
      name: 'negative',
      type: 'bar',
      stack: 'all',
      data: negative,
      itemStyle: {
        color: '#f33'
      }
    }
  ]
};

二.折線線圖

1.基礎(chǔ)折線圖

1.1最基礎(chǔ)的折線圖

折線的實(shí)現(xiàn)方式為橫坐標(biāo)設(shè)置為category，縱坐標(biāo)設(shè)置為value，同時(shí)series的type為line

option={
       xAxis:{
           type:'category',
           data:['A','B','C','D'],
    },
       yAxis:{
         type: 'value',
       },
       series:{
           type:'line',
         data: [23,42,11,28,32],
       },
   }

1.2笛卡爾坐標(biāo)系中的折線圖

如果我們希望折線圖在橫坐標(biāo)和縱坐標(biāo)上都是連續(xù)的，即在笛卡爾坐標(biāo)系中，應(yīng)該如何實(shí)現(xiàn)呢？答案也很簡(jiǎn)單，只要把 series 的 data 每個(gè)數(shù)據(jù)用一個(gè)包含兩個(gè)元素的數(shù)組表示就行了。

  option={
       xAxis:{},
       yAxis:{},
       series:{
           type:'line',
         data: [
             [10,10],
             [30,30],
             [60,10],
             [90,30],
             [120,10]
         ],
       },
   }

1.3折線圖樣式設(shè)置

折線的樣式

折線圖中折線的樣式可以通過 lineStyle 設(shè)置?？梢詾槠渲付伾?、線寬、折線類型、陰影、不透明度等等。這里，我們以設(shè)置顏色（color）、線寬（width）和折線類型（type）為例說明。

type參數(shù)：

  • 'solid' 實(shí)線
  • 'dashed' 點(diǎn)圓線
  • 'dotted' 點(diǎn)方線
option = {
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {
                data: [10, 22, 28, 23, 19],
                type: 'line',
                lineStyle: {
                    normal: {
                        color: 'green',
                        width: 4,
                        type: 'dotted'
                    }
                }
            }
        ]
    };

數(shù)據(jù)點(diǎn)的樣式

數(shù)據(jù)點(diǎn)的樣式可以通過series.itemStyle 指定填充顏色（color）、描邊顏色（borderColor）、描邊寬度（borderWidth）、描邊類型（borderType）、陰影（shadowColor）、不透明度（opacity）等。

1.4在數(shù)據(jù)點(diǎn)處顯示數(shù)值

在系列中，這數(shù)據(jù)點(diǎn)的標(biāo)簽通過 series.label 屬性指定。如果將 label 下的 show 指定為true，則表示該數(shù)值默認(rèn)時(shí)就顯示；如果為 false，而 series.emphasis.label.show 為 true，則表示只有在鼠標(biāo)移動(dòng)到該數(shù)據(jù)時(shí)，才顯示數(shù)值。

例如：鼠標(biāo)移動(dòng)時(shí)顯示值

 option = {
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {
                data: [10, 22, 28, 23, 19],
                type: 'line',
               emphasis:{
                    label:{
                        show:true,
                    }
               }
            }
        ]
    };

又例如顯示數(shù)值圖：

option = {
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {
                data: [10, 22, 28, 23, 19],
                type: 'line',
              label:{
                    show:true,
              }
            }
        ]
    };

1.5空數(shù)據(jù) 

我們使用字符串 '-' 表示空數(shù)據(jù)，這對(duì)其他系列的數(shù)據(jù)也是適用的

option = {
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {
                data: [10, 22, '-', 23, 19],
                type: 'line',
              label:{
                    show:true,
              }
            }
        ]
    };

2.堆疊折線圖

堆疊折線圖也是用系列的 stack 設(shè)置哪些系列堆疊在一起

option = {
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {data: [10, 22, 33, 23, 19],
                type: 'line',
            stack:'x'},
            {
                data:[23,32,44,32,37],
                type:'line',
                stack: 'x'
            }
        ]
    };

 但是不同的是，如果不加說明的話，我們很難判斷出這是一個(gè)堆疊折線圖，還是一個(gè)普通的折線圖。所以，對(duì)于堆疊折線圖而言，一般建議使用區(qū)域填充色以表明堆疊的情況。

 option = {
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {data: [10, 22, 33, 23, 19],
                type: 'line',
            stack:'x',
            areaStyle:{}},
            {
                data:[23,32,44,32,37],
                type:'line',
                stack: 'x',
                areaStyle: {}
            }
        ]
    };

3.區(qū)域面積圖

區(qū)域面積圖將折線到坐標(biāo)軸的空間設(shè)置背景色，用區(qū)域面積表達(dá)數(shù)據(jù)。

option = {
        xAxis: {
            type:'category',
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {type:'value'},
        series: [
            {data: [10, 22, 28, 23, 19],
                type: 'line',
                label:{show:true},
            areaStyle:{}},
            {
                data:[25, 14, 23, 35, 10],
                type:'line',
                label: {show:true},
                areaStyle: {
                    color:'#232323',
                    opacity:0.5
                }
            }
        ]
    };

4.平滑曲線圖

使用時(shí)，只需要將折線圖系列的 smooth 屬性設(shè)置為 true 即可。

  option = {
        xAxis: {
            type:'category',
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {type:'value'},
        series: [
            {data: [10, 22, 28, 23, 19],
                type: 'line',
                label:{show:true},
                smooth:true,
            areaStyle:{}},
        ]
    };

5.階梯線圖

系列的 step 屬性用來表征階梯線圖的連接類型，它共有三種取值：'start'、'middle' 和 'end'，分別表示在當(dāng)前點(diǎn)，當(dāng)前點(diǎn)與下個(gè)點(diǎn)的中間點(diǎn)，下個(gè)點(diǎn)拐彎。

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Step Start',
      type: 'line',
      step: 'start',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Step Middle',
      type: 'line',
      step: 'middle',
      data: [220, 282, 201, 234, 290, 430, 410]
    },
    {
      name: 'Step End',
      type: 'line',
      step: 'end',
      data: [450, 432, 401, 454, 590, 530, 510]
    }
  ]
};

三.餅圖

餅圖主要用于表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比。每個(gè)的弧度表示數(shù)據(jù)數(shù)量的比例

1.基礎(chǔ)餅圖

餅圖的配置和折線圖、柱狀圖略有不同，不再需要配置坐標(biāo)軸，而是把數(shù)據(jù)名稱和值都寫在系列中

 option = {
      series:[
          {
              type:'pie',
              data:[
                  {value:34,name:'星期一'},
                  {value:26,name:'星期二'},
                  {value:19,name:'星期三'},
              ],
          }
      ],
    };

 數(shù)據(jù)為0的餅圖

在默認(rèn)情況下，如果數(shù)據(jù)值和為 0，會(huì)顯示平均分割的扇形。比如，如果有 4 個(gè)數(shù)據(jù)項(xiàng)，并且每個(gè)數(shù)據(jù)項(xiàng)都是 0，則每個(gè)扇形都是 90°。如果我們希望在這種情況下不顯示任何扇形，可以將 series.stillShowZeroSum 設(shè)為 false。

如果希望扇形對(duì)應(yīng)的標(biāo)簽也不顯示，可以將 series.label.show 設(shè)為 false。

2.圓環(huán)圖

圓環(huán)圖同樣可以用來表示數(shù)據(jù)占總體的比例，相比于餅圖，它中間空余的部分可以用來顯示一些額外的文字等信息，因而也是一種常用的圖表類型。設(shè)置圓環(huán)圖時(shí)只要在series設(shè)置radius即可，形式為series：['%','%'],前一個(gè)百分比表示鏤空的部分，后一個(gè)百分比表示整體大小

 option = {
      series:[
          {
              type:'pie',
              data:[
                  {value:34,name:'星期一'},
                  {value:26,name:'星期二'},
                  {value:19,name:'星期三'},
              ],
              radius:['40%','70%'],
          }
      ],
    };

如果半徑是數(shù)組，其中的兩項(xiàng)也可以一項(xiàng)是數(shù)值，另一項(xiàng)是百分比形式的字符串。但是這樣可能導(dǎo)致在某些分辨率下，內(nèi)半徑小于外半徑。ECharts 會(huì)自動(dòng)使用小的一項(xiàng)作為內(nèi)半徑，但是仍應(yīng)小心這樣可能會(huì)導(dǎo)致的非預(yù)期效果。

1.在圓環(huán)圖中間顯示高亮扇形對(duì)應(yīng)的文字

option = {
  legend: {
    orient: 'vertical',
    x: 'left',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      data: [
        { value: 335, name: 'A' },
        { value: 310, name: 'B' },
        { value: 234, name: 'C' },
        { value: 135, name: 'D' },
        { value: 1548, name: 'E' }
      ]
    }
  ]
};

其中，avoidLabelOverlap 是用來控制是否由 ECharts 調(diào)整標(biāo)簽位置以實(shí)現(xiàn)防止標(biāo)簽重疊。它的默認(rèn)值是 true，而在這里，我們不希望標(biāo)簽位置調(diào)整到不是中間的位置，因此我們需要將其設(shè)為 false。

這樣，圓環(huán)圖中間會(huì)顯示高亮數(shù)據(jù)的 name 值。

3.南丁格爾圖（玫瑰圖）

南丁格爾圖又稱玫瑰圖，通常用弧度相同但半徑不同的扇形表示各個(gè)類目。

ECharts 可以通過將餅圖的 series.roseType 值設(shè)為 'area' 實(shí)現(xiàn)南丁格爾圖，其他配置項(xiàng)和餅圖是相同的。

option = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 100,
          name: 'A'
        },
        {
          value: 200,
          name: 'B'
        },
        {
          value: 300,
          name: 'C'
        },
        {
          value: 400,
          name: 'D'
        },
        {
          value: 500,
          name: 'E'
        }
      ],
      roseType: 'area'
    }
  ]
};

四.散點(diǎn)圖 

散點(diǎn)圖，也是一種常見的圖表類型。散點(diǎn)圖由許多“點(diǎn)”組成，有時(shí)，這些點(diǎn)用來表示數(shù)據(jù)在坐標(biāo)系中的位置（比如在笛卡爾坐標(biāo)系下，表示數(shù)據(jù)在 x 軸和 y 軸上的坐標(biāo)；在地圖坐標(biāo)系下，表示數(shù)據(jù)在地圖上的某個(gè)位置等）；有時(shí)，這些點(diǎn)的大小、顏色等屬性也可以映射到數(shù)據(jù)值，用以表現(xiàn)高維數(shù)據(jù)。

基礎(chǔ)散點(diǎn)圖        

1.最簡(jiǎn)單的散點(diǎn)圖

下面是一個(gè)橫坐標(biāo)為類目軸、縱坐標(biāo)為數(shù)值軸的最簡(jiǎn)單的散點(diǎn)圖配置：

option = {
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
};

2.笛卡爾坐標(biāo)系下的散點(diǎn)圖 

數(shù)據(jù)的橫坐標(biāo)和縱坐標(biāo)一同寫在 data 中即可

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [
        [10, 5],
        [0, 8],
        [6, 10],
        [2, 12],
        [8, 9]
      ]
    }
  ]
};

3.散點(diǎn)圖樣式設(shè)置 

圖形的形狀

圖形（symbol）指的是散點(diǎn)圖中數(shù)據(jù)“點(diǎn)”的形狀。有三類圖形可選，一種是 ECharts 內(nèi)置形狀，第二種是圖片，第三種是 SVG 的路徑。

ECharts 內(nèi)置形狀包括：圓形、矩形、圓角矩形、三角形、菱形、大頭針形、箭頭形，分別對(duì)應(yīng)'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。使用內(nèi)置形狀時(shí)，只要將 symbol 屬性指定為形狀名稱對(duì)應(yīng)的字符串即可。

如果想要將圖形指定為任意的圖片，以 'image://' 開頭，后面跟圖片的絕對(duì)或相對(duì)地址。形如：'image://http://example.com/xxx.png' 或 'image://./xxx.png'。

除此之外，還支持 SVG 的路徑作為矢量圖形，將 symbol 設(shè)置為以 'path://' 開頭的 SVG 路徑即可。使用矢量圖形的好處是，圖片不會(huì)因?yàn)榭s放而產(chǎn)生鋸齒或模糊，并且通常而言比圖片形式的文件大小更小。路徑的查看方法為，打開一個(gè) SVG 文件，找到形如 <path d="M… L…"></path> 的路徑，將 d 的值添加在 'path://' 后即可。

下面，我們展示一個(gè)將圖形設(shè)置為矢量愛心形狀的方式。

首先，我們需要一個(gè)愛心的 SVG 文件，可以使用矢量編輯軟件繪制，或者從網(wǎng)上下載到相關(guān)資源。其內(nèi)容如下：

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 51.997 51.997" style="enable-background:new 0 0 51.997 51.997;" xml:space="preserve">
    <path d="M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z"/>
</svg>
option = {
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310],
      symbolSize: 20,
      symbol:
        'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'
    }
  ]
};

圖形的大小

圖形大小可以使用 series.symbolSize 控制。它既可以是一個(gè)表示圖形大小的像素值，也可以是一個(gè)包含兩個(gè) number 元素的數(shù)組，分別表示圖形的寬和高。

除此之外，它還可以是一個(gè)回調(diào)函數(shù)，其參數(shù)格式為：

(value: Array | number, params: Object) => number | Array;

第一個(gè)參數(shù)為數(shù)據(jù)值，第二個(gè)參數(shù)是數(shù)據(jù)項(xiàng)的其他參數(shù)。

在下面的例子中，我們將散點(diǎn)圖點(diǎn)的大小設(shè)置為與其數(shù)據(jù)值成正比

option = {
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310],
      symbolSize: function(value) {
        return value / 10;
      }
    }
  ]
};

總結(jié)

到此這篇關(guān)于ECharts數(shù)據(jù)可視化基本使用之常用圖表類型的文章就介紹到這了,更多相關(guān)ECharts常用圖表類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論