Echarts 使用方法以及部分配置介紹

Echarts官網

官方文檔，點擊進入

方式一
1.1運用在普通單頁面當中

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" >

</script>

引入此文件 進行使用
1.2 需設置盒子容器

<div id="chart" style="width:800px;height:800px;"></div>

1.3 獲取盒子ID

var myChart = echarts.init(document.getElementById("chart"))

1.4 引入所需要使用的可視化數據

 tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      position: function(p) {
        //其中p爲當前鼠標的位置
        return [p[0] + 10, p[1] - 10];
      }
    },
    legend: {
      top: "90%",
      itemWidth: 10,
      itemHeight: 10,
      data: ["0歲以下", "20-29歲", "30-39歲", "40-49歲", "50歲以上"],
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        name: "年齡分佈",
        type: "pie",
        center: ["50%", "42%"],
        radius: ["40%", "60%"],
        color: [
          "#065aab",
          "#066eab",
          "#0682ab",
          "#0696ab",
          "#06a0ab",
          "#06b4ab",
          "#06c8ab",
          "#06dcab",
          "#06f0ab"
        ],
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 1, name: "0歲以下" },
          { value: 4, name: "20-29歲" },
          { value: 2, name: "30-39歲" },
          { value: 2, name: "40-49歲" },
          { value: 1, name: "50歲以上" }
        ]
      }
    ]

1.5 綁定數據

myChart.setOption(option);

總結：
1 下載並引入echart.js文件
2 準備具備大小的盒子容器
3 初始化實例對象
4 指定配置項和數據
5 將配置項設置給echarts實例對象

部分配置

• series

1 系列列表。每個系列通過 type 決定自己的圖表類型
2 圖標數據，指定什麼類型的圖標，可以多個圖表重疊。

• xAxis：直角座標系 grid 中的 x 軸
  boundaryGap: 座標軸兩邊留白策略 true，這時候刻度只是作爲分隔線，標籤和數據點都會在兩個刻度之間的帶(band)中間。
• yAxis：直角座標系 grid 中的 y 軸
• grid：直角座標系內繪圖網格
• title：標題組件
• tooltip：提示框組件
• legend：圖例組件
• color：調色盤顏色列表

總結 ： 好用好評！