React簡單封裝ECharts餅圖

ztyzz 發布于2019-08-01 17:13 / 2964人閱讀

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

使用ECharts 獲取ECharts

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

最簡單的方式就是直接引用js文件就o了~

當然，這次要用的是webpack來進行包管理，所以就要通過webpack來獲取Echarts：

npm install echarts --save

引入ECharts

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

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

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

比如這次我需要畫一個餅圖，我就需要引入：

var echarts = require("echarts/lib/echarts")
require("echarts/lib/chart/pie")
require("echarts/lib/component/title")

gogogo 定義組件

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

render() {
    return (
    
      
      
    
  )
}

initPieChart()

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

initPieChart() {
  const { data } = this.props
  let myChart = echarts.init(this.refs.pieChart)
  let options = this.setOption(data)
  myChart.setOption(options)
}
//這是一個最簡單的餅圖~
setOption(data) {
  return {
    title:{
      text:"編程語言",
      left:"center"
    },
    series : [
      {
        name: "比例",
        type: "pie",
        data: data,
        label: {
          normal: {
            formatter: "aimq00y% 
{b}",
          }
        }
      }
    ]
  }
}

綁定方法

constructor(props) {
  super(props)
  this.setOption = this.setOption.bind(this)
  this.initChart = this.initChart.bind(this)
}

初始化ECarts

上面已經定義了initPieChart方法，我們該在什么時候用這個方法呢？

當然是要在DOM渲染完成了之后啊，然后通過refs去獲取這個DOM節點~

也就是componentDidMount的時候：

componentDidMount() {
  this.iniChart();
}

更新

componentDidUpdate() {
  this.iniChart();
}

傳數據

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(
      
        
      
    )
  }
}

結果

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

原文地址~

云服務器 GPU云服務器三維餅圖數據餅圖 python 餅圖 HighCharts?餅圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51024.html

React簡單封裝ECharts餅圖

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

lingdududu 2019-08-20 18:09 評論0 收藏0
三大圖表庫：ECharts 、 BizCharts 和 G2，該如何選擇？

摘要：最近阿里正式開源的圖表庫基于技術棧，各個圖表項皆采用了組件的形式，貼近的使用特點。相關文檔組件化阿里的圖表組件手拉手，用開發動態刷新組件文檔地址一安裝通過引入二引用成功安裝完成之后，即可使用或進行引用。最近阿里正式開源的BizCharts圖表庫基于React技術棧，各個圖表項皆采用了組件的形式，貼近React的使用特點。同時BizCharts基于G2進行封裝，Bizcharts也繼承了G2相...

draveness 2019-04-23 13:19 評論0 收藏0
ECharts 學習筆記02, 餅圖與南丁格爾圖

摘要：目標使用繪制餅狀圖并在此基礎上繪制南丁格爾餅圖示例如下搭建環境新建文件夾目錄結構如下編寫我們在中放入和分別用于顯示餅狀圖和南丁格爾圖編寫文件為了使和并列我們需要加上樣式編寫文件餅狀圖需要設置。目標使用 echarts 繪制餅狀圖, 并在此基礎上繪制南丁格爾餅圖, 示例如下 showImg(https://segmentfault.com/img/bVbqkV8?w=400&h=4...

張遷 2019-08-23 16:18 評論0 收藏0
echarts.js 畫報表、數據可視化(第一部分)

摘要：畫報表數據可視化第一部分目標本次目標主要可以通過這個框架畫出各種圖標，例如矩形圖餅圖折線圖等等。可以這樣設置這樣設置，是可是數據中每個的的，只要設置了即可，其他參數可以附帶。畫一個餅圖看效果演示餅圖銷售額銷售額萬元京東淘寶天貓一號店未完待續 echarts.js 畫報表、數據可視化(第一部分) 目標: 本次目標主要可以通過這個框架畫出各種圖標，例如：矩形圖、餅圖、折線圖等等。搭...

Rainie 2019-08-20 18:22 評論0 收藏0