簡單使用ECharts

Echarts的簡單使用

emmmm跟着官網敲 Orz

echarts 提供了下面這幾種定製：

• 徹底版：echarts/dist/echarts.js，體積最大，包含全部的圖表和組件，所包含內容參見：echarts/echarts.all.js。
• 經常使用版：echarts/dist/echarts.common.js，體積適中，包含常見的圖表和組件，所包含內容參見：echarts/echarts.common.js。
• 精簡版：echarts/dist/echarts.simple.js，體積較小，僅包含最經常使用的圖表和組件，所包含內容參見：echarts/echarts.simple.js。
• 還有就是自定義構建

本身建立一個簡單的html實現的

首先引入js文件

經過Echarts官網的自定義構建搭建了一個只包含小型餅圖的js文件

由於只想畫餅圖因此這裏只打包遼餅圖

還有組件和座標系提供下載

<script src="./js/echarts.min.js"></script>
複製代碼

html中添加div

<div id="main" style="width: 600px;height:400px;margin: 60px auto;"></div>
複製代碼

餅狀圖 js代碼

var myChart = echarts.init(document.getElementById('main'));
option = {
  title : {
    text: 'Toki', //大標題
    subtext: 'Orz',  //相似於副標題
    x:'center'  //標題位置 居中
  },
  tooltip : {
    trigger: 'item',  //數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
    formatter: "{a} <br/>{b} : {c} ({d}%)"  //{a}（系列名稱），{b}（數據項名稱），{c}（數值）, {d}（百分比）用於鼠標懸浮時對應的顯示格式和內容
  },
  legend: {
    orient: 'vertical', //圖例列表的佈局朝向
    left: 'left',
    data: ['吃','喝','睡','玩','？？？']
  },
  series : [  //系列列表。每一個系列經過 type 決定本身的圖表類型
    {
      name: 'toki',
      type: 'pie',
      radius : '55%',
      center: ['50%', '60%'],
      data:[
        {value:335, name:'吃'},
        {value:310, name:'喝'},
        {value:234, name:'睡'},
        {value:135, name:'玩'},
        {value:1548, name:'？？？'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
myChart.setOption(option);  // 這句不能忘記遼
複製代碼

實現效果