成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

React簡(jiǎn)單封裝ECharts餅圖

lingdududu / 3231人閱讀

摘要：默認(rèn)使用得到的是已經(jīng)加載了所有圖表和組件的包，因此體積會(huì)比較大，如果在項(xiàng)目中對(duì)體積要求比較苛刻，也可以只按需引入需要的模塊。官方式這么說(shuō)的，所以我們要到去查看可以引入的模塊列表，并按需引入。

使用ECharts 獲取ECharts

Echarts官網(wǎng)教程中就有告訴通過(guò)各種方式獲取Echarts：http://echarts.baidu.com/tutorial.html

最簡(jiǎn)單的方式就是直接引用js文件就o了~

當(dāng)然，這次要用的是webpack來(lái)進(jìn)行包管理，所以就要通過(guò)webpack來(lái)獲取Echarts：

npm install echarts --save
引入ECharts

通過(guò)webpack獲取的ECharts會(huì)放在項(xiàng)目的node_modules目錄下，可以直接通過(guò)require("echarts")得到。

默認(rèn)使用 require("echarts") 得到的是已經(jīng)加載了所有圖表和組件的 ECharts 包，因此體積會(huì)比較大，如果在項(xiàng)目中對(duì)體積要求比較苛刻，也可以只按需引入需要的模塊。

官方式這么說(shuō)的，所以我們要到https://github.com/ecomfe/echarts/blob/master/index.js去查看可以引入的模塊列表，并按需引入。

比如這次我需要畫(huà)一個(gè)餅圖，我就需要引入：

var echarts = require("echarts/lib/echarts")
require("echarts/lib/chart/pie")
require("echarts/lib/component/title")
gogogo 定義組件

我們先定義一個(gè)Component,ECharts的渲染是需要在這個(gè)div有寬高的前提下，所以在這個(gè)組件的render()方法中要有一個(gè)div容器來(lái)展示ECharts,并且這個(gè)div要設(shè)置寬高。

render() {
    return (
    

      

      

    

  )
}
initPieChart()

就像平時(shí)使用ECharts一樣，我們先是獲取數(shù)據(jù)，然后initECharts，然后setOption，就搞定了~

initPieChart() {
  const { data } = this.props
  let myChart = echarts.init(this.refs.pieChart)
  let options = this.setOption(data)
  myChart.setOption(options)
}
//這是一個(gè)最簡(jiǎn)單的餅圖~
setOption(data) {
  return {
    title:{
      text:"編程語(yǔ)言",
      left:"center"
    },
    series : [
      {
        name: "比例",
        type: "pie",
        data: data,
        label: {
          normal: {
            formatter: "qoyqs8suu2u% 
",
          }
        }
      }
    ]
  }
}
綁定方法 
constructor(props) {
  super(props)
  this.setOption = this.setOption.bind(this)
  this.initChart = this.initChart.bind(this)
}
初始化ECarts

上面已經(jīng)定義了initPieChart方法，我們?cè)撛谑裁磿r(shí)候用這個(gè)方法呢？

當(dāng)然是要在DOM渲染完成了之后啊，然后通過(guò)refs去獲取這個(gè)DOM節(jié)點(diǎn)~

也就是componentDidMount的時(shí)候：

componentDidMount() {
  this.iniChart();
}
更新 
componentDidUpdate() {
  this.iniChart();
}
傳數(shù)據(jù) 
import Pie from "./pie";
const data = [
  {value: 2, name: "JavaScript"},
  {value: 1, name: "Java"},
  {value: 1, name: "HTML/CSS"}
]
export default class ComponentBody extends React.Component{
  render(){
    return(
      

        
      

    )
  }
}
結(jié)果

完整代碼見(jiàn)https://github.com/axuebin/react-echarts-demo/blob/master/src/pie.js

原文地址~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84133.html

相關(guān)文章

  • React簡(jiǎn)單封裝ECharts餅圖

    摘要：默認(rèn)使用得到的是已經(jīng)加載了所有圖表和組件的包，因此體積會(huì)比較大，如果在項(xiàng)目中對(duì)體積要求比較苛刻，也可以只按需引入需要的模塊。官方式這么說(shuō)的，所以我們要到去查看可以引入的模塊列表，并按需引入。 使用ECharts 獲取ECharts Echarts官網(wǎng)教程中就有告訴通過(guò)各種方式獲取Echarts：http://echarts.baidu.com/tutorial.html 最簡(jiǎn)單的方式就...

    ztyzz 評(píng)論0 收藏0

  • 三大圖表庫(kù)：ECharts 、 BizCharts 和 G2，該如何選擇？

    摘要：最近阿里正式開(kāi)源的圖表庫(kù)基于技術(shù)棧，各個(gè)圖表項(xiàng)皆采用了組件的形式，貼近的使用特點(diǎn)。相關(guān)文檔組件化阿里的圖表組件手拉手，用開(kāi)發(fā)動(dòng)態(tài)刷新組件文檔地址一安裝通過(guò)引入二引用成功安裝完成之后，即可使用或進(jìn)行引用。最近阿里正式開(kāi)源的BizCharts圖表庫(kù)基于React技術(shù)棧，各個(gè)圖表項(xiàng)皆采用了組件的形式，貼近React的使用特點(diǎn)。同時(shí)BizCharts基于G2進(jìn)行封裝，Bizcharts也繼承了G2相...

    draveness 評(píng)論0 收藏0

  • ECharts 學(xué)習(xí)筆記02, 餅圖與南丁格爾圖

    摘要：目標(biāo)使用繪制餅狀圖并在此基礎(chǔ)上繪制南丁格爾餅圖示例如下搭建環(huán)境新建文件夾目錄結(jié)構(gòu)如下編寫(xiě)我們?cè)谥蟹湃牒头謩e用于顯示餅狀圖和南丁格爾圖編寫(xiě)文件為了使和并列我們需要加上樣式編寫(xiě)文件餅狀圖需要設(shè)置。 目標(biāo) 使用 echarts 繪制餅狀圖, 并在此基礎(chǔ)上繪制南丁格爾餅圖, 示例如下 showImg(https://segmentfault.com/img/bVbqkV8?w=400&h=4...

    張遷 評(píng)論0 收藏0

  • echarts.js 畫(huà)報(bào)表、數(shù)據(jù)可視化(第一部分)

    摘要：畫(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ù) echarts.js 畫(huà)報(bào)表、數(shù)據(jù)可視化(第一部分) 目標(biāo): 本次目標(biāo)主要可以通過(guò)這個(gè)框架畫(huà)出各種圖標(biāo)，例如：矩形圖、餅圖、折線(xiàn)圖等等。 搭...

    Rainie 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<