ECharts应用在React

来源：互联网发布：存档软件编辑：程序博客网时间：2024/05/18 19:18

ECharts 是一个纯JS开源图形库，最大的特点是操作简单，数据配置方便，支持数据动态展示。由百度开发，并持续维护，目前已经开发到第三版。

官方文档 http://echarts.baidu.com/index.html
github：https://github.com/ecomfe/echarts

在html中使用方法

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>ECharts</title>    <!-- 引入 echarts.js -->    <script src="echarts.min.js"></script></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="width: 600px;height:400px;"></div>    <script type="text/javascript">        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));        // 指定图表的配置项和数据        var option = {            title: {                text: 'ECharts 入门示例'            },            tooltip: {},            legend: {                data:['销量']            },            xAxis: {                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]            },            yAxis: {},            series: [{                name: '销量',                type: 'bar',                data: [5, 20, 36, 10, 10, 20]            }]        };        // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);    </script></body></html>

React Component 中使用ECharts

1 配置Webpack

在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

2 引入 ECharts

采用ES6 写法

import React, { Component, PropTypes } from 'react';import echarts from 'echarts';class EChartsView extends Component {    componentDidMount() {        // 基于准备好的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]            }]        });    }    render() {        return(            <div id="main"></div>        );    }}

3 ECharts 用法笔记

主要通过setOption 设置图形
其中 series 系列列表。每个系列通过 type 决定自己的图表类型，
Series 中通过类似 xAxisIndex 、radarIndex 来设置图形投影到那个坐标系中。

0 0