react webpack环境下使用echarts

最新推荐文章于 2024-06-22 16:50:41 发布

瑤11

最新推荐文章于 2024-06-22 16:50:41 发布

阅读量347

点赞数 2

分类专栏：小工具文章标签： echarts react webpack

本文链接：https://blog.csdn.net/weixin_40551876/article/details/96279356

版权

小工具专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这是之前接触过的图表库，最近项目又重新用到关于图表方面。由于之前没有整理出，单独的相关内容，每次需要重新查阅，所以特别记录一下，希望也能给看文章的你带来帮助。期望接下来，也会保持记录的好习惯，先给自己立个flag，(#^.^#)。有不足之处，还望指点哇！

介绍一下 eChats

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

针对项目

目前使用的基于react 使用webpack 的开发环境，使用操作如下

npm 安装 ECharts （目前项目 4.2.1 版本）

npm install echarts --save

引入 ECharts

var echarts = require('echarts');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

按需引入

提示：按需引入 ECharts 图表和组件

默认使用 require('echarts') 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。

例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。

提示：可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

举个实际栗子

pageIndex.js 引用的页面

import { Component} from 'refast';
import Echarts from "components/eCharts";
const Graph = Echarts.lineGraph;

export default class pageIndex extends Component {
  constructor(props) {
    super(props);
    this.state = {
      MATChart:{
        legendData: ["测试折线图"],
        seriesData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 60, 0, 0],
        xAxisData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
      },
    }
  }

  componentDidMount() {
  }
  componentDidUpdate(){
  }
  componentWillUnmount(){
  }

  render() {
    let t = this;
    return (
      <div>
        < Graph data = { t.state.MATChart } id = {'MATChart' }/>
      </div>
    );
  }
}

提示：id是对应绑定的，找到那个div进行渲染，如果多次调用图表时候，注意传入id的值，不要重复！

lineGraph.js


import { Component } from 'refast';
import "./eCharts.less";
// import ddtalk from 'ddtalk';

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入折线图
import  'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import tools from '../../functions/tools';

const colorLineCom = '#f2f2f2';
const colorRedCom = '#ea3323';
const colorTextCom = '#808080';
export default class PagePayroll extends Component {

	constructor(props) {
		super(props);
		this.state = {
		};
	  }
	
	componentDidMount() {
		const t = this;
		let data = this.props.data
		let id = this.props.id
		if(!tools.isEmptyUnderfind(data)){
			t.setState({
				chartData:data,
				id:id
			})
		}
		tools.hideArrow();
	}


	componentDidUpdate(){
		const t =this;
		t.getEChart(t.state.id)
		tools.hideArrow();

	}

	getEChart(id){
		const t= this;
		let myChart = echarts.init(document.getElementById(id));
			// 绘制图表
			myChart.setOption({
			title: {
				// text: '当年月奖励指数趋势图',
			},
			tooltip : {
				trigger: 'axis',
				axisPointer: {
					type: 'line',
					label: {
						// backgroundColor: '#56a1d'
						backgroundColor: colorRedCom
					}
				}
			},
			// legend: {
			// 	data:t.state.legendData
			// },
			toolbox: {
				// feature: {
				// 	saveAsImage: {}
				// }
			},
			grid: {
				// left: '2%',
				// right: '2%',
				top: '10%',
				// containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					boundaryGap : false,
					data :t.state.chartData.xAxisData,
					axisLabel:{
						color: colorTextCom
					},
					axisLine: {
						onZero: false,
						lineStyle:{
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0, color: colorLineCom // 0% 处的颜色
								}, {
									offset: 1, color: colorLineCom // 100% 处的颜色
								}],
								globalCoord: false // 缺省为 false
							},
							
							
						}
					   
					},
				}
			],
			yAxis : [
				{
					type : 'value',
					 //设置网格线颜色
					splitLine: {
						show: true,
						lineStyle:{
							color: colorLineCom,
							width: 1,
							type: 'solid'
						}
				　　},
					axisLabel:{
						color: colorTextCom
					},
					axisLine: {
						onZero: false,
						lineStyle:{
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0, color: colorLineCom // 0% 处的颜色
								}, {
									offset: 1, color: colorLineCom // 100% 处的颜色
								}],
								globalCoord: false // 缺省为 false
							}
						}
					}
				}
			],
			series : [
				{
					name:t.state.chartData.legendData,
					data: t.state.chartData.seriesData,
					type: 'line',
					symbol: 'circle',     //设定为实心点
					smooth: false,
					stack: '总量',
					label: {
						normal: {
							show: false,
							position: 'top'
						}
					},
					symbolSize: 10,
					itemStyle:{
						normal:{
							color:colorRedCom,
							lineStyle:{
								color:colorRedCom,
								type:'dashed'
							},
						}
					},
					lineStyle:{
							type:'dashed'
						},
				}

			],
			color: colorRedCom,
			});
	}

	render() {
		const t = this;
		return (
			<div className='eCahrts'>

				<div id={t.state.id}
				style={{ width: '100vw', height: '40vh' }} 
				className='main_Line'></div>
			</div>
		);
	}
}

提示：目前在测试过程中，这个渲染的div的宽高是要强制给出的，渲染之前！大致这样，如有别的方式，请指点下，谢谢！

图表样式基本可以通过配置信息，进行修改，配置项手册 https://echarts.baidu.com/option.html#title

tools.js

export default {
    isEmptyUnderfind(v) {
        if(v==undefined ||  (Object.keys(v).length <= 0)|| v==null|| v==[] ){
            return true;
        }
        else{
            return false;
        }
    },
    hideArrow(){
        $("i").hide();
        $("i").removeClass("arrow")
    },
}

提示：如需引用注意引用路径哇！项目引用了jquery.js!

效果图

参考链接：

echarts官网简介 : https://echarts.baidu.com/echarts2/doc/doc.html

echarts官网安装教程在 webpack 中使用 ECharts :

https://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

echarts官网按需引入的模块列表： https://github.com/ecomfe/echarts/blob/master/index.js

echarts官网配置项手册 https://echarts.baidu.com/option.html#title

瑤11

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
react webpack环境下使用echarts

这是之前接触过的图表库，最近项目又重新用到关于图表方面。由于之前没有整理出，单独的相关内容，每次需要重新查阅，所以特别记录一下，希望也能给看文章的你带来帮助。期望接下来，也会保持记录的好习惯，先给自己立个flag，(#^.^#)。有不足之处，还望指点哇！介绍一下 eChatsECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库...
复制链接

扫一扫