摘要：畫(huà)報(bào)表數(shù)據(jù)可視化第一部分目標(biāo)本次目標(biāo)主要可以通過(guò)這個(gè)框架畫(huà)出各種圖標(biāo)，例如矩形圖餅圖折線(xiàn)圖等等?？梢赃@樣設(shè)置這樣設(shè)置，是可是數(shù)據(jù)中每個(gè)的的，只要設(shè)置了即可，其他參數(shù)可以附帶。畫(huà)一個(gè)餅圖看效果演示餅圖銷(xiāo)售額銷(xiāo)售額萬(wàn)元京東淘寶天貓一號(hào)店未完待續(xù)

目標(biāo): 本次目標(biāo)主要可以通過(guò)這個(gè)框架畫(huà)出各種圖標(biāo)，例如：矩形圖、餅圖、折線(xiàn)圖等等。

我們這里直接使用cdn引入,如果使用npm或者bower或者yarn 可以用下面命令進(jìn)行安裝:

$ npm install echarts
# 或者
$ bower install echarts
# 或者
$ yarn add echarts

安裝后的文件在node_modules或者bower_components直接導(dǎo)入使用即可。

下面直接從cdn中導(dǎo)入，cdnjs

如上圖準(zhǔn)備一個(gè)html文件，在script標(biāo)簽導(dǎo)入: echarts.

Ps: js 文件除非前置依賴(lài)，一般都在html文檔末尾導(dǎo)入。這里只為演示使用。

首先先看效果:

這里主要是一個(gè)矩形圖展示虛擬數(shù)據(jù)。應(yīng)用了設(shè)置了x,y軸和tooltips。下面看代碼:

 let barEcharts = echarts.init(document.querySelector("#echarts"))
    // 設(shè)置圖標(biāo)項(xiàng)
    let option = {
      title: { // 設(shè)置標(biāo)題
        text: "演示矩形圖",
        x: "center"
      },
      tooltip: {  // 設(shè)置懸浮提示
        trigger: "item",
        formatter: function (params) {
          return `${params.name}的銷(xiāo)售額為${params.value}萬(wàn)元`
        }
      },
      legend: { // 設(shè)置
        data: ["銷(xiāo)售額"]
      },
      xAxis: { // x軸設(shè)置
        data: ["一號(hào)店", "淘寶", "天貓", "京東"],
        name: "電商平臺(tái)"
      },
      yAxis: {  // y軸設(shè)置
        name: "銷(xiāo)售額/萬(wàn)元"
      },
      series: {  // 圖標(biāo)設(shè)置
        name: "銷(xiāo)售額/萬(wàn)元",
        type: "bar",  // 設(shè)置圖標(biāo)類(lèi)型
        data: [320, 1000, 874, 669]  //設(shè)置數(shù)據(jù)數(shù)據(jù)一般都是數(shù)組
      }
    }
    barEcharts.setOption(option) // 將設(shè)置應(yīng)用到圖表容器中

在上圖標(biāo)中，如果要針對(duì)每一項(xiàng)的記錄進(jìn)行點(diǎn)擊反饋如何操作？

在series選項(xiàng)中的data，他是一個(gè)數(shù)組，例如對(duì)于矩形圖這樣的?？梢赃@樣設(shè)置:
    data: [
            {
                value: 320,
                name: "yhd"
                
            },
            ...,
            {
                value: 669,
                name: "jd"
            }
        ]
這樣設(shè)置，data是可是數(shù)據(jù)中每個(gè)object的value的，只要設(shè)置了value即可，其他參數(shù)可以附帶。

看效果:

let pieEcharts = echarts.init(document.querySelector("#pie"))
    let pie = pieEcharts.setOption({
      title: {
        text: "演示餅圖",
        x: "center"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} 
 : {c} (6a22guqa%)"
      },
      legend: {
        data: ["銷(xiāo)售額"]
      },
      series: {
        name: "銷(xiāo)售額/萬(wàn)元",
        type: "pie",
        data: [{
          name: "京東",
          value: 669,
          type: "jd"
        }, {
          name: "淘寶",
          value: 1000,
          type: "jd"
        }, {
          name: "天貓",
          value: 874,
          type: "jd"
        }, {
          name: "一號(hào)店",
          value: 320,
          type: "jd"
        }]
      }

未完待續(xù)...