webpack下react与echarts一起使用的简单示例

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

npm install echarts --save

该例子总共有4个文件

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>

5, webpack.config.js

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//实时刷新
  // } 
} 

写完后webpack打包编译，然后在浏览器中打开chart.html就能看到效果