展示前需要在webpack下安裝react，echarts的包

npm install echarts --save

1，GaugeComp.js   --- 定義gauge  class

2，options.js                       --- 這個是echarts對gauge設定的json物件

3，main.js                           --- 入口js，從這裡開始

4，chart.html                      ----頁面展示

（webpack.config.js檔案也在下面，它定義了入口與編譯後文件的位置）

1，GaugeComp.js

import React, {Component} from "react";
import echarts from "echarts";
import {options} from './options';


class GaugeComp extends Component {
        //初始化
	constructor () {
		super();
	}
	//元件載入後呼叫的hook函式
	componentDidMount() {
		echarts.init(document.getElementById(this.props.id)).setOption(option, true);
	}


	render () {
		return (
			<div id={this.props.id} style={{width:this.props.width + 'px',height:this.props.height + 'px'}}>
			</div>
		)
	}			
}
export default GaugeComp
 

2，options.js （這個根據使用的chart型別而定，官網可以copy）

var options = {
    tooltip : {
        formatter: "{a} <br/>{c} {b}"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name:'demo',
            type:'gauge',
            z: 3,
            min:0,
            max:220,
            splitNumber:11,
            axisLine: {            
                lineStyle: {       
                    width: 10
                }
            },
            axisTick: {            
                length :15,        
                lineStyle: {       
                    color: 'auto'
                }
            },
            splitLine: {           
                length :20,         
                lineStyle: {       
                    color: 'auto'
                }
            },
            title : {
                textStyle: {       
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic'
                }
            },
            detail : {
                textStyle: {       
                    fontWeight: 'bolder'
                }
            },
            data:[{value: 40, name: 'km/h'}]
        },
        {
            name:'yibiao',
            type:'gauge',
            center : ['25%', '55%'],    
            radius : '50%',
            min:0,
            max:7,
            endAngle:45,
            splitNumber:7,
            axisLine: {            
                lineStyle: {       
                    width: 8
                }
            },
            axisTick: {            
                length :12,        
                lineStyle: {       
                    color: 'auto'
                }
            },
            splitLine: {           
                length :20,         
                lineStyle: {       
                    color: 'auto'
                }
            },
            pointer: {
                width:5
            },
            title : {
                offsetCenter: [0, '-30%'],       
            },
            detail : {
                textStyle: {       
                    fontWeight: 'bolder'
                }
            },
            data:[{value: 1.5, name: 'x1000 r/min'}]
        },
        {
            name:'yibiao02',
            type:'gauge',
            center : ['75%', '50%'],    
            radius : '50%',
            min:0,
            max:2,
            startAngle:135,
            endAngle:45,
            splitNumber:2,
            axisLine: {            
                lineStyle: {       
                    color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
                    width: 8
                }
            },
            axisTick: {            
                splitNumber:5,
                length :10,        
                lineStyle: {       
                    color: 'auto'
                }
            },
            axisLabel: {
                formatter:function(v){
                    switch (v + '') {
                        case '0' : return 'E';
                        case '1' : return 'Gas';
                        case '2' : return 'F';
                    }
                }
            },
            splitLine: {           
                length :15,         
                lineStyle: {       
                    color: 'auto'
                }
            },
            pointer: {
                width:2
            },
            title : {
                show: false
            },
            detail : {
                show: false
            },
            data:[{value: 0.5, name: 'gas'}]
        },
        {
            name:'yibiao03',
            type:'gauge',
            center : ['75%', '50%'],    
            radius : '50%',
            min:0,
            max:2,
            startAngle:315,
            endAngle:225,
            splitNumber:2,
            axisLine: {            
                lineStyle: {       
                    color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
                    width: 8
                }
            },
            axisTick: {            
                show: false
            },
            axisLabel: {
                formatter:function(v){
                    switch (v + '') {
                        case '0' : return 'H';
                        case '1' : return 'Water';
                        case '2' : return 'C';
                    }
                }
            },
            splitLine: {           
                length :15,         
                lineStyle: {       
                    color: 'auto'
                }
            },
            pointer: {
                width:2
            },
            title : {
                show: false
            },
            detail : {
                show: false
            },
            data:[{value: 0.5, name: 'gas'}]
        }
    ]
};
export {options}
 

3，main.js, 入口檔案，需要在webpack.config.js中設定

import React from 'react';
import {render} from 'react-dom';
import GaugeComp from './GaugeComp';


render(<GaugeComp id="xm" width='1000' height='500' />, document.getElementById('main'));

4，chart.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="main"></div>
	<script type="text/javascript" src="bundle.js"></script><!-- 此檔案會在下面的webpack.config.js中設定 -->
</body>
</html>

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');

module.exports = {
  // devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",//入口檔案
  output: {
    path: __dirname + "/public",//打包後的檔案存放的地方
    filename: "bundle.js"//打包後輸出檔案的檔名
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'//在webpack的module部分的loaders裡進行配置即可
      },
      {
        test: /\.css$/,
        loader: 'style!css'//新增對樣式表的處理
      }      
    ]
  },  
  plugins: [
    new webpack.ProvidePlugin({ //載入jq
      $: 'jquery'
    }),
    new ExtractTextPlugin("style.css")
  ]
  // devServer: {
	 //  contentBase: "./public",//本地伺服器所載入的頁面所在的目錄
	 //  colors: true,//終端中輸出結果為彩色
	 //  historyApiFallback: true,//不跳轉
	 //  inline: true//實時重新整理
  // } 
}