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,title : {
                textStyle: {       
                    fontWeight: 'bolder',fontSize: 20,fontStyle: 'italic'
                }
            },detail : {
                textStyle: {       
                    fontWeight: 'bolder'
                }
            },data:[{value: 40,name: 'km/h'}]
        },{
            name:'yibiao',center : ['25%','55%'],radius : '50%',max:7,endAngle:45,splitNumber:7,axisLine: {            
                lineStyle: {       
                    width: 8
                }
            },axisTick: {            
                length :12,pointer: {
                width:5
            },title : {
                offsetCenter: [0,'-30%'],},data:[{value: 1.5,name: 'x1000 r/min'}]
        },{
            name:'yibiao02',center : ['75%','50%'],max:2,startAngle:135,splitNumber:2,axisLine: {            
                lineStyle: {       
                    color: [[0.2,'#ff4500'],[0.8,'#48b'],[1,'#228b22']],width: 8
                }
            },axisTick: {            
                splitNumber:5,length :10,axisLabel: {
                formatter:function(v){
                    switch (v + '') {
                        case '0' : return 'E';
                        case '1' : return 'Gas';
                        case '2' : return 'F';
                    }
                }
            },splitLine: {           
                length :15,pointer: {
                width:2
            },title : {
                show: false
            },detail : {
                show: false
            },data:[{value: 0.5,name: 'gas'}]
        },{
            name:'yibiao03',startAngle:315,endAngle:225,axisTick: {            
                show: false
            },axisLabel: {
                formatter:function(v){
                    switch (v + '') {
                        case '0' : return 'H';
                        case '1' : return 'Water';
                        case '2' : return 'C';
                    }
                }
            },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就能看到效果

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

猜你在找的React相关文章